怎樣理解 HTML 語義化芬萍？
什么是HTML的語義，直觀的說就是HTML的含義搔啊，從HTML代碼本身就可以判斷包含內(nèi)容的作用柬祠。HTML標(biāo)簽語義化是Web網(wǎng)頁標(biāo)準(zhǔn)化的重要一環(huán)，也是標(biāo)準(zhǔn)制定時(shí)重要的設(shè)計(jì)原則负芋。HTML5中新增加的很多標(biāo)簽（如：<article>漫蛔、<nav>、<header>和<footer>等）就是基于這樣的設(shè)計(jì)原則旧蛾。頁面標(biāo)簽語義化的優(yōu)點(diǎn)明顯莽龟，標(biāo)簽語義化使得諸如搜索引擎以及第三方內(nèi)容抓取工具等更容易讀懂頁面代碼。機(jī)器不會關(guān)注頁面實(shí)際渲染的外觀锨天，只會關(guān)注頁面內(nèi)容本身毯盈，頁面渲染的漂亮與否對機(jī)器識別毫無幫助。那么具體什么樣的頁面設(shè)計(jì)才是語義化的頁面绍绘？瀏覽器會對語義化的標(biāo)簽設(shè)計(jì)默認(rèn)的樣式奶镶，所以驗(yàn)證頁面是否語義規(guī)范的一個(gè)簡單方式就是去掉CSS樣式后頁面是否還能正常閱讀迟赃。
語義化的優(yōu)點(diǎn)陪拘？
1、有利于搜索引擎以及爬蟲工具等更容易讀懂頁面代碼纤壁。因?yàn)闄C(jī)器不會關(guān)注頁面實(shí)際渲染的外觀左刽，爬蟲是依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重，只會關(guān)注頁面內(nèi)容本身酌媒，頁面渲染的漂亮與否對機(jī)器識別毫無幫助欠痴。
2迄靠、語義化的HTML在沒有CSS的情況下也能呈現(xiàn)較好的內(nèi)容結(jié)構(gòu)與代碼結(jié)構(gòu)。HTML標(biāo)簽是頁面內(nèi)容的載體喇辽，語義化的標(biāo)簽相對于是對所包含內(nèi)容的一個(gè)整體聲明掌挚，也使得頁面整體結(jié)構(gòu)清晰。
3菩咨、便于團(tuán)隊(duì)開發(fā)和維護(hù)
4吠式、便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼。使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊抽米，便于閱讀維護(hù)理解特占。
如何做到html語義化？
A云茸、代碼中使用的標(biāo)簽<div>和<span>是在所有的HTML標(biāo)簽中最沒有語義的是目。所以要做到標(biāo)簽語義化，首先要盡量少用<div>和<span>這兩個(gè)標(biāo)簽标捺，在使用這兩個(gè)標(biāo)簽時(shí)盡量能找到更有語義的標(biāo)簽代替懊纳。
網(wǎng)頁的開發(fā)者應(yīng)該熟悉所有規(guī)范的HTML標(biāo)簽的使用場景，在合適的地方使用合適的標(biāo)簽亡容。
例如长踊，標(biāo)簽Hx系列則表示標(biāo)題，在網(wǎng)頁中展示各層級的標(biāo)題時(shí)使用萍倡；ul和ol標(biāo)簽表示列表身弊，在展現(xiàn)各種數(shù)據(jù)列表或者菜單時(shí)使用；其它使用率較高的語義標(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)簽語義化的重要性一樣泄鹏，某些屬性的設(shè)置也是HTML語義化重要的環(huán)節(jié)。在很多規(guī)范中規(guī)定需要設(shè)置的兩個(gè)屬性是alt屬性和title屬性秧耗，這兩個(gè)屬性設(shè)置的也是為了提高HTML的語義备籽。
在img標(biāo)簽中，alt是必須要設(shè)置的屬性分井，因?yàn)閕mg是自閉合標(biāo)簽车猬，并沒有包含可以解釋說明圖片的額外信息霉猛。alt屬性的文字說明是當(dāng)圖片在瀏覽器中未加載時(shí)的顯示的代替；title屬性是可選屬性珠闰，當(dāng)標(biāo)簽包含的內(nèi)容不足以說明語義時(shí)惜浅，可以通過title添加額外的信息, 在瀏覽器中當(dāng)鼠標(biāo)移到元素上時(shí)會顯示提示文本。
還有一個(gè)重要的屬性是<label>標(biāo)簽中的for屬性伏嗜。<label>標(biāo)簽是<input>元素定義的標(biāo)注赡矢。<label>標(biāo)簽的for屬性值指代一個(gè)表單元素，屬性值為此表單元素的id值阅仔。for屬性的作用不僅把<lable>標(biāo)簽上的觸發(fā)事件指向了for屬性指代的表單元素吹散，也從語義上綁定了<lable>和此表單元素。
怎樣理解內(nèi)容與樣式分離的原則八酒？
1）網(wǎng)頁分離
一個(gè)網(wǎng)頁分為三個(gè)部分：Html——結(jié)構(gòu)空民，css——表現(xiàn)，javascrip——行為羞迷。內(nèi)容也就是html界轩，樣式也就是css。所以內(nèi)容和樣式的分離衔瓮，就是指在網(wǎng)頁編碼的過程中浊猾，要將html和css兩大部分分開。
2）如何實(shí)現(xiàn)
內(nèi)容與樣式分離的原則的實(shí)現(xiàn)热鞍，一個(gè)是要依靠意識葫慎，另一個(gè)是依靠經(jīng)驗(yàn)。
舉例而言薇宠，面對一個(gè)分塊明顯的網(wǎng)頁設(shè)計(jì)圖時(shí)：
初級的開發(fā)人員思路及制作方法：div 層層嵌套偷办；
中級的開發(fā)人員思路及制造方法：去掉多余的 div ,進(jìn)行簡化；
高級的開發(fā)人員思路及制造方法：最大化的簡化 html 的結(jié)構(gòu)澄港，然后用 css 進(jìn)行設(shè)置椒涯，減少 html 與 css 的契合度。
正確做法是寫HTML的時(shí)候先不管樣式回梧，重點(diǎn)放在HTML的結(jié)構(gòu)和語義化上废岂，讓HTML能提現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容,，然后進(jìn)行 css 樣式設(shè)置狱意，減少 HTML 與 CSS 契合度（即內(nèi)容與樣式分離） 湖苞，寫JS的時(shí)候，盡量不要用JS去直接操作樣式髓涯，而是通過給元素添加刪除class來控制樣式變化（即行為分離）袒啼。
3）分離原則的優(yōu)點(diǎn)
瀏覽器加載網(wǎng)頁頁面速度變快哈扮。分離原則下纬纪，大部分頁面代碼寫在了CSS當(dāng)中蚓再，頁面體積容量變得更小。
網(wǎng)頁修改設(shè)計(jì)時(shí)包各，效率摘仅、省時(shí)。根據(jù)html標(biāo)簽內(nèi)ID或class的標(biāo)記问畅，到CSS里找到相應(yīng)的ID或class娃属，可以快速替換指定位置的樣式，不會破壞頁面架構(gòu)和其他部分的樣式护姆。
典型的應(yīng)用就是網(wǎng)頁換膚矾端，使用相同的 html 結(jié)構(gòu)，不同的 css 樣式卵皂。
更好地被搜索引擎收錄秩铆。基于內(nèi)容與樣式分離的原則灯变，html的語義化就是首要考慮的,網(wǎng)頁中語義化的標(biāo)簽代碼就會更加適合搜索引擎殴玛。
css樣式的分離，它可以根據(jù)不同的瀏覽器添祸，達(dá)到顯示效果的統(tǒng)一滚粟。保證網(wǎng)頁架構(gòu)不變形的前提下，放心在不同瀏覽器渲染顯示樣式刃泌。
