一. 語義化標籤

1. 使用語義化標籤的原因/優點

根據內容的結構化使用語義化標籤，能夠使開發者更好的閱讀和理解以及瀏覽器爬蟲與搜尋引擎解析。

2. 新標籤

新block標籤：header,footer,main,aside,article,section,nav,hgroup （主要8個）。
新表單標籤，calendar、date、time、email、url、search 
媒介標籤： video 和 audio 
繪畫標籤： canvas 

3.詳細語義（相容性好的標籤）www

1. header:頁首（網頁（部分割槽域）的頭部 頂部 導航區域等等）;
2. footer:頁尾（網頁（部分割槽域）的底部|版權區域等等）;
3. section 標籤定義網頁中的區域（部分）；
4. article 內容是引用其他地方的；
5. aside 跟 article 是一起使用；是輔助 article 區域的內容;
6. nav 導航連結部分;
7. hgroup 給標題分組，不能就一個標題;
8. figure 對多個元素進行組合。通常與figcaption聯合使用;

4.新表單標籤

新增 date、time、email、url、search 等型別

5.video標籤

<video width="320" height="240" controls>
  <source src="movie.mp4"  type="video/mp4">
  <source src="movie.ogg"  type="video/ogg">
  您的瀏覽器不支援 HTML5 video 標籤。
</video>
 

• controls：設定或返回音訊/視訊是否顯示控制元件（比如播放/暫停等）
• autoplay：視訊在就緒後馬上播放
• muted：設定值後，，音訊會初始化為靜音
• poster：一個海波幀的url,用於用於在視訊或者調幀之前展示
• webkit-playsinline=”true” playsinline=”true” 視訊初始化播放是否全屏播放

注意: MP4要 h264格式才可以。否則沒有畫面。

二. 相容性

新標籤不相容 ie6/7/8

HTML5瀏覽器相容性解決方案

1：建立js+css

<header>
    <script>
        document.createElement('header');
        document.createElement('footer');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('main');
        document.createElement('section');
        document.createElement('nav');
        document.createElement('hgroup');
    <script>
    <style>
        header,footer,main.aside,article,section,nav,hgroup{
            display:block;
        }
    </style>
</header>
 

2：html5shiv

<!-- if lt IE 9 -->
	<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script> //或者下載下來
<!-- endif -->

3 : respond.js

作用：使ie9及以下相容@media與ie6相容max-width;

• 需要啟動本地伺服器（localhost），不能使用普通本地的url地址（file://開頭）；
• 需要外部引入CSS檔案，將CSS樣式書寫在style中是無效的；
• 由於respond外掛是查詢CSS檔案，再進行處理，所以respond檔案一定要放置在CSS檔案的後面
• 另外，雖然把respond放置在head裡還是在body後面都能夠實現，但是建議放置在head中；
• 最好不要為CSS設定utf-8的編碼，使用預設；

<!-- if lt IE 9 -->
	<script src="https://cdn.bootcss.com/response.js/0.10.0/response.js"></script>
	<!-- 或者下載下來 -->
<!-- endif -->