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