最近在學(xué)習(xí)html知識(shí)，希望可以讓自己寫的html更語義化一些，從而讓自己的前端干的更專業(yè)一點(diǎn)，本文就記錄一下自己整理的一些知識(shí)。

標(biāo)簽種類

html標(biāo)簽一般可以分為如下幾類

• head里面的元信息類標(biāo)簽
• img、video之類的替換型媒體標(biāo)簽
• 語義類標(biāo)簽
  下面是我根據(jù)自己理解整理的一個(gè)關(guān)于html標(biāo)簽的思維導(dǎo)圖：
  
  html元素.png
  
  上圖中都是我感覺日常比較有可能用到的一些標(biāo)簽，其中頁面結(jié)構(gòu)類，是可以在頁面中表示一塊區(qū)域的標(biāo)簽。

常用的語義標(biāo)簽

語義類表示沒有什么特殊功能只是用來表示有特殊含義的標(biāo)簽，下邊列舉一些覺得有意思的語義標(biāo)簽。

ruby

ruby標(biāo)簽被用來展示東亞文字注音或字符注釋。

ruby標(biāo)簽實(shí)例

em標(biāo)簽

有些時(shí)候同樣的內(nèi)容在不同的語境下會(huì)有不同的意思，這個(gè)時(shí)候語義標(biāo)簽的作用就很大了

例如下今天我吃了一個(gè)蘋果 這句話放在不同上下文中就會(huì)表達(dá)不同的意思。

今天我吃了一個(gè)蘋果，昨天我吃了一個(gè)香蕉

和

今天我我吃了一個(gè)蘋果，昨天我吃了兩個(gè)蘋果

這兩種情況，第一個(gè)例子中強(qiáng)調(diào)的是吃的內(nèi)容，在第二個(gè)例子中強(qiáng)調(diào)的是吃的數(shù)量。

如何突出我們想表達(dá)的意思呢？em 標(biāo)簽就可以起到這個(gè)作用

今天我吃了一個(gè)<em>蘋果</em>，昨天我吃了一個(gè)<em>香蕉</em>

使用em標(biāo)簽包裹需要強(qiáng)調(diào)的內(nèi)容即可

em與strong的對(duì)比

很多人老是將em與strong混淆，其實(shí)兩個(gè)標(biāo)簽完全表達(dá)不同的意思，em與strong標(biāo)簽有如下幾個(gè)不同的地方：

• em 表示強(qiáng)調(diào)，strong 表示更強(qiáng)烈的強(qiáng)調(diào)。言簡意賅，表明了 em 和 strong 的命名來歷。并且在瀏覽器中，em 默認(rèn)用斜體表示，strong 用粗體表示，簡單說來就是strong強(qiáng)調(diào)的情緒更強(qiáng)烈

• em 用來局部強(qiáng)調(diào)，strong 則是全局強(qiáng)調(diào)。從視覺上考慮，em 的強(qiáng)調(diào)是有順序的，閱讀到某處時(shí)，才會(huì)注意到。strong 的強(qiáng)調(diào)則是一種隨意無順序的，看見某文時(shí)，立刻就凸顯出來的關(guān)鍵詞句。斜體和粗體剛好滿足了這兩種視覺效果，因此也就成了 em 和 strong 的默認(rèn)樣式。

• em 表示內(nèi)容的重點(diǎn)（stress emphasis），strong 表示強(qiáng)烈的重要性、嚴(yán)重性或內(nèi)容的緊迫性，簡單的說來就是em強(qiáng)調(diào)出重點(diǎn)，表達(dá)出這部分是這段內(nèi)容要表達(dá)的重點(diǎn)，strong用來提示這部分內(nèi)容有重點(diǎn)你要認(rèn)真看。

標(biāo)題

在html中h1-h6使用的話，其實(shí)按照文檔的結(jié)構(gòu)來說，是會(huì)形成層次結(jié)構(gòu)的，下邊用列子來表現(xiàn)一下。

如下一段簡單的代碼：

    <h1>食物</h1>
    <h2>蔬菜</h2>
    <h2>水果</h2>

如果用文檔來表現(xiàn)的話，是這樣的：

• 食物
  • 蔬菜
  • 水果

使用hgroup可以表明這段內(nèi)容表達(dá)的是一個(gè)標(biāo)題，只是表現(xiàn)標(biāo)題的不同部分，例子如下：

    <hgroup>
        <h1>食物</h1>
        <h2>蔬菜</h2>
    </hgroup>

表示出的文檔效果其實(shí)類似于如下這種：

• 食物-蔬菜

不過一般現(xiàn)在不需要這么麻煩，section 可以自動(dòng)讓標(biāo)題下降一級(jí)，例如，下邊這段代碼：

<section>
    <h1>食物</h1>
    <section>
        <h1>蔬菜</h1>
    </section>
    <section>
        <h1>水果</h1>
    </section>
</section>

通過section可以表現(xiàn)出下邊這種效果,和上邊用h1和h2一樣。

• 食物
  • 蔬菜
  • 水果

結(jié)構(gòu)元素

上邊說過，結(jié)構(gòu)元素是可以在頁面中表示一塊特殊區(qū)域的標(biāo)簽，下邊兩個(gè)是我覺得有必要特別收一下的標(biāo)簽。

• section 一般用來表示文章中的段落、章節(jié)等，一般配合article使用
• main main不能嵌套在article里邊，main一般表示為網(wǎng)站最重要的部分，一個(gè)網(wǎng)頁應(yīng)該保證只有一個(gè)main