title: HTML方面的知識積累

1.HTML語義化

2.HTML5新增屬性

3.HTML5API

HTML語義化

1. 什么是語義化

從搜索引擎來看，這個HTML元素有什么作用，扮演了什么角色，表達(dá)了什么意思；從開發(fā)者來看，就像看一篇文章，能更好地閱讀以及續(xù)寫下去。

2. 為什么需要語義化

• 優(yōu)雅地裸奔：在沒有CSS的情況下，頁面也能呈現(xiàn)基本的內(nèi)容結(jié)構(gòu)

• 用戶體驗(yàn)：如title，圖片的alt，當(dāng)發(fā)生意外時，可以表達(dá)出基本的含義

• 有利于SEO：搜索引擎根據(jù)語義標(biāo)簽確定上下文和關(guān)鍵字權(quán)重

• 方便其他設(shè)備解析：如屏幕閱讀器，盲人閱讀器，根據(jù)語義渲染網(wǎng)頁

• 有利于開發(fā)和維護(hù)：代碼可讀性更好，更容易維護(hù)，更適合CSS3

3. 需要注意的地方寫HTML代碼的時候

   • 少使用無語義的標(biāo)簽 div 和 span ；
   • 語義不明顯的時候，用 p 來替代 div ，p 在默認(rèn)情況下有上下間距，對兼容特殊終端有利 ；
   • 不使用純樣式標(biāo)簽，如 b , font, u ;
   • 需要強(qiáng)調(diào)的文本，用 strong 替代 b , em 替代 i , 不能用其更改樣式；
   • 表格，標(biāo)題要用 caption ,表頭用 thead ，主體用 tbody 包圍， 尾部用 tfoot 包住。表頭用 th ， 單元格用 td ;
   • 表單用 fieldset 標(biāo)簽包圍，用 legend 標(biāo)簽說明表單的用途;
   • br 僅僅用在 p 標(biāo)簽中對內(nèi)容換行，不能用來布局。
   • ul 如導(dǎo)航欄等具有列表性質(zhì)的組件應(yīng)當(dāng)用 ul 標(biāo)簽構(gòu)建。

4. HTML5新增的語義標(biāo)簽

   
   
   1559789985050.png

• header

  定義文檔或者文檔的部分區(qū)域的頁眉，應(yīng)作為介紹內(nèi)容或者導(dǎo)航鏈接欄的容器。在一個文檔中，您可以定義多個header 元素，但需要注意的是header元素不能作為address、footer 或header 元素的子元素。

• main

  定義文檔的主要內(nèi)容，該內(nèi)容在文檔中應(yīng)當(dāng)是獨(dú)一無二的，不包含任何在文檔中重復(fù)的內(nèi)容，比如側(cè)邊欄，導(dǎo)航欄鏈接，版權(quán)信息，網(wǎng)站logo，搜索框（除非搜索框作為文檔的主要功能。需要注意的是在一個文檔中不能出現(xiàn)多個main 標(biāo)簽

• footer

  定義最近一個章節(jié)內(nèi)容或者根節(jié)點(diǎn)元素的頁腳。一個頁腳通常包含該章節(jié)作者、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息。使用 footer 插入聯(lián)系信息時，應(yīng)在 footer 元素內(nèi)使用 address 元素。注意不能包含 footer 或者 header 。

• hgroup

  代表“網(wǎng)頁”或“section”的標(biāo)題，當(dāng)元素有多個層級時，該元素可以將h1到h6元素放在其內(nèi)，譬如文章的主標(biāo)題和副標(biāo)題的組合。由于該元素，h標(biāo)簽可重復(fù)出現(xiàn)。

• nav

  描述一個含有多個超鏈接的區(qū)域，該區(qū)域包含跳轉(zhuǎn)到其他頁面或頁面內(nèi)部其他部分的鏈接列表。在一個文檔中，可定義多個nav 元素

• aside

  元素表示一個和其余頁面內(nèi)容幾乎無關(guān)的部分，被認(rèn)為是獨(dú)立于該內(nèi)容的一部分且可以被單獨(dú)的拆分出來而不會影響整體。通常表現(xiàn)為側(cè)邊欄或嵌入內(nèi)容。

• section

  代表文檔中的“節(jié)”或“段”，“段”可以是指一篇文章里按照主題的分段；“節(jié)”可以是指一個頁面里的分組。section 通常還帶標(biāo)題，雖然 html5 中 section 會自動給標(biāo)題 h1-h6 降級，但是最好手動給他們降級。

• article

  代表一個在文檔，頁面或者網(wǎng)站中自成一體的內(nèi)容，其目的是為了讓開發(fā)者獨(dú)立開發(fā)或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評論，一個互動的widget小工具。（特殊的 section ）。

  除了它的內(nèi)容，article 會有一個標(biāo)題（通常會在 header 里），會有一個 footer 頁腳。

  如果在 article 內(nèi)部再嵌套 article ，那就代表內(nèi)嵌的 article 是與它外部的內(nèi)容有關(guān)聯(lián)的，如博客文章下面的評論。

  如果元素內(nèi)容可以分為幾個部分的話，應(yīng)該使用 article 而不是 section 。通俗來說就是 article 比 section 更具有獨(dú)立性、完整性?？赏ㄟ^該段內(nèi)容脫離了所在的語境，是否完整、獨(dú)立來判斷。

5. 具體語義化

   • 標(biāo)題語義化

     1. 一個頁面只能有一個 h1 標(biāo)簽，hgroup 可以打破這個規(guī)則
     2. h1 ~ h6 之間不要有斷層
     3. 不要用 h1 ~ h6 來定義樣式
     4. 不要用 div 來代替 h1 ~ h6

   • 圖片語義化

     1. alt 和 title 屬性
     • alt 用于圖片描述，面向搜索引擎，當(dāng)圖片無法加載顯示其屬性值。
     • title 用于圖片描述。面向用戶，鼠標(biāo)移動到圖片上顯示其屬性值。

     2. figure 和 figcaption 元素，實(shí)現(xiàn)圖片加圖注的效果

        <figure>
            <img src="../images/day2-01.png">
            <figcaption>元素構(gòu)成圖</figcaption>
        </figure>
        

   • 表格語義化

     標(biāo)簽	說明
     <table>	表格
     <caption>	標(biāo)題
     <thead>	表頭（語義劃分）
     <tboday>	表身（語義劃分）
     <tfoot>	表尾(語義劃分)
     <tr>	行
     <th>	表頭單元格
     <td>	單元格

   • 表單語義化

     1. label 標(biāo)簽
     • 將表單與說明文字關(guān)聯(lián) <label for="id">說明性文字</label>
     • 語義上綁定 lable 元素和表單元素
     • 點(diǎn)擊 lable 時，表單元素也獲得焦點(diǎn)
     2. fieldset 標(biāo)簽和 lengend 標(biāo)簽
     • filedset給表單元素分組
     • lengend 定義表單分組下的標(biāo)題

     <form>
     <filedset>
     <legend>個人信息<legend>
     <p>
     <label for="name">姓名：</label><input type=“text”>
     </p>
     <p>
     <label for="sex">性別：</label>
     <input type="radio" id="male" name=”sex“><label for="male">男</label>
     <input type="radio" id="female" name=”sex“><label for="female">女</label>
     </p>
     </filedset>   
     </form>