## 前言 >可能你已經覺得自己熟悉并學會了使用大部分h5標簽，但是對于h5標簽你可能還是陌生的，或者不知道如何在一個正確的場景下使用。h5典型的語義化標簽有：header footer article section nav aside 。 ### h5特性 >1. 對瀏覽器進行了規范，統一的doc聲明 ， 保證一份文檔可以適用于任何版本，避免了不同瀏覽器對代碼的支持性差異。 >2. 文檔結構不明確，之前都是div布局，新增了許多結構標簽。為語義化提供了基礎。 >3. web應用強大，提供各樣的api支持 富web應用，比如畫布canvas,webgl,video,audio等。 ### 注意事項 1. 省略引號：當值不包括特殊值 比如單引號 雙引號 大于小于 空格等 引號可以省略。 2. 不寫表示true 的：checked ## h5標簽的分類 * html5新增的標簽一共有30個，為方便記憶，分為以下4類： 1. 文本控制：3個 `<bdi> <wbr> <mark>` 2. 結構標簽：6個 `<header> <nav> <article> <section> <aside> <footer>` 3. 組合使用：9個 `<figure><figcaption> <details><summary> <ruby><rt><rp> <dialog> <datalist>` 4. 定義內容：12個 `<audio> <video> <canvas> <command> <embed> <keygen> <meter> <output> <progress> <track> <source> <time>` ## h5標簽詳細說明： ###一　結構標簽 新增的結構元素： >１．header：整個頁面的標題 頁面中文章的標題部分 引導和導航作用 ==頁面或者內容區塊的標題 也可以是表格 搜索表單的頭 ２．nav:連接導航的部分 導航的容器 ==側邊欄導航==頁內導航 幾個組成部分的導航==翻頁操作 ３．article: 頁面中一塊與上下文不關的獨立內容 一篇文章 ；插件也可以 ==復雜特殊內容的section == ４．section :頁面中的一個內容區塊，表示文檔結構 ==內容進行分塊 最好是有標題的部分 ５．aside :主體內容之外的相關內容==附屬信息部分 ６．footer； 內容區塊的腳注 包含作者等底部信息 不限制使用一個 但是也不能過多 ###二　定義內容 >1. 音頻視頻　video audio embed >2. 畫布canvas >3. 組合使用： figure:一段獨立的流內容 figcaption 標題 datalist 可選的數據列表　　datagrid 可選數據列表 樹形的顯示 dl dt 術語列表 menu 菜單列表　 show close 顯示與隱藏的 >4. 其他，語義標簽 main：　網頁中的主要內容,每個頁面當中只能有一個 address 地址信息 文檔維護信息 電子郵箱 地址等 　 mark 突出顯示的元素 progress 進程 運行的程度 meter 度量衡 最大最小值 規定范圍內的數量值 value min max low high optimun time 日期或者時間 pubdate 發布日期 區分發布日期的 ruby 注釋 　rt 字符的解釋 　　 iframe 安全性增強 　　 command 命令 比如按鈕 　 details 細節 summary 頁面增強的元素 output 腳本的輸出 　　 source 媒介的源頭　 dialog 對話 默認隱藏的 ###三　其他 >wbr換行 等不常用。 filedset 用于定義自定義表單 尤其數據區域 legend 用于定義標題