一、H5语义化标签

H5语义化标签

HTML5语义化标签（在这里值得一提的是，HTML5的标签其实呢和div没什么区别，也就是说没有特殊的功能，唯一的区别就是语义化，不同的标签有不同的含义）

header： 头部标签 不仅仅是网页的头部，还可以是一个模块的头部

section: 话说和div没有任何区别，也就是语义化也是差不多的，语义化的意思就是，区块，用来包裹某个模块

nav: 通常用于导航栏

article: 通常用于，文章的引入，比如说论坛或者博客，反正就是用来装文章

figure: 通常用于描述图片的，和定义列表有点像，用来定义figure的标题,放在figure的子元素第一个或者最后一个,figcaption和img可以换位置

footer: 描述网页或一个模块的底部

特殊标签

ruby: 注释标签 行级元素 横排显示 试图写多个汉字和注释，需要多个ruby
mark: 重点标记，以灰常黄的黄色标记
meter: 类似与进度条有一下属性
min:类进度条的最小值
max： 最大值
value：实际的值
low: 评判标准，低于low是什么颜色显示（残血了）
optimum：状态良好（可以开团，状态良好）
high: 状态完美（开炮！开炮！开炮！）也就是说，在low和high之间都是绿了，在low一下或者high以上就黄了
progress: 正宗的进度条 在谷歌里面是天蓝色加载界面，在火狐里面是绿色的背景，然后有一束光的进度条
details: 和我们的dl定义列表类似，也和我们的下拉列表类似，但是，显示的方式不一样用于描述细节 summary标题（要描述的对象） 后面接上你要描述的内容

示例

<section class="ruby">
            <ruby>龙<rt>long</rt></ruby>
            <ruby>的<rt>de</rt></ruby>
            <ruby>传<rt>chuan</rt></ruby>
            <ruby>人<rt>ren</rt></ruby>
        </section>
        <section class="mark">
            <p>老师 <mark>好帅！</mark> <mark>我爱</mark>老师！</p>
        </section>

        <section class="meter">
            <meter min="0" max="100" value="90" low="20" optimum="50" high="80"></meter>
        </section>
        <section class="progress">
            <progress max="100" value="50"></progress>
        </section>

        <section class="details">
            <details>
                <summary>小米手机</summary>
                <p>运行内存：</p>
                <p>处理器：</p>
                <p>屏幕大小</p>
                <p>像素：</p>
                <p>售价3000￥</p>
                 ![](imgs/0.jpg)
            </details>
        </section>
    </section>

兼容性

HTML5部分内容兼容到IE9，IE8以下完全不兼容
-webkit- 谷歌浏览器的前缀 -webkit-transition: 1s;
-moz- 火狐浏览器的前缀 -moz-transition: 1s;
-o- 欧朋浏览器的前缀 -o-transition: 1s;
-ms- IE浏览器的前缀 -ms-transition: 1s;
-->
对于IE8以下不支持h5标签，两种方式
第一种： document.createElement("header");

第二种：<script src="html5shiv.js"></script>