html5標籤

html5新增標籤

html5與html4的區別

1. 更簡單
2. 標籤的語義化
3. 語法更寬鬆
4. 多設備跨平臺

5. 自適應網頁設計

   html5標準化寫法：
   

主體結構標籤

• header
  表示頁面中一個內容區塊或者整個頁面的標題
• section
  描繪的是一個文檔或者程序裏的普通的section節（強調分塊）
• footer
  表示整個頁面或者頁面中的一個內容區塊的腳註
• nav
  nav元素是一個可以用作頁面導航的鏈接組
  一般用於幾個場合：
  1.傳統導航條 2.側邊導航條 3. 頁內導航 4.翻頁操作
• aside
  表示當前頁面或文章的附屬信息，可以包括當前頁面或者主要內容相關的引用、側邊欄、廣告、nav組等。
• article
  代表一個文檔內容的獨立片段，例如：博客條目或者報紙文章（強調獨立完整的內容）
• figure & figcaption
  表示一段獨立的流內容，表示文檔字體流內容中的一個獨立單元（一般用於視頻等）。figcaption爲figure元素添加標題
• hgroup
  頁面上的一個標題組合，多個標題可用hgroup包含起來，如：

<hgroup>
    <h1>1607</h1>
    <h2>廣州html5 1607班</h2>
</hgroup>

• main
  規定文檔的主要內容。
  元素中的內容對於文檔來說應當是唯一的。

非主體結構標籤

• menu
  1) 標籤定義命令的列表或菜單。
  2) 標籤用於上下文菜單、工具欄以及用於列出表單控件和命令。
  

• address
  標籤定義文檔作者或擁有者的聯繫信息

• datalist
  datalist提供一個事先定義好的列表，通過id與input的list屬性關聯，當在input內輸入時就會有自動完成（autocomplete）的功能，用戶將會看見一個下拉列表供其選擇。

<input type="url" list="url_list" name="link" />
<datalist id="url_list"> 
    <option label="W3School" value="http://www.W3School.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
//提示：option 元素永遠都要設置 value 屬性

• progress
  定義進度條

<progress max="100" value="76">
    <span>76</span>% 
</progress>

• output
• 表示不同類型的輸出，比如腳本的輸出
  `注：必須從屬於某個表單。
• mark
  高亮顯示文字，一個比較典型的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞。
• time
  標籤定義日期或時間，如果標籤內容不是時間或日期，則必須指定datetime屬性爲指定日期，如：

<time datatime="2017-3-7">女神節</time>