H5新增语义化标签

关于HTML语义化

1、什么是HTML语义化？

通过标签可以判断内容的语义，例如，通过<h1>标签判断出内容是标题，通过<p>判断内容是段落、通过<input>标签是输入框等

2、语义化的好处

1、去掉样式或者样式丢失的时候，页面仍可以呈现清晰的结构；
2、方便其他设备解析（如移动设备，盲人阅读器，屏幕阅读器等），以语义的方式来渲染页面；
3、有利于SEO；
4、遵循w3c标准，便于开发和维护，可以减少差异化；

3、如何确定标签是否语义良好

去掉样式，看网页结构是否良好有序，是否仍然有很好的可读性；

4、语言化标签应注意的问题

1、在语义不明显时（既可以使用p时）尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
2、有语义的时候，尽量少用无语义的标签p和span；
3、不要使用纯样式标签，如：b、font、u等，改用css设置。
4、需要强调的文本，可以包含在strong或者em标签中，strong默认样式是加粗（不要用b），em是斜体（不用i）

H5新增的语言化标签

1、根据页面结构，由div派生的标签

hrader- 头标签

footer - 尾标签

nav - 导航

以前H4中，导航栏一直用ul-li标签来写，H5中可以直接用<nav>标签来写,eg：

<nav>
	<a href='#'>导航1</a>
	<a href='#'>导航2</a>
</nav>

hgroup - 标题组合（一个标题和一个子标题）

<hgroup>
	<h1>我是主标题</h1>
	<h2>我是子标题</h2>
</hgroup>

section - 划分页面的不同区域

article - 页面上一套结构完整且独立的内容部分

aside - 和主题相关的附属信息

2、媒体元素 组合< figure>和< fitcaption>

<figure>是父元素,用于图片的外层，其子元素，<figcaption>用来对内容进行说明

3、< time>标签 - 专门用来表示时间

4、< datalist>标签 - 定义选项列表

5、< details>标签 - 用来描述文档或文档某个部分的细节

6、 < address>标签 - 定义文章作者/拥有者的联系信息

7、< mark>标签 - 定义带有记号的文本

8、< keygen>标签 - 用于给表单添加公钥

9、< process>标签 - 定义进度条

H5标签的兼容性

IE6/7/8 不兼容H5标签，解决办法：

1、使用js动态创建标签：

<script>
	document.createElement('header');   //创建header标签
</script>

IE6 不识别header等h5标签，会认为其是自定义标签，而自定义标签是内联元素，所以需要在显示器中添加display:block;

2、 引入一个H5的文件

当h5标签较多时，使用方法1比较麻烦，可以引入一个H5文件

    <!--[if lt IE 9]>
    <script type="text/javascript" src="js/html5.min.js"></script>
    <![endif]-->