HTML標簽的設計都是有語義考慮的,下表是部分標簽的全稱和中文翻譯。
| 標簽名 |
英文全拼 |
中文翻譯 |
| div |
division |
分隔 |
| span |
span |
范圍 |
| ol |
ordered list |
排序列表 |
| ul |
unordered list |
不排序列表 |
| li |
list item |
列表項目 |
| dl |
definition list |
定義列表 |
| dt |
definition term |
定義術語 |
| dd |
definitiion description |
定義描述 |
| del |
deleted |
刪除 |
| ins |
inserted |
插入 |
| h1~h6 |
header 1 to header 6 |
標題1到標題6 |
| p |
paragraph |
段落 |
| hr |
horizontal rule |
水平尺 |
| a |
anchor |
錨 |
| abbr |
abbreviation |
縮寫詞 |
| acronym |
acronym |
取首字母的縮寫詞 |
| address |
address |
地址 |
| var |
variable |
變量 |
| pre |
preformatted |
預定義格式 |
| blockquote |
block quotation |
區塊引用語 |
| strong |
strong |
加重 |
| em |
emphasized |
加重 |
| b |
bold |
粗體 |
| i |
italic |
斜體 |
| big |
big |
變大 |
| small |
small |
變小 |
| sup |
superscripted |
上標 |
| sub |
subscripted |
下標 |
| br |
break |
換行 |
| center |
center |
居中 |
| font |
font |
字體 |
| u |
underlined |
下劃線 |
| s |
strikethrough |
刪除線 |
| fieldset |
fieldset |
城集 |
| legend |
legend |
圖標 |
| caption |
caption |
標題 |
其中,div和soan其實是沒有語義的,它們只是分別用作塊級元素和行內元素的區域分隔符。
如何確定你的標簽是否語義良好
判斷網頁標簽語義是否良好的一個簡單方法就是:
去掉樣式,看網頁結構是否組織良好有序,是否仍然有很好的可讀性。 語義良好的網頁去掉樣式后結構依然很清晰。
同樣的設計圖,不同的HTML標簽可以通過不同的CSS實現同樣的頁面,但語義不好的CSS布局和語義良好的CSS布局在去樣式后的表現卻可能截然不同。
如果選用的標簽幾乎全是不帶語義的,那么在去樣式后網頁中幾乎看不到任何結構信息,可讀性非常差;如果選用的都是語義適合的標簽,去樣式后網頁依然具有非常好的可讀性。
所以我們的開發過程中,不要拿到一個任務后就馬上開始寫代碼,在拿到設計稿后不要急于馬上進行開發,而是先根據頁面結構進行分析,先考慮好框架,適用的標簽等,會讓整個開發過程更有規劃、更順暢,是一個先慢后快的過程。反之就可能出現先快后慢的局面,越到后期開發速度越慢,反復修改bug、打補丁。