一、使用语义标签作用

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>