一、使用語義標簽作用

1、使網頁容易修改及維護

2、搜索引擎優化

3、方便無障礙閱讀

二、布局類語義標簽

<header></header>：

作用：頁面頁眉，內容標題，相當于<div class=”header”></div>

<main></main>：

作用：頁面內容，相當于<div class=”main”></div>

<footer></footer>：

作用：頁面頁腳，內容尾部，相當于<div class=”footer”></div>

拓展：解決footer內容過多方案

1.固定定位：固定在窗口底部

2.關閉按鈕：隱藏頁腳

3.部分透明背景：

4.動畫：滑入視圖

<nav></nav>：

作用：表示主導航

<aside></aside>：

作用：側邊導航、附注欄、側邊欄

<section></section>：

作用：板塊，內容區塊

<article></article>：

作用：表示一片文章

<figure></figure>：

作用：插圖

<figcaption></figcaption>：

作用：插圖標記

三、文本類語義標簽

<time></time>：

作用：標注日期和時間

格式：YYYY-MM-DD HH:MM

例如：<time>2014-03-07</time>

<output></output>：

作用：javaScript根據ID找到<output>輸出其運行結果

<mark></mark>：

作用：凸顯一段文本

<em></em>：（斜體）

作用：代表語義、語氣加強

<strong></strong>：（粗體）

作用：強調文本重要性、緊急程度

<big></big>：

作用：文本放大顯示

<small></small>：

作用：文本縮小顯示

<cite></cite>：（斜體）

作用：插入文獻標題、作者、鏈接

<q></q>：（雙引號）

作用：引用文本、文字摘錄

四、語義標簽兼容性解決方案

方案一、設置語義標簽樣式（除IE8及以下）

如果瀏覽器無法識別標簽，會將其設置為display:inline，故可將語義標簽設置為display:block

方案二、引用谷歌的html5.js（用于IE8及以下）

對于IE8及以下方案一不適應，使用以下可以瀏覽器IE9及以上版本忽略次腳步

<!--[if it IE9]>

<script href=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>

<![endif]-->

方案三、使用Modernizr檢測

五、播放類語義標簽

<audio></audio>：

作用：音樂播放器

屬性：src（文件名）/controls（加載控件）/PReload（預加載）=”metadata/none”/loop（循環播放）/autoplay（自動播放）

<video></video>：

作用：視頻播放器

屬性：src（文件名）/controls（加載控件）/preload（預加載）=”metadata/none”/loop（循環播放）/autoplay（自動播放）/width/height/poster（preload=”none”或未找到文件或第一幀未加載完畢，設置視頻圖片）

<track></track>：

作用：添加字幕

例如：

<video>

<track src=”xxx.vtt”></track>

</video>

六、媒體播放兼容方案

由于各瀏覽器對各個媒體格式支持程度不同，但要保證能正常播放

方案一、設置多種格式源

<audio>

<source src=”xxx.mp3” type=”audio/mp3”>

<source src=”xxx.ogg” type=”audio/ogg”>

</audio>

方案二、添加Flash后備方案

<video width=”700” height=”400”>

<source src=”aa.mp4” type=”audio/mp4”>

<source src=”xxx.webm” type=”audio/webm”>

<object id=”xx” width=”700” height=”400” date=”xxx.swf” type=”application/x-shockwave-flash”>

<param name=”movie” value=”xxx.swf”>

<param name=”flashvars” value=’config{”clip”:”aa.mp4”}’>

</object>

<video>

拓展iPad或iPhone時，需要flash作為主方案，html5作為后備方案

<object id=”xx” width=”700” height=”400” date=”xxx.swf” type=”application/x-shockwave-flash”>

<param name=”movie” value=”xxx.swf”>

<param name=”flashvars” value=’config{”clip”:”aa.mp4”}’>

<video width=”700” height=”400”>

<source src=”aa.mp4” type=”audio/mp4”>

<source src=”xxx.webm” type=”audio/webm”>

<video>

</object>