HTML5新增标签的汇总与详解
趁著一點(diǎn)閑暇時(shí)間,把HTML5的新增標(biāo)簽整理了一下,用了表格的形式展現(xiàn),分別歸納了各標(biāo)簽的用法及屬性分析。這樣方便各位以后在運(yùn)用HTML5標(biāo)記遇到疑惑時(shí),直接上來(lái)對(duì)照看下就明了了,希望對(duì)大家有幫助哦。
| 標(biāo)簽 | 標(biāo)記意義及用法分析/示例 | 屬性/屬性值/描述 | |||||||||||||||||||||
| <article> | 定義獨(dú)立的內(nèi)容,如論壇帖子、報(bào)紙文章、博客條目、用戶評(píng)論等內(nèi)容。 | 支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <aside> | 定義兩欄或多欄頁(yè)面的側(cè)邊欄內(nèi)容,如聯(lián)系我們、客服、網(wǎng)站公告等內(nèi)容。 | 支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <audio> | 定義音頻內(nèi)容,如音樂(lè)或其他音頻流。 |
支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <audio?src=”audio.wav”> 您的瀏覽器不支持?audio?標(biāo)簽。(注:可以在開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間加上此文本內(nèi)容,這樣若瀏覽器不支持此元素,就可以顯示出這個(gè)信息。) </audio> | |||||||||||||||||||||||
| <canvas> | 定義圖形,如圖表和其他圖像。(注:<canvas>?只是圖形容器,我們必須使用腳本來(lái)繪制圖形。) |
支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <canvas?id=”myCanvas”></canvas> <script?type=”text/javascript”> var?canvas=document.getElementById(‘myCanvas’); var?ctx=canvas.getContext(‘2d’); ctx.fillStyle=’#FFFF00′; ctx.fillRect(0,0,20,30); </script> | |||||||||||||||||||||||
| <command> | 標(biāo)記定義一個(gè)命令按鈕,比如單選按鈕、復(fù)選框或按鈕。只有當(dāng)?command?元素位于?menu?元素內(nèi)時(shí),該元素才是可見(jiàn)的。否則不會(huì)顯示這個(gè)元素,但是可以用它規(guī)定鍵盤快捷鍵。 |
支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <menu> <command?οnclick=”alert(‘Hello!’)”>Click?here.</command> </menu> | |||||||||||||||||||||||
| <datalist> | 定義選項(xiàng)列表,需與?input?元素配合使用,通過(guò)input?元素的?list?屬性來(lái)綁定,用來(lái)定義?input?可能的值。datalist?及其選項(xiàng)不會(huì)被顯示出來(lái),它僅僅是合法的輸入值列表。 | 支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <input?id=”fruits”?list=”fruits”?/> <datalist?id=”fruits”> <option?value=”Apple”> <option?value=”Banana”> </datalist> | |||||||||||||||||||||||
| <details> | 用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)。 |
支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <details> <summary>Some?title.</summary> <p>Some?details?about?the?title.</p> </details> | |||||||||||||||||||||||
| <embed> | 定義外部的可交互的內(nèi)容或插件。 |
支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <embed?src=”someone.swf”?/> | |||||||||||||||||||||||
| <figure> | 定義一組媒體內(nèi)容(圖像、圖表、照片、代碼等)以及它們的標(biāo)題。如果被刪除,則不應(yīng)對(duì)文檔流產(chǎn)生影響。 | 支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <figure> <p>The?title?of?the?image.</p> <img?src=”someimage.jpg”?width=”100″?height=”50″?/> </figure> | |||||||||||||||||||||||
| <footer> | 定義一個(gè)頁(yè)面或一個(gè)區(qū)域的頁(yè)腳??砂臋n的作者姓名、創(chuàng)作日期或者聯(lián)系信息。 | 支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <header> | 定義一個(gè)頁(yè)面或一個(gè)區(qū)域的頭部。 | 支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <hgroup> | 定義文件中一個(gè)區(qū)塊的相關(guān)信息,使用?<hgroup>?標(biāo)簽對(duì)網(wǎng)頁(yè)或區(qū)段(section)的標(biāo)題進(jìn)行組合。 | 支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <hgroup> <h1>Welcome?my?world!</h1> <h2>This?is?a?title.</h2> </hgroup> | |||||||||||||||||||||||
| <keygen> | 定義表單里一個(gè)生成的鍵值。規(guī)定用于表單的密鑰對(duì)生成器字段。當(dāng)提交表單時(shí),私鑰存儲(chǔ)在本地,公鑰發(fā)送到服務(wù)器。 |
支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <form?action=”demo_keygen.asp”?method=”get”> Username:?<input?type=”text”?name=”usr_name”?/> Encryption:?<keygen?name=”security”?/> <input?type=”submit”?/> </form> | |||||||||||||||||||||||
| <mark> | 定義有標(biāo)記的文本。請(qǐng)?jiān)谛枰怀鲲@示文本時(shí)使用此標(biāo)簽。 | 支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <p>I?like?<mark>apple</mark>?most.</p> | |||||||||||||||||||||||
| <meter> | 定義度量衡。僅用于已知最大和最小值的度量。(注:必須定義度量的范圍,既可以在元素的文本中,也可以在?min/max?屬性中定義。) |
支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <meter?min=”0″?max=”10″>2</meter> <meter>2?out?of?5</meter> <meter>10%</meter> | |||||||||||||||||||||||
| <nav> | 定義導(dǎo)航鏈接。(注:如果文檔中有“前后”按鈕,則應(yīng)該把它放到?<nav>?元素中。) | 支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <nav> <a?href=”index.asp”>Home</a> <a?href=”Previous.asp”>Previous</a> <a?href=”Next.asp”>Next</a> </nav> | |||||||||||||||||||||||
| <output> | 定義不同類型的輸出,比如腳本的輸出。 |
支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <progress> | 定義任務(wù)(如下載)的過(guò)程,可以使用此標(biāo)簽來(lái)顯示?JavaScript?中耗費(fèi)時(shí)間的函數(shù)的進(jìn)度。 |
支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <progress> <span?id=”progress”>15</span>% </progress> | |||||||||||||||||||||||
| <ruby> | 定義?ruby?注釋(中文注音或字符)。在東亞使用,顯示的是東亞字符的發(fā)音。ruby?元素由一個(gè)或多個(gè)字符(需要一個(gè)解釋/發(fā)音)和一個(gè)提供該信息的?rt?元素組成,還包括可選的?rp?元素,定義當(dāng)瀏覽器不支持?“ruby”?元素時(shí)顯示的內(nèi)容。 | 支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <section> | 定義文檔中的節(jié)(section、區(qū)段)。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。 |
支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <source> | 為媒介元素(比如?<video>?和?<audio>)定義媒介資源。 |
支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <time> | 定義一個(gè)日期/時(shí)間,該元素能夠以機(jī)器可讀的方式對(duì)日期和時(shí)間進(jìn)行編碼,舉例說(shuō),用戶代理能夠把生日提醒或排定的事件添加到用戶日程表中,搜索引擎也能夠生成更智能的搜索結(jié)果。 |
支持HTML5的全局屬性和事件屬性。 | |||||||||||||||||||||
| <p>大家都是早上?<time>9:00</time>?上班。</p> <p><time?datetime=”2012-01-01″>元旦</time>晚會(huì)。</p> | |||||||||||||||||||||||
| <video> | 定義視頻,比如電影片段或其他視頻流。 |
支持HTML5的全局屬性和事件屬性。 |
轉(zhuǎn)載于:https://www.cnblogs.com/xiaohanzhu/p/5580870.html
總結(jié)
以上是生活随笔為你收集整理的HTML5新增标签的汇总与详解的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 216. Combination Sum
- 下一篇: 6月24日AppCan移动开发者大会礼品