摘要：什么是語義化說語義化就要先說說到底負(fù)責(zé)的什么下面摘自維基百科超文本標(biāo)記語言英語，簡稱是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。常用的一些語義化標(biāo)簽，作為標(biāo)題使用，并且依據(jù)重要性遞減，是最高的等級(jí)。

說HTML語義化就要先說說HTML到底負(fù)責(zé)的什么？下面摘自維基百科：

超文本標(biāo)記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。
HTML元素是構(gòu)建網(wǎng)站的基石。HTML允許嵌入圖像與對(duì)象，并且可以用于創(chuàng)建交互式表單，它被用來結(jié)構(gòu)化信息——例如標(biāo)題、段落和列表等等，也可用來在一定程度上描述文檔的外觀和語義。
關(guān)于對(duì)于語義化的理解顧軼靈：如何理解 Web 語義化？這里講的很清楚了我就簡單說一下我的理解：
通俗的來講就是從代碼上來展示頁面的結(jié)構(gòu)，而不是從最終視覺上來展示結(jié)構(gòu)。單純的HTML代碼是不帶任何樣式的只是用來標(biāo)記這一段是標(biāo)題、這一塊是代碼、那一個(gè)是要強(qiáng)調(diào)的內(nèi)容等等，但是為什么我們只寫HTML在瀏覽器中不同的標(biāo)簽也是有不同的樣式呢？那是因?yàn)楦鱾€(gè)瀏覽器都自帶的有相應(yīng)標(biāo)簽的默認(rèn)樣式，為了方便在沒有設(shè)定樣式的情況下友好的展示頁面。
良好的語義化代碼可以直接從代碼上就能看出來那一塊到底是要表達(dá)什么內(nèi)容。

為什么要使用語義化標(biāo)簽？我用DIV+CSS也能做出來一樣的效果，確實(shí)單純看效果兩者并沒有什么區(qū)別，但是頁面不止是給人看的，機(jī)器也要看爬蟲也要看。
網(wǎng)頁結(jié)構(gòu)更清晰方便開發(fā)維護(hù)：

另外，在網(wǎng)絡(luò)或其他原因頁面樣式文件丟失的時(shí)候，滿是div組成的頁面和良好語義結(jié)構(gòu)組成的頁面那個(gè)對(duì)用戶更友好？

標(biāo)簽語義化有助于構(gòu)架良好的HTML結(jié)構(gòu)，有利于搜索引擎的建立索引、抓取。簡單來說，試想在H1標(biāo)簽中匹配到的關(guān)鍵詞和在div中匹配到的關(guān)鍵詞搜索引擎會(huì)吧那個(gè)結(jié)果放在前面。

有利于不同設(shè)備的解析（屏幕閱讀器，盲人閱讀器等）滿是div的頁面這些設(shè)備如何區(qū)分那些是主要內(nèi)容優(yōu)先閱讀？

有利于構(gòu)建清晰的機(jī)構(gòu)，有利于團(tuán)隊(duì)的開發(fā)、維護(hù)。

看一下大廠的操作，打開淘寶的頁面查看它首頁的源碼發(fā)現(xiàn)，全局只有一個(gè)h1標(biāo)簽就是他的LOGO。

再往下看主題分欄的標(biāo)題是h2

再往下看，分欄都是用的h3標(biāo)簽，并且內(nèi)部使用了一個(gè)隱藏的專門強(qiáng)調(diào)處理。

盡管這些東西都是用div+css就能搞出來的，但是它還是專門使用了相應(yīng)的語義化標(biāo)簽來強(qiáng)調(diào)作用。

盡可能少的使用無語義的標(biāo)簽div和span；在語義不明顯時(shí)，既可以使用div或者p時(shí)，盡量用p, 因?yàn)閜在默認(rèn)情況下有上下間距，對(duì)兼容特殊終端有利；

不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置。需要強(qiáng)調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）；

使用表格時(shí)，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；

表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途；每個(gè)input標(biāo)簽對(duì)應(yīng)的說明文本都需要使用label標(biāo)簽，并且通過為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對(duì)應(yīng)的input關(guān)聯(lián)起來。

~

，作為標(biāo)題使用，并且依據(jù)重要性遞減，

是最高的等級(jí)。

段落標(biāo)記，知道了

作為段落，你就不會(huì)再使用
來換行了，而且不需要
來區(qū)分段落與段落。

中的文字會(huì)自動(dòng)換行，而且換行的效果優(yōu)于
。段落與段落之間的空隙也可以利用 CSS 來控制，很容易而且清晰的區(qū)分出段落與段落。

、
、
1. ，
   無序列表，這個(gè)被大家廣泛的使用，
   有序列表不常用。在 Web 標(biāo)準(zhǔn)化過程中，
   還被更多的用于導(dǎo)航條，本來導(dǎo)航條就是個(gè)列表，這樣做是完全正確的，而且當(dāng)你的瀏覽器不支持 CSS 的時(shí)候，導(dǎo)航鏈接仍然很好使，只是美觀方面差了一點(diǎn)而已。

   、

   、

   ，

   就是“定義列表”。比如說詞典里面的詞的解釋、定義就可以用這種列表。dl不多帶帶使用，它通常與dt和dd一起使用。dl開啟一個(gè)定義列表，dt表示要定義的項(xiàng)目名稱，dd表示對(duì)dt的項(xiàng)目的描述。

   、， 是用作強(qiáng)調(diào)， 是用作重點(diǎn)強(qiáng)調(diào)。

   、、、

   ， 就是用來做表格不要用來布局

   HTML5新增的那些

   HTML5標(biāo)準(zhǔn)更加的講究語義化了，借用一張網(wǎng)上的圖來說明這些新標(biāo)簽

   header元素：header 元素代表“網(wǎng)頁”或“section”的頁眉。

   footer元素：footer元素代表“網(wǎng)頁”或“section”的頁腳，通常含有該節(jié)的一些基本信息，譬如：作者，相關(guān)文檔鏈接，版權(quán)資料。

   hgroup元素：

   nav元素：nav元素代表頁面的導(dǎo)航鏈接區(qū)域。用于定義頁面的主要導(dǎo)航部分。

   aside元素：aside元素被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的相關(guān)資料、標(biāo)簽、名次解釋等。（特殊的section）

   section元素：section元素代表文檔中的“節(jié)”或“段”，“段”可以是指一篇文章里按照主題的分段；“節(jié)”可以是指一個(gè)頁面里的分組。section通常還帶標(biāo)題，雖然html5中section會(huì)自動(dòng)給標(biāo)題h1-h6降級(jí)，但是最好手動(dòng)給他們降級(jí)。

   article元素：article元素最容易跟section和div容易混淆，其實(shí)article代表一個(gè)在文檔，頁面或者網(wǎng)站中自成一體的內(nèi)容，其目的是為了讓開發(fā)者獨(dú)立開發(fā)或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評(píng)論，一個(gè)互動(dòng)的widget小工具。（特殊的section）除了它的內(nèi)容，article會(huì)有一個(gè)標(biāo)題（通常會(huì)在header里），會(huì)有一個(gè)footer頁腳。

   推薦看原博主的博客：傳送門

   參考鏈接

   https://www.zhihu.com/question/20583492/answer/260535796

   https://www.zhihu.com/question/20455165

   https://www.zhihu.com/question/20583492

   https://www.cnblogs.com/freeyiyi1993/p/3615179.html

   http://www.html5jscss.com/html5-semantics-section.html

   https://segmentfault.com/a/1190000004179484

   GPU云服務(wù)器 云服務(wù)器 語義理解 對(duì)oc語言理解 對(duì)python的理解 談?wù)剬?duì)php的理解

   文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

   轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/52240.html

   • 上一篇：頁面div居中定位
   • 下一篇：真正解決iframe高度自適應(yīng)問題

   相關(guān)文章

   • 如何理解語義(semantic)化？

     摘要：邏輯學(xué)的語義學(xué)著眼點(diǎn)在于邏輯系統(tǒng)的語義解釋，是一個(gè)理想化的模型系統(tǒng)，不直接涉及自然語言。例如，通過幫助臨床研究中的決策，語義技術(shù)將跨機(jī)構(gòu)橋接多種形式的生物和醫(yī)學(xué)信息。 showImg(https://segmentfault.com/img/bVbrJYw?w=758&h=420); 前端工程師的招聘中，經(jīng)常有這樣的要求：對(duì)Web 語義化有深刻理解。那么到底什么才是深刻理解Web語義化...

     CarlBenjamin 2019-08-23 17:05 評(píng)論0 收藏0

   • 每日前端進(jìn)階第三題：說一說你對(duì)HTML5語義化的理解

     摘要：作者陳大魚頭鏈接背景最近高級(jí)前端工程師劉小夕在上開了個(gè)每個(gè)工作日布一個(gè)前端相關(guān)題的，懷著學(xué)習(xí)的心態(tài)我也參與其中，以下為我的回答，如果有不對(duì)的地方，非常歡迎各位指出。如果你采用正宗川菜做法，最后只需加入花生米，炒拌幾下就可以起鍋了。 作者：陳大魚頭 github： KRISACHAN 鏈接：github.com/YvetteLau/S… 背景：最近高級(jí)前端工程師 劉小夕 在 github 上...

     番茄西紅柿 2019-05-23 15:55 評(píng)論0 收藏0

   發(fā)表評(píng)論

   登陸后可評(píng)論

   0條評(píng)論

   huayeluoliuhen

   男|高級(jí)講師

   我要關(guān)注 我要私信

   TA的文章

   閱讀更多

   • DediPath秋季促銷：洛杉磯VPS/Hybrid Servers全部4折,美國vps主機(jī)最低每月

     閱讀 2634·2021-09-30 10:00

   • Megalayer：雙節(jié)大促,美國/香港/菲律賓VPS全場5折起;特價(jià)vps套餐年付低至159元

     閱讀 3556·2021-09-22 10:54

   • 2020年-2021年9月跑路IDC商家名單及黑名單IDC榜單!

     閱讀 6622·2021-09-07 10:28

   • iconfont 介紹

     閱讀 3055·2019-08-29 13:53

   • 移動(dòng)端響應(yīng)式

     閱讀 801·2019-08-29 12:42

   • babel在提升前端效率的實(shí)踐

     閱讀 1033·2019-08-26 13:51

   • 每日 30 秒 ? 對(duì)數(shù)組項(xiàng)目進(jìn)行統(tǒng)計(jì)

     閱讀 1323·2019-08-26 13:32

   • 可以加一些復(fù)雜樣式的數(shù)字動(dòng)畫

     閱讀 3084·2019-08-26 10:39

   最新活動(dòng)

   閱讀需要支付1元查看

   支付并查看

   、	、

   <style id="1rjvc"></style>