資訊專(zhuān)欄INFORMATION COLUMN
摘要：主要總結(jié)標(biāo)簽語(yǔ)義化方面的內(nèi)容。的標(biāo)簽都是有語(yǔ)義的。為什么要使用語(yǔ)義化標(biāo)簽由于很強(qiáng)大，無(wú)論有沒(méi)有按照語(yǔ)義選擇標(biāo)簽，都可以實(shí)現(xiàn)需要的設(shè)計(jì)。如何確定你的標(biāo)簽是否語(yǔ)義良好去掉樣式，看網(wǎng)頁(yè)結(jié)構(gòu)是否組織良好有序，是否仍然有良好的可讀性。
主要總結(jié)標(biāo)簽語(yǔ)義化方面的內(nèi)容。
HTML的標(biāo)簽都是有語(yǔ)義的。下面列出一些常見(jiàn)的標(biāo)簽及其語(yǔ)義：
完整標(biāo)簽列表及更多HTML5標(biāo)簽請(qǐng)參考：
http://www.w3school.com.cn/tags/index.asp
這里提一下，我們常用的列表相關(guān)的標(biāo)簽有ol, ul, dl. 那么什么時(shí)候用dl， 什么時(shí)候用ol ul 呢？
-- 對(duì)于重復(fù)的條目，如果打亂順序，不影響語(yǔ)義就是無(wú)序列表（ul）；否則就是有序列表(ol).
-- 如果內(nèi)部帶一個(gè)term, description的用dl.
比如圖片帶個(gè)文字說(shuō)明，圖片帶個(gè)問(wèn)題說(shuō)明....如此重復(fù)的采用dl比較好。
由于css 很強(qiáng)大，無(wú)論有沒(méi)有按照語(yǔ)義選擇標(biāo)簽，都可以實(shí)現(xiàn)需要的設(shè)計(jì)。但這也是把雙刃劍。事實(shí)上，css布局只是web標(biāo)準(zhǔn)的一部分。在html, css, js 三個(gè)元素中，hmtl才是最重要的，結(jié)構(gòu)是重點(diǎn)，樣式是用來(lái)修飾結(jié)構(gòu)的。
so, 正確的做法是：先確定html, 確定語(yǔ)義的標(biāo)簽，再選用合適的css。
此外，搜索引擎是看不到視覺(jué)結(jié)果的，它看到的只是代碼。它只能通過(guò)標(biāo)簽來(lái)判斷內(nèi)容的語(yǔ)義。如何確定你的標(biāo)簽是否語(yǔ)義良好?
-- 去掉樣式，看網(wǎng)頁(yè)結(jié)構(gòu)是否組織良好有序，是否仍然有良好的可讀性。
有個(gè)工具很好用，web-developer。瀏覽器可以安裝此插件，開(kāi)啟后，disable all styles 禁用css，可以幫助我們查看頁(yè)面結(jié)構(gòu)。
常見(jiàn)標(biāo)簽應(yīng)用場(chǎng)景 一、標(biāo)題和內(nèi)容有很多靜態(tài)頁(yè)面結(jié)構(gòu)是標(biāo)題+內(nèi)容的布局，例如：
在這里使用div + h2 + p 標(biāo)簽的方式要優(yōu)于全部使用div標(biāo)簽的方式。要記住，div span標(biāo)簽是用來(lái)輔助實(shí)現(xiàn)設(shè)計(jì)需求的。在寫(xiě)頁(yè)面的時(shí)候，首先選擇語(yǔ)義化的標(biāo)簽，然后配合css設(shè)計(jì)樣式來(lái)達(dá)到實(shí)現(xiàn)設(shè)計(jì)需求的目的。
二、表單很多場(chǎng)景涉及表單填寫(xiě)：
這里：使用label + input標(biāo)簽的方式要優(yōu)于 div + input的方式。
同時(shí)，表單域要用fieldset標(biāo)簽包起來(lái)，并用legend標(biāo)簽說(shuō)明表單的用途。（fieldset默認(rèn)有邊框，legend也有默認(rèn)樣式，我們可以設(shè)置fieldset border 為none , legend display 為none 來(lái)兼顧語(yǔ)義化和設(shè)計(jì)兩方面的需求）
此外，label 標(biāo)簽的for屬性應(yīng)該與input 標(biāo)簽的id關(guān)聯(lián)起來(lái)。
css布局日益流行，很多人患上了“table恐懼癥”，其實(shí)table也有自己的語(yǔ)義和用途，它在二維數(shù)據(jù)展現(xiàn)上是比較好的。
使用table時(shí)注意：表格標(biāo)題要用caption; 表頭要用thead, 主體用tbody， 尾部用tfoot. 表頭和一般單元格要分開(kāi)，分別用th, td.
四、語(yǔ)義化標(biāo)簽時(shí)應(yīng)注意的一些其他問(wèn)題盡可能少地使用無(wú)語(yǔ)義標(biāo)簽div 和span；
語(yǔ)義不明顯的既可以用p也可以用div的地方，盡量用p；
不要使用純樣式標(biāo)簽，如font, b， u等，改用css設(shè)置。語(yǔ)義上需要強(qiáng)調(diào)的文本可以使用em strong標(biāo)簽等。
加強(qiáng)“不可見(jiàn)”內(nèi)容的可訪問(wèn)性
背景圖上的文字應(yīng)該同時(shí)寫(xiě)在html中，并使用css使其不可見(jiàn)，有利于搜索引擎抓取你的內(nèi)容，也可以在css失效的情況下看到內(nèi)容。
[1].編寫(xiě)高質(zhì)量代碼-Web前端開(kāi)發(fā)修煉之道 -- 曹劉陽(yáng).
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50330.html
摘要：代碼示例語(yǔ)義化語(yǔ)義化語(yǔ)義化語(yǔ)義化語(yǔ)義化年月日小維語(yǔ)義化標(biāo)簽包括還有等。而沒(méi)有語(yǔ)義化的元素如則推薦使用。語(yǔ)義化包含了標(biāo)簽語(yǔ)義化和命名語(yǔ)義化。 什么是Web語(yǔ)義化 Web語(yǔ)義化是指使用恰當(dāng)語(yǔ)義的html標(biāo)簽、class類(lèi)名等內(nèi)容，讓頁(yè)面具有良好的結(jié)構(gòu)與含義，從而讓人和機(jī)器都能快速理解網(wǎng)頁(yè)內(nèi)容。語(yǔ)義化的web頁(yè)面一方面可以讓機(jī)器在更少的人類(lèi)干預(yù)情況下收集并研究網(wǎng)頁(yè)的信息，從而可以讀懂網(wǎng)頁(yè)的內(nèi)...
摘要：語(yǔ)義化的頁(yè)面一方面可以讓機(jī)器在更少的人類(lèi)干預(yù)情況下收集并研究網(wǎng)頁(yè)的信息，從而可以讀懂網(wǎng)頁(yè)的內(nèi)容，然后將收集匯總的信息進(jìn)行分析，結(jié)果為人類(lèi)所用另一方面它可以讓開(kāi)發(fā)人員讀懂結(jié)構(gòu)和用戶以及屏幕閱讀器如果訪客有視障能夠讀懂內(nèi)容。 我眼中的Web 語(yǔ)義化 web語(yǔ)義化是什么？ Web語(yǔ)義化，使用語(yǔ)義恰當(dāng)?shù)臉?biāo)簽，可以讓頁(yè)面具有良好的結(jié)構(gòu)，頁(yè)面元素具有良好的含義，從而讓人和機(jī)器都能快速理解。語(yǔ)義化的...
摘要：語(yǔ)義化的頁(yè)面一方面可以讓機(jī)器在更少的人類(lèi)干預(yù)情況下收集并研究網(wǎng)頁(yè)的信息，從而可以讀懂網(wǎng)頁(yè)的內(nèi)容，然后將收集匯總的信息進(jìn)行分析，結(jié)果為人類(lèi)所用另一方面它可以讓開(kāi)發(fā)人員讀懂結(jié)構(gòu)和用戶以及屏幕閱讀器如果訪客有視障能夠讀懂內(nèi)容。 我眼中的Web 語(yǔ)義化 web語(yǔ)義化是什么？ Web語(yǔ)義化，使用語(yǔ)義恰當(dāng)?shù)臉?biāo)簽，可以讓頁(yè)面具有良好的結(jié)構(gòu)，頁(yè)面元素具有良好的含義，從而讓人和機(jī)器都能快速理解。語(yǔ)義化的...
閱讀 2718·2021-11-25 09:43
閱讀 2099·2021-11-24 09:39
閱讀 1998·2021-11-17 09:33
閱讀 2770·2021-09-27 14:11
閱讀 1883·2019-08-30 15:54
閱讀 3239·2019-08-26 18:27
閱讀 1275·2019-08-23 18:00
閱讀 1825·2019-08-23 17:53
