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