1. HTML語義化背景介紹
講到語義化，我們首先來聊聊html語義化的背景唠椭，HTML結(jié)構(gòu)語義化跳纳，是最近幾年才提出來的，以前的html結(jié)構(gòu)贪嫂，都是一堆沒有語義的冷冰冰的標(biāo)簽寺庄。最泛濫的就是div+css，以前的頁面力崇，一打開就是一堆div+css斗塘，為了改變這種這種狀況，開發(fā)者們和官方提出了讓HTML結(jié)構(gòu)語義化的概念亮靴，并且官方w3c馍盟，也在HTML5給出了幾個新的語義化的標(biāo)簽。
2. 知識剖析
什么是語義化茧吊，語義化之后文檔會有什么效果呢贞岭？
1.首先八毯，語義化，顧名思義瞄桨，就是你寫的HTML結(jié)構(gòu)话速，是用相對應(yīng)的有一定語義的英文字母（標(biāo)簽）表示的，標(biāo)記的芯侥，因為HTML本身就是標(biāo)記語言尿孔。不僅對自己來說，容易閱讀筹麸，書寫。別人看你的代碼和結(jié)構(gòu)也容易理解雏婶，甚至對一些不是做網(wǎng)頁開發(fā)的人來說物赶，也容易閱讀。那么留晚，我們以后再開發(fā)的過程中酵紫，一定要注意了，盡量使用官方的有語義的標(biāo)簽错维，不要再使用一堆無意義的標(biāo)簽去堆你的結(jié)構(gòu)奖地。
怎么知道，自己的頁面結(jié)構(gòu)是否語義化赋焕，那就要看你的HTML結(jié)構(gòu)参歹，在去掉CSS樣式表之后，是否隆判，依然能很好的呈現(xiàn)內(nèi)容的結(jié)構(gòu)犬庇，代碼結(jié)構(gòu)。也就是說侨嘀，脫掉css的外衣臭挽，依然頭是頭，腳是腳咬腕。赤裸裸的完整的一篇文檔欢峰。這也就是，語義化之后文檔的效果涨共。
2.其實語義化纽帖，也無非就是自己在使用標(biāo)簽的時候多使用有英文語義的標(biāo)簽，比如h標(biāo)簽举反，在HTML中就是就是用來定義標(biāo)題抛计，還有p標(biāo)簽，英文是paragraph段落照筑，table表格標(biāo)簽,等等吹截。
3. 常見問題
1．為什么要語義化?
2. 寫HTML代碼時瘦陈，應(yīng)注意什么？
4. 解決方案
1．為什么要語義化?
a. 為了在沒有CSS的情況下波俄，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)晨逝、代碼結(jié)構(gòu):為了裸奔時好看；
b. 用戶體驗：例如title懦铺、alt用于解釋名詞或解釋圖片信息的標(biāo)簽盡量填寫有含義的詞語捉貌、label標(biāo)簽的活用；
c. 有利于SEO：和搜索引擎建立良好溝通冬念，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重趁窃；
d. 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器急前、移動設(shè)備）以有意義的方式來渲染網(wǎng)頁醒陆；
e. 便于團(tuán)隊開發(fā)和維護(hù)，語義化更具可讀性裆针，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊都遵循這個標(biāo)準(zhǔn)刨摩，可以減少差異化。
2. 寫HTML代碼時世吨，應(yīng)注意什么澡刹？
1.? 盡可能少的使用無語義的標(biāo)簽div和span；
2.? 在語義不明顯時耘婚，既可以使用div或者p時罢浇，盡量用p, 因為p在默認(rèn)情況下有上下間距，對兼容特殊終端有利沐祷；
3.? 不要使用純樣式標(biāo)簽己莺，如：b、font戈轿、u等凌受，改用css設(shè)置。
4.? 需要強調(diào)的文本思杯，可以包含在strong或em標(biāo)簽中胜蛉，strong默認(rèn)樣式是加粗（不要用b），em是斜體（不要用i）色乾；
5.? 使用表格時誊册，標(biāo)題要用caption，表頭用thead暖璧，主體部分用tbody包圍案怯，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開澎办，表頭用th嘲碱，單元格用td金砍；
6.表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途麦锯；demo
7.每個input標(biāo)簽對應(yīng)的說明文本都需要使用label標(biāo)簽恕稠，并且通過為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來扶欣。
8.補充一點：不僅寫html結(jié)構(gòu)時鹅巍，要用語義化標(biāo)簽，給元素寫css類名時料祠，也要遵循語義化原則骆捧，不要，隨便起個名字就用髓绽，那樣等以后敛苇，再重構(gòu)時，非常難讀梧宫。最忌諱的是不會英文，用漢語拼音代替摆碉。別那么LOW 塘匣。
5．編碼實戰(zhàn)
6．?dāng)U展思考
HTML5新增了哪些語義化標(biāo)簽？
1巷帝、header元素
header元素代表“網(wǎng)頁“和”section”的頁眉忌卤。通常包含H1~H6元素或者h(yuǎn)group元素。作為整個頁面或者內(nèi)容塊的標(biāo)題楞泼，也可以包裹一節(jié)的目錄部分驰徊，一個搜索框，一個nav堕阔，或者任何相關(guān)logo棍厂。整個頁面沒有限制header元素的個數(shù)，可以擁有多個超陆，可以為每個內(nèi)容塊增加一個header元素
header使用注意：
?可以是“網(wǎng)頁”或任意“section”的頭部部分牺弹；
?沒有個數(shù)限制。
?如果hgroup或h1-h6自己就能工作的很好时呀，那就不要用header张漂。
2、footer元素
footer元素代表“網(wǎng)頁”或“section”的頁腳谨娜，通常含有該頁面的一些基本信息航攒，例如：文檔創(chuàng)作者的姓名、文檔的版權(quán)信息趴梢、使用條款的鏈接漠畜、聯(lián)系信息等等币他。。
footer使用注意：
?可以是“網(wǎng)頁”或任意“section”的底部部分盆驹；
?沒有個數(shù)限制圆丹，除了包裹的內(nèi)容不一樣，其他跟header類似躯喇。
3辫封、hgroup元素
hgroup元素代表“網(wǎng)頁”或“section”的標(biāo)題，當(dāng)元素有多個層級時廉丽，該元素可以將h1到h6元素放在其內(nèi)倦微，譬如文章的主標(biāo)題和副標(biāo)題的組合
hgroup使用注意：
?如果只需要一個h1-h6標(biāo)簽就不用hgroup
?如果有連續(xù)多個h1-h6標(biāo)簽就用hgroup
?如果有連續(xù)多個標(biāo)題和其他文章數(shù)據(jù)，h1-h6標(biāo)簽就用hgroup包住正压，和其他文章元數(shù)據(jù)一起放入header標(biāo)簽
4欣福、nav元素
nav元素代表頁面的導(dǎo)航鏈接區(qū)域。用于定義頁面的主要導(dǎo)航部分焦履。但是我在有些時候卻情不自禁的想用它拓劝，譬如：側(cè)邊欄上目錄，面包屑導(dǎo)航嘉裤，搜索樣式郑临，或者下一篇上一篇文章，但是事實上規(guī)范上說nav只能用在頁面主要導(dǎo)航部分上屑宠。頁腳區(qū)域中的鏈接列表厢洞，雖然指向不同網(wǎng)站的不同區(qū)域，譬如服務(wù)條款典奉，版權(quán)頁等躺翻，這些footer元素就能夠用了。
nav使用注意：
?用在整個頁面主要導(dǎo)航部分上卫玖，不合適就不要用nav元素公你；
5、aside元素
aside元素被包含在article元素中作為主要內(nèi)容的附屬信息部分假瞬，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的相關(guān)資料省店、標(biāo)簽、名詞解釋等笨触。（特殊的section）
在article元素之外使用作為頁面或站點全局的附屬信息部分懦傍。最典型的是側(cè)邊欄，其中的內(nèi)容可以是日志串連芦劣，其他組的導(dǎo)航粗俱，甚至廣告，這些內(nèi)容相關(guān)的頁面虚吟。
aside使用總結(jié)：
?aside在article內(nèi)表示主要內(nèi)容的附屬信息寸认，
?在article之外則可做側(cè)邊欄签财，沒有article與之對應(yīng)，最好不用偏塞。
?如果是廣告唱蒸，其他日志鏈接或者其他分類導(dǎo)航也可以用
6、article元素
article元素最容易跟section和div容易混淆灸叼，其實article代表一個在文檔神汹，頁面或者網(wǎng)站中自成一體的內(nèi)容，其目的是為了讓開發(fā)者獨立開發(fā)或重用古今。譬如論壇的帖子屁魏，博客上的文章，一篇用戶的評論捉腥，一個互動的widget小工具氓拼。（特殊的section）
除了它的內(nèi)容，article會有一個標(biāo)題（通常會在header里）抵碟，會有一個footer頁腳桃漾。
article使用注意：
?自身獨立的情況下：用article
?是相關(guān)內(nèi)容：用section
?沒有語義的：用div
另外，說一下拟逮，HTML5其他結(jié)構(gòu)元素標(biāo)簽
HTML5節(jié)元素標(biāo)簽包括body article nav aside section header footer hgroup 撬统，還有h1-h6和address。
?address代表區(qū)塊容器唱歧，必須是作為聯(lián)系信息出現(xiàn)宪摧，郵編地址粒竖、郵件地址等等,一般出現(xiàn)在footer颅崩。demo
?h1-h6因為hgroup，section和article的出現(xiàn)蕊苗，h1-h6定義也發(fā)生了變化沿后，允許一張頁面出現(xiàn)多個h1。
7.參考文獻(xiàn)
參考一：百度
8.更多討論
1.css的class怎么命名：
根據(jù)公司定義css命名規(guī)范朽砰，或則百度查找css命名規(guī)范文檔尖滚；
