第2章 語義化

2.1 語義化簡介

• HTML的精髓在于標(biāo)簽的語義。大部分標(biāo)簽都有它自身的語義固蛾，比如<p>標(biāo)簽败砂，表示paragraph，一個段落魏铅；<h1>，表示header level 1坚芜，一級標(biāo)題览芳。
• 前端的三大核心技術(shù)HTML、CSS和JavaScript鸿竖，HTML編寫網(wǎng)頁的結(jié)構(gòu)沧竟、CSS處理網(wǎng)頁的外觀、JavaScript控制網(wǎng)頁的行為缚忧。其實HTML才是最基礎(chǔ)也是最重要的悟泵，好比蓋房子，房子裝飾得再漂亮闪水，如果根基不穩(wěn)糕非，也容易倒塌。
• 編寫語義良好的頁面極其重要球榆，不但有利開發(fā)調(diào)試和后期維護朽肥，也更利于搜索引擎優(yōu)化。

2.2 標(biāo)題語義化

• 標(biāo)題標(biāo)簽（h1~h6）在搜索引擎優(yōu)化(SEO)中占有非常重要的地位持钉，其中<h1>權(quán)重最高衡招，<h6>權(quán)重最低。
• 關(guān)于標(biāo)題h1~h6的語義化：
  • 一個頁面只有一個<h1>標(biāo)簽 ：好比一篇文章只有一個主標(biāo)題每强，<h1>表示頁面中最高層級的標(biāo)題始腾，搜索引擎會賦予<h1>標(biāo)簽最高權(quán)重州刽。如果一個頁面出現(xiàn)多個<h1>標(biāo)簽，可能會被判以作弊浪箭；
  • h1~h6之間不要出現(xiàn)斷層：雖然穗椅，我們通常只用到標(biāo)題h1~h4，而不需要把6個標(biāo)簽全都用上山林，但標(biāo)題的順序應(yīng)該是不應(yīng)該出現(xiàn)斷層的房待，比如“h1、h3驼抹、h4”而漏掉“h2”桑孩；
  • 結(jié)構(gòu)和樣式相分離：
    1. 不要因為外觀樣式而濫用h1~h6標(biāo)簽：比如一個頁面中，為了調(diào)整文本字體大小或者加粗字體而使用標(biāo)題標(biāo)簽框冀；
    2. 也不要用DIV來替代頁面的標(biāo)題

2.3 圖片語義化

• 如何更語義化的定義<img>標(biāo)簽流椒？

alt和title屬性：

<img src='' alt='給搜索引擎的圖片描述' title='給用戶看的圖片描述'>

• alt和title屬性都表示圖片的描述。
• 其中alt的描述文字是給搜索引擎看的并且當(dāng)圖片掛掉時明也，會顯示alt屬性值的文字宣虾；
• title是給用戶看的，當(dāng)鼠標(biāo)懸停在圖片上時温数，則顯示title中的內(nèi)容绣硝；
• 所以我們應(yīng)該注意，alt是必填屬性撑刺，鹉胖，在SEO中有一定權(quán)重；而title是選填屬性够傍，可加可不加甫菠。

<figure>和<ficaption>標(biāo)簽：

<figure>
    <img src="" alt="">
    <figcaption>圖注描述</figcaption>
</figure>

• <figure>元素代表一段獨立的內(nèi)容，經(jīng)常和<figcaption>配合使用冕屯。這種組合標(biāo)簽表示在頁面中引用圖片寂诱、插圖、表格安聘、代碼段等痰洒，比如可以實現(xiàn)“圖片 + 圖注”的效果。

2.4 表格語義化

• 要做好表格的語義化浴韭，首先要注意<table>標(biāo)簽應(yīng)該用來展示表格形式的數(shù)據(jù)带迟，而不是用作頁面布局。

• 標(biāo)簽	說明
  table	表格
  caption	表格標(biāo)題
  thead	語義劃分表格的表頭
  tbody	語義劃分表格的表身
  tfoot	語義劃分表格的表尾
  tr	行
  th	表頭單元格
  td	表格單元格

  另外可以配合使用th囱桨、tbody等表格標(biāo)簽仓犬，使得表格語義更良好，結(jié)構(gòu)更清晰：

• 實例：

<table>
    <caption>三年二班成績表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>語文</th>
            <th>數(shù)學(xué)</th>
            <th>英語</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>周杰倫</td>
            <td>80</td>
            <td>80</td>
            <td>80</td>
        </tr>
        <tr>
            <td>韓紅</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <tr>
            <td>張杰</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>平均分</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
    </tfoot>
</table>

2.5 表單語義化

<label>標(biāo)簽的for屬性

<div>
    <label for="userName">用戶名:</label>
    <input type="text" id="userName" name="userName">
</div>

• 根據(jù)W3C規(guī)范的定義舍肠，<label>標(biāo)簽是描述輸入控件的說明文字搀继。
• 其中<label>標(biāo)簽的for屬性值窘面，應(yīng)該填入所關(guān)聯(lián)的表單元素控件的id。for屬性的作用叽躯，一是增強了語義财边；二是增強操作便捷性，使得鼠標(biāo)點擊范圍擴大至<label>元素上点骑。

<fieldset>和<legend>標(biāo)簽

<fieldset disabled="disabled">
    <legend>補充信息</legend>
    <div>
        <label for="job">職稱：</label>
        <input type="text" id="job" name="job">
    </div>
    <div>
        <label for="address">地址：</label>
        <input type="text" id="address" name="address">
    </div>
</fieldset>

• <fieldset>和<legend>標(biāo)簽用于為表單元素進行分組酣难。
• 分組除了可以增強表單的語義，也可以通過<fieldset>元素的disabled屬性來禁用分組內(nèi)的元素黑滴。

2.6 其他語義化

不要濫用<br/>換行標(biāo)簽

<p>
    <p>深圳市</p><br/>
    <p>南山區(qū)</p><br/>
    <p>深南大道1101號</p>
</p>

• 根據(jù)W3C規(guī)定憨募，<br/>標(biāo)簽僅用于段落中的換行，也就是說袁辈，<br/>標(biāo)簽只應(yīng)該出現(xiàn)在<p>標(biāo)簽之中菜谣。 而通過<br/>標(biāo)簽進行頁面的換行，甚至通過多個<br/>標(biāo)簽來調(diào)整元素之間的間距是不符合HTML語義化的晚缩。

使用<ul>無序列表標(biāo)簽

<ul>
    <li>
        <span class="point hot"></span>
        走上窮兵黷武尾膊，臺灣恐難承受
    </li>
    <li>
        <span class="point"></span>
        新版歷史教科書刪去文革
    </li>
    <li>
        <span class="point"></span>
        2040年日本獨居家庭將達四成
    </li>
</ul>

• 對于列表型的數(shù)據(jù)，比如菜單荞彼、新聞列表等冈敛，建議使用<ul>無序列表或者<ol>有序列表，而不是div來實現(xiàn)鸣皂。

由于有序列表標(biāo)簽前的數(shù)字外觀是固定的莺债，所以大多數(shù)情況都是使用無序列表。

使用<strong>和<em>標(biāo)簽

<strong>文本加粗</strong>
<em>文本傾斜</em>

• 在表現(xiàn)上签夭，<strong>標(biāo)簽是加粗的文本，<em>標(biāo)簽是斜體文本椎侠。
• 而在W3C規(guī)定中第租，<strong>和<em>標(biāo)簽的文本被視為關(guān)鍵字，搜索引擎也賦予了一定的權(quán)重我纪。
• 基于結(jié)構(gòu)和樣式分離的原則慎宾，通常我們做法是：先通過CSS reset去除<strong>和<em>標(biāo)簽的默認樣式，然后只為頁面中的重要文本加<strong>和<em>標(biāo)簽浅悉。
• <strong>和<em>標(biāo)簽的區(qū)別：
  • <em>表示emphasis(強調(diào))趟据，比如“我<em>喜歡</em>胡蘿卜”和“我喜歡<em>胡蘿卜</em>”強調(diào)的東西就不一樣；
  • <strong>表示strong importance for its contents(十分重要的內(nèi)容)术健，單獨對某個句子增加其重要性汹碱，比如“<strong>警告！該鏈接不安全 荞估，是否繼續(xù)訪問咳促？</strong>”

使用<del>和<ins>標(biāo)簽

<div>
    <p>越南進口火龍果</p>
    <p>
        <del>原價：￥36.90/kg</del>
    </p>
    <p>
        <ins>現(xiàn)在僅售：￥30/kg</ins>
    </p>
</div>

• <del>和<ins>標(biāo)簽配合使用稚新，可以實現(xiàn)商品原價和優(yōu)惠價的HTML結(jié)構(gòu)。
• <del>標(biāo)簽表示“delete”跪腹，用于定義被刪除的文本褂删；<ins>標(biāo)簽表示“insert”，用于定義被更新的文本冲茸。

頁面顯示圖片該用<img>標(biāo)簽還是CSS的background-img

• 在頁面上顯示一張圖片屯阀，可以用HTML的方式（<img>標(biāo)簽），也可以用CSS的方式（樣式背景圖片background-img:(url)）轴术，那什么情況該采用具體哪種方式呢难衰？
• 答案是根據(jù)HTML語義來做判斷，如果圖片是作為HTML文檔的一部分膳音，并且希望搜索引擎能識別時召衔，就該使用HTML的方式；而如果圖片僅僅是起到修飾作用祭陷，被不被搜索引擎識別也無所謂的情況下苍凛，就該使用CSS的方式。

2.7 語義化驗證

• 判斷HTML的語義是否良好的最簡單方式兵志，就是禁用CSS樣式醇蝴，檢查頁面是否仍然具備很好的可讀性。一個語義良好的頁面想罕，在“CSS裸奔”之后悠栓，可讀性也非常高。

2.8 HTML5舍棄的標(biāo)簽

• HTML5新增了一些標(biāo)簽按价，同時也舍棄了一些標(biāo)簽惭适。
• 舍棄的標(biāo)簽主要有兩大類：
  • 僅僅為了定義樣式，而沒有任何語義的標(biāo)簽楼镐。比如<s>癞志、<font>、<center>等框产；
  • 很少使用或已經(jīng)被新標(biāo)簽替代的凄杯。比如<frame>、<dir>等秉宿；