HTML 5新增的元素
?
HTML 5結構元素
這真是大快人心。目前，我們定義結構只能通過一個“萬能”的div, 試圖通過設置它的特性id的值如header, footer, sidebar等來分別表達頭部，底部或者側欄等。有了它們，代碼編寫者不再需要為id的命名費盡心思，對于手機、閱讀器等設備更有語義的好處。HTML 5增加了新的結構元素來表達這些最常用的結構：
◆section: 這可以表達書本的一部分或一章，或者一章內的一節
◆header: 頁面主體上的頭部。并非head元素
◆footer: 頁面的底部（頁腳），可以是一封郵件簽名的所在
◆nav: 到其他頁面的鏈接集合
◆article: 諸如blog, 雜志，綱要等之中的一條獨立記錄。
舉個例子，一個blog的首頁，用HTML 5寫的話，可以是這樣（有省略）：
<!DOCTYPE HTML> <HTML><head><title>realazy</title></head><body><header><h1>Realazy</h1></header><section><article><h2><a href="http://realazy.org/blog" mce_href="http://realazy.org/blog">標題</a></h2><p>內容在此...（省略n字）</p></article><article><h2><a href="http://realazy.org/blog" mce_href="http://realazy.org/blog">標題2</a></h2><p>內容2在此...（省略n字）</p></article></section><footer>nav><ul><li><a href="http://realazy/blog" mce_href="http://realazy/blog">導航1</a></li><li><a href="http://realazy/blog" mce_href="http://realazy/blog">導航2</a></li>...</ul></nav><p>? 2007 realazy</p></footer></body></HTML>HTML還增加以下三個塊級元素
◆aside
◆figure/code>
◆dialog
aside可以用以表達注記、貼士、側欄、摘要、插入的引用等諸如作為補充主體的內容。比如這樣表達blog的側欄：
<aside><h3>最新文章</h3><ul><li><a href="http://realazy.org/blog/" mce_href="http://realazy.org/blog/">文章標題</a></li></ul> </aside>figure元素表示一個有說明的塊級圖片。比如：
<figure><legend>這是圖片的說明</legend><img alt="圖片可替換文本" src="/path/to/img.png" mce_src="/path/to/img.png"/> </figure>dialog元素用于表達人們之間的對話。在HTML 5中，dt用于表示說話者，而dd則用來表示說話者的內容。如：
<dialog><dt>佛</dt><dd>色即是空</dd><dt>悟空</dt><dd>空即是色</dd> </dialog>?行內（inline）的語義元素
m元素用來標記一些不是那么需要著重強調的文本。現在尚有爭議，可能最終會改為mark.
time元素如其名，用來表達時間。它需要一個datetime的特性來標明機器能夠認識的時間，如：
<time datetime="2008-08-08T20:08:08">2008年8月8日晚上8時8分8秒</tiem>meter元素表達特定范圍內的數值。可用于薪水、百分比、分數等。它還有6個特性來表達各方面的含義，比如：
<p>您的分數是：<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>. </p>還有一個progress，也是義如其名，用以表達進度：
<p>目標完成度：<progress value="40" max="100">40%</progress>嵌入多媒體</p>新增video和audio元素。顧名思義，分別是用來插入視頻和聲音的。至于格式，交由瀏覽器實現，HTML再也不需要特別的代碼去播放特定的格式。就像img一樣，不管是png, jpg還是gif都可以顯示。值得注意的是，它們可以包含內容。比如，可以把歌詞放到某段歌曲中去：
<audio src="誰人伴你睡.mp3" mce_src="誰人伴你睡.mp3"><p>淚枯干</p><p>難忍怎么委屈自已</p><p>曾經有一刻悲與喜</p> </audio>?
交互性
HTML 5同時也叫Web Applications 1.0, 因此也進一步發展交互能力。這些標簽就是為提高頁面的交互體驗而生：
◆details: 用來表示一段具體的內容，但是內容默認可能不顯示，通過某種手段（如點擊）與legend交互才顯示出來。
◆datagrid: 用來控制數據，可以由用戶或者腳本來更新。
◆menu
◆command
?
轉載于:https://www.cnblogs.com/fxair/archive/2012/01/06/2313950.html
總結
以上是生活随笔為你收集整理的HTML 5新增的元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 为什么乱码：meta http-equi
- 下一篇： 2017年html5行业报告,云适配发布