HTML裂明，超文本標(biāo)記語(yǔ)言，是語(yǔ)法較為松散的太援、不嚴(yán)格的Web語(yǔ)言闽晦；
XML，可擴(kuò)展標(biāo)記語(yǔ)言提岔，主要用于存儲(chǔ)數(shù)據(jù)和結(jié)構(gòu)參考仙蛉；
XHTML，可擴(kuò)展超文本標(biāo)記語(yǔ)言碱蒙，基于XML荠瘪，作用與HTML類似夯巷，但語(yǔ)法更嚴(yán)格參考。
怎樣理解 HTML 語(yǔ)義化
根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化）哀墓，選擇合適的標(biāo)簽（代碼語(yǔ)義化）便于開(kāi)發(fā)者閱讀和寫(xiě)出更優(yōu)雅的代碼的同時(shí)讓瀏覽器的爬蟲(chóng)和機(jī)器很好地解析。
怎樣理解內(nèi)容與樣式分離的原則
1篮绰、 前言
在學(xué)習(xí)html基礎(chǔ)的時(shí)候，往往需要建立原則性的認(rèn)識(shí)吠各。其中就不乏常被提起或面試常見(jiàn)題目：html語(yǔ)義化的理解以及何為內(nèi)容與樣式分離的原則。在查閱資料的過(guò)程中贾漏，我發(fā)現(xiàn)對(duì)這兩個(gè)問(wèn)題的理解候学，對(duì)于培養(yǎng)良好的編碼習(xí)慣和編碼思維是非常重要的。于是記錄于博客磕瓷，以作記憶念逞。
2、 問(wèn)題
1）翎承、怎樣理解 HTML 語(yǔ)義化
2）硕盹、怎樣理解內(nèi)容與樣式分離的原則
3、怎樣理解 HTML 語(yǔ)義化
1） 何為語(yǔ)義化
語(yǔ)義化的含義就是用正確的標(biāo)簽做正確的事情叨咖，HTML語(yǔ)義化是指根據(jù)內(nèi)容的結(jié)構(gòu)選擇合適的標(biāo)簽瘩例，也就是根據(jù)網(wǎng)頁(yè)內(nèi)容將代碼語(yǔ)義化甸各。
HTML標(biāo)簽語(yǔ)義化是Web網(wǎng)頁(yè)標(biāo)準(zhǔn)化的重要一環(huán)垛贤，也是標(biāo)準(zhǔn)制定時(shí)重要的設(shè)計(jì)原則趣倾。HTML5中新增加的很多標(biāo)簽（如：<article>、<nav>儒恋、<header>和<footer>等）就是基于這樣的設(shè)計(jì)原則。
2）檢驗(yàn)標(biāo)準(zhǔn)
瀏覽器會(huì)對(duì)語(yǔ)義化的標(biāo)簽設(shè)計(jì)默認(rèn)的樣式禀酱，所以驗(yàn)證頁(yè)面是否語(yǔ)義規(guī)范的一個(gè)簡(jiǎn)單方式就是去掉CSS樣式后頁(yè)面是否還能正常閱讀。
３）優(yōu)點(diǎn)
有利于搜索引擎以及爬蟲(chóng)工具等更容易讀懂頁(yè)面代碼剂跟。因?yàn)闄C(jī)器不會(huì)關(guān)注頁(yè)面實(shí)際渲染的外觀，爬蟲(chóng)是依賴于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重浩聋，只會(huì)關(guān)注頁(yè)面內(nèi)容本身，頁(yè)面渲染的漂亮與否對(duì)機(jī)器識(shí)別毫無(wú)幫助衣洁。
語(yǔ)義化的HTML在沒(méi)有CSS的情況下也能呈現(xiàn)較好的內(nèi)容結(jié)構(gòu)與代碼結(jié)構(gòu)。HTML標(biāo)簽是頁(yè)面內(nèi)容的載體坊夫，語(yǔ)義化的標(biāo)簽相對(duì)于是對(duì)所包含內(nèi)容的一個(gè)整體聲明，也使得頁(yè)面整體結(jié)構(gòu)清晰环凿。
便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)
便于開(kāi)發(fā)者閱讀和寫(xiě)出更優(yōu)雅的代碼。使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊羽杰，便于閱讀維護(hù)理解。
4）如何做到html語(yǔ)義化
A考赛、代碼中使用的標(biāo)簽<div>和<span>是在所有的HTML標(biāo)簽中最沒(méi)有語(yǔ)義的莉测。所以要做到標(biāo)簽語(yǔ)義化颜骤，首先要盡量少用<div>和<span>這兩個(gè)標(biāo)簽捣卤，在使用這兩個(gè)標(biāo)簽時(shí)盡量能找到更有語(yǔ)義的標(biāo)簽代替。
網(wǎng)頁(yè)的開(kāi)發(fā)者應(yīng)該熟悉所有規(guī)范的HTML標(biāo)簽的使用場(chǎng)景董朝，在合適的地方使用合適的標(biāo)簽鸠项。
例如子姜，標(biāo)簽Hx系列則表示標(biāo)題，在網(wǎng)頁(yè)中展示各層級(jí)的標(biāo)題時(shí)使用闲询；ul和ol標(biāo)簽表示列表，在展現(xiàn)各種數(shù)據(jù)列表或者菜單時(shí)使用扭弧；其它使用率較高的語(yǔ)義標(biāo)簽有：p、em鸽捻、strong泽腮、table衣赶、site、blockquote等府瞄，以及HTML5新加入的標(biāo)簽：<header><footer><article><section><nav><aside>等。
B遵馆、熟悉各標(biāo)簽規(guī)范的屬性，給HTML標(biāo)簽設(shè)置必要的屬性货邓。
和標(biāo)簽語(yǔ)義化的重要性一樣，某些屬性的設(shè)置也是HTML語(yǔ)義化重要的環(huán)節(jié)职辨。在很多規(guī)范中規(guī)定需要設(shè)置的兩個(gè)屬性是alt屬性和title屬性，這兩個(gè)屬性設(shè)置的也是為了提高HTML的語(yǔ)義舒裤。
在img標(biāo)簽中，alt是必須要設(shè)置的屬性惭每，因?yàn)閕mg是自閉合標(biāo)簽亏栈，并沒(méi)有包含可以解釋說(shuō)明圖片的額外信息。alt屬性的文字說(shuō)明是當(dāng)圖片在瀏覽器中未加載時(shí)的顯示的代替绒北；title屬性是可選屬性察署，當(dāng)標(biāo)簽包含的內(nèi)容不足以說(shuō)明語(yǔ)義時(shí)闷游，可以通過(guò)title添加額外的信息, 在瀏覽器中當(dāng)鼠標(biāo)移到元素上時(shí)會(huì)顯示提示文本贴汪。
還有一個(gè)重要的屬性是<label>標(biāo)簽中的for屬性。<label>標(biāo)簽是<input>元素定義的標(biāo)注扳埂。<label>標(biāo)簽的for屬性值指代一個(gè)表單元素，屬性值為此表單元素的id值阳懂。for屬性的作用不僅把<lable>標(biāo)簽上的觸發(fā)事件指向了for屬性指代的表單元素柜思，也從語(yǔ)義上綁定了<lable>和此表單元素巷燥。
<form>
<label for="user_name">User Name：</label>
<input type="text" name="user_name" id="user_name" />
</form>
4、怎樣理解內(nèi)容與樣式分離的原則
1）網(wǎng)頁(yè)分離
一個(gè)網(wǎng)頁(yè)分為三個(gè)部分：Html——結(jié)構(gòu)缰揪，css——表現(xiàn)，javascrip——行為邀跃。內(nèi)容也就是html，樣式也就是css途戒。所以內(nèi)容和樣式的分離，就是指在網(wǎng)頁(yè)編碼的過(guò)程中喷斋，要將html和css兩大部分分開(kāi)蒜茴。
2）如何實(shí)現(xiàn)
內(nèi)容與樣式分離的原則的實(shí)現(xiàn)星爪，一個(gè)是要依靠意識(shí)粉私，另一個(gè)是依靠經(jīng)驗(yàn)。
舉例而言诺核，面對(duì)一個(gè)分塊明顯的網(wǎng)頁(yè)設(shè)計(jì)圖時(shí)：
初級(jí)的開(kāi)發(fā)人員思路及制作方法：div 層層嵌套；
中級(jí)的開(kāi)發(fā)人員思路及制造方法：去掉多余的 div ,進(jìn)行簡(jiǎn)化漓摩；
高級(jí)的開(kāi)發(fā)人員思路及制造方法：最大化的簡(jiǎn)化 html 的結(jié)構(gòu)，然后用 css 進(jìn)行設(shè)置管毙，減少 html 與 css 的契合度桌硫。
正確做法是寫(xiě)HTML的時(shí)候先不管樣式夭咬，重點(diǎn)放在HTML的結(jié)構(gòu)和語(yǔ)義化上铆隘，讓HTML能提現(xiàn)頁(yè)面結(jié)構(gòu)或者內(nèi)容,，然后進(jìn)行 css 樣式設(shè)置咖驮，減少 HTML 與 CSS 契合度（即內(nèi)容與樣式分離） 训枢，寫(xiě)JS的時(shí)候忘巧，盡量不要用JS去直接操作樣式，而是通過(guò)給元素添加刪除class來(lái)控制樣式變化（即行為分離）砚嘴。
3）分離原則的優(yōu)點(diǎn)
瀏覽器加載網(wǎng)頁(yè)頁(yè)面速度變快。分離原則下际长，大部分頁(yè)面代碼寫(xiě)在了CSS當(dāng)中，頁(yè)面體積容量變得更小工育。
網(wǎng)頁(yè)修改設(shè)計(jì)時(shí)，效率嘱朽、省時(shí)。根據(jù)html標(biāo)簽內(nèi)ID或class的標(biāo)記搪泳，到CSS里找到相應(yīng)的ID或class扼脐，可以快速替換指定位置的樣式岸军，不會(huì)破壞頁(yè)面架構(gòu)和其他部分的樣式瓦侮。
典型的應(yīng)用就是網(wǎng)頁(yè)換膚，使用相同的 html 結(jié)構(gòu)猖毫，不同的 css 樣式台谍。
更好地被搜索引擎收錄〕萌铮基于內(nèi)容與樣式分離的原則，html的語(yǔ)義化就是首要考慮的,網(wǎng)頁(yè)中語(yǔ)義化的標(biāo)簽代碼就會(huì)更加適合搜索引擎是己。
css樣式的分離任柜，它可以根據(jù)不同的瀏覽器卒废，達(dá)到顯示效果的統(tǒng)一。保證網(wǎng)頁(yè)架構(gòu)不變形的前提下逆皮，放心在不同瀏覽器渲染顯示樣式。
參考：https://segmentfault.com/a/1190000005626375#articleHeader4http://www.cnblogs.com/lovefan/p/3855513.htmlhttp://www.imooc.com/video/242
本文章著作權(quán)歸饑人谷_huangyh_max和饑人谷所有电谣，轉(zhuǎn)載須說(shuō)明來(lái)源抹蚀！
