WEB前端開發學習----8. Html5一些新增標籤

先看一張圖

明顯看出Html5的頁面佈局方式要比html4.0  div+css傳統佈局模式簡潔許多，同時對搜索引擎更加友好。語義化標籤的好處就很少說了。

說幾個有意思的新增標籤：

<meter></meter> 顯示一個測量計，可用於溫度，氣壓等

meter演示

<progress><progress/> 顯示一個進度條，配合js能夠顯示動態加載效果。用於加載進度，下載進度等。

progress演示

<details></details>只有chrome支持。配合<summary></summary>和<dd></dd><dt></dt>等能夠替代js效果。

details演示

<mark></mark>能夠高亮文字

mark演示

<ruby></ruby>給生僻字註音。配合<rt></rt><rp></rp>使用,rt用來註音，rp用來定義當瀏覽器不支持 "ruby" 元素時顯示的內容。

ruby演示

<figure> 標籤規定獨立的流內容（圖像、圖表、照片、代碼等等），配合<figcaption></figcaption>給figure 添加標題

 

固然還有不少其餘的新標籤，好比canvas畫布，audio,video媒體標籤等等。

先記錄這些，有時間回來補記。