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>