HTML5语义化标签

在HTML5中最基础也是比较好理解的也就是语义化标签了，，顾名思义语义化也就是可以直接读懂的标签~，这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋，跟同事对接项目也会节约很多时间~~ 谁不想简单轻松一些呢。。。

语义化标签有2种，一种是单纯语义化的，无功能，二种是语义化，且有功能的。

一：无功能，语义化标签

1.1 - <header></header>

SM:也就是我们的头部标签， 一般用于网站头部内容

1.2 <footer></footer>

SM:有头部肯定就有底部，一般用于网站底部（赶脚好废话呀~~）。

1.3 <nav></nav>

SM:导航标签，这个也比较好理解，平时我们用UL标签写导航的时候，UL里面一定是要包含li标签标签的，这样会有一定的局限性，<nav></nav>标签就不局限里面所房标签，可以是一群的a标签，也可以是一个a，一个p，你喜欢就好！

?
1.4 <hgroup></hgroup>

SM:标题组合，一般为页面的主要标题加描述

<hgroup>
　　<h2>我是标题</h2>
　　<h3>我是标题描述</h3>
</hgroup>

1.5 <section></section>

SM:一个板块或者一个区域内容，用于划分页面不同区域

1.6 <article></article>

SM:用来在页面中表示一套结构完整且独立的内容部分

1.6.1 <aslde></aside>

SM:主题的附属信息(用途很广，主要就是一个附属内容)，如果article里面为一篇文章的话，那么文章的作者以及信息内容就是这篇文章的附属内容了

1.7 <figure></figure>

SM:媒体元素，比如一些视频，图片啊等等

?
1.8 <time></time>

SM:专门为时间而出的标签，以往我们时间标签很多，比如span,i,b等等 time标签有个属性datetime="" //没实际功能，便于查找

二：有功能，语义化标签

2.1 <datalist></datalist>

SM:选项列表，与input元素配合使用，来定义input可能的值

?
　


当我在输入框中输入一个j的时候，里面相关的javascript就会显示出来~~

2.2 <details></details>

SM:用于描述文档或者文档某个部分的细节~ 默认属性为open~

ps:配合summary一起使用

?
　

//没有点击时候的页面显示


//点击之后的内容显示

2.3 <progress></progress>

SM:用于制作进度条，里面有2个属性，1：max 总的进度 2：value 现在的进度

?
　


　三：关于兼容

毫无疑问，H5标签肯定是有兼容问题的， 低版本的IE是不认识这些语义化标签的，一般有2种办法可以解决这个问题

NO.1

自己写javascript代码， 因为IE不认识这些标签，所以我们只需要在js中创建这些标签就好

?
这样我们就创建出来了一个header头部元素，现在我们就可以HTML和样式中写入这个标签

ps:因为创建出来的标签是没有任何默认属性的，所以我们要给创建出来的标签创建一个CSS属性display：block ;

NO.2

直接在外部引入一个js文件，引入方法跟我们平时引入插件的方式一样（这里就不再阐述）。。。。

来自<http://www.cnblogs.com/htzan/p/4516057.html>