當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

HTML5新增标签的汇总与详解

發(fā)布時(shí)間：2024/4/15 HTML 57 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5新增标签的汇总与详解小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

趁著一點(diǎn)閑暇時(shí)間，把HTML5的新增標(biāo)簽整理了一下，用了表格的形式展現(xiàn)，分別歸納了各標(biāo)簽的用法及屬性分析。這樣方便各位以后在運(yùn)用HTML5標(biāo)記遇到疑惑時(shí)，直接上來(lái)對(duì)照看下就明了了，希望對(duì)大家有幫助哦。

標(biāo)簽

標(biāo)記意義及用法分析/示例

屬性/屬性值/描述

定義獨(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è)或其他音頻流。

autoplay	autoplay	自動(dòng)播放。
controls	controls	顯示控件。
loop	loop	自動(dòng)重播。
preload	preload	預(yù)備播放。如果使用?“autoplay”，則忽略該屬性。
src	url	音頻的URL。

支持HTML5的全局屬性和事件屬性。

<audio?src=”audio.wav”>

您的瀏覽器不支持?audio?標(biāo)簽。（注：可以在開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間加上此文本內(nèi)容，這樣若瀏覽器不支持此元素，就可以顯示出這個(gè)信息。）

</audio>

定義圖形，如圖表和其他圖像。（注：<canvas>?只是圖形容器，我們必須使用腳本來(lái)繪制圖形。）

height	pixels	設(shè)置?canvas?的高度。
width	pixels	設(shè)置?canvas?的寬度。

支持HTML5的全局屬性和事件屬性。

<canvas?id=”myCanvas”></canvas>

var?canvas=document.getElementById(‘myCanvas’);

var?ctx=canvas.getContext(‘2d’);

ctx.fillStyle=’#FFFF00′;

ctx.fillRect(0,0,20,30);

</script>

標(biāo)記定義一個(gè)命令按鈕，比如單選按鈕、復(fù)選框或按鈕。只有當(dāng)?command?元素位于?menu?元素內(nèi)時(shí)，該元素才是可見(jiàn)的。否則不會(huì)顯示這個(gè)元素，但是可以用它規(guī)定鍵盤快捷鍵。

checked	checked	定義是否被選中。僅用于?radio?或?checkbox?類型
disabled	disabled	定義?command?是否可用
icon	url	定義作為?command?來(lái)顯示的圖像的url
label	text	為?command?定義可見(jiàn)的?label
radiogroup	groupname	定義?command?所屬的組名。僅在類型為?radio?時(shí)使用
type	checkbox command radio	定義該?command?的類型。默認(rèn)是?“command”

支持HTML5的全局屬性和事件屬性。

<menu>

<command?οnclick=”alert(‘Hello!’)”>Click?here.</command>

</menu>

定義選項(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>

用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)。

open

定義?details?是否可見(jiàn)

支持HTML5的全局屬性和事件屬性。

<summary>Some?title.</summary>

<p>Some?details?about?the?title.</p>

</details>

<embed>

定義外部的可交互的內(nèi)容或插件。

height	pixels	設(shè)置嵌入內(nèi)容的高度
src	url	嵌入內(nèi)容的?URL
type	type	定義嵌入內(nèi)容的類型
width	pixels	設(shè)置嵌入內(nèi)容的寬度

支持HTML5的全局屬性和事件屬性。

定義一組媒體內(nèi)容（圖像、圖表、照片、代碼等）以及它們的標(biāo)題。如果被刪除，則不應(yīng)對(duì)文檔流產(chǎn)生影響。

支持HTML5的全局屬性和事件屬性。

<p>The?title?of?the?image.</p>

<img?src=”someimage.jpg”?width=”100″?height=”50″?/>

</figure>

定義一個(gè)頁(yè)面或一個(gè)區(qū)域的頁(yè)腳?？砂臋n的作者姓名、創(chuàng)作日期或者聯(lián)系信息。

支持HTML5的全局屬性和事件屬性。

定義一個(gè)頁(yè)面或一個(gè)區(qū)域的頭部。

支持HTML5的全局屬性和事件屬性。

定義文件中一個(gè)區(qū)塊的相關(guān)信息，使用?<hgroup>?標(biāo)簽對(duì)網(wǎng)頁(yè)或區(qū)段（section）的標(biāo)題進(jìn)行組合。

支持HTML5的全局屬性和事件屬性。

<h1>Welcome?my?world!</h1>

<h2>This?is?a?title.</h2>

</hgroup>

定義表單里一個(gè)生成的鍵值。規(guī)定用于表單的密鑰對(duì)生成器字段。當(dāng)提交表單時(shí)，私鑰存儲(chǔ)在本地，公鑰發(fā)送到服務(wù)器。

autofocus	autofocus	使?keygen?字段在頁(yè)面加載時(shí)獲得焦點(diǎn)
challenge	challenge	如果使用，則將?keygen?的值設(shè)置為在提交時(shí)詢問(wèn)
disabled	disabled	禁用?keytag?字段
form	formname	定義該?keygen?字段所屬的一個(gè)或多個(gè)表單
keytype	rsa	定義?keytype。rsa?生成?RSA?密鑰
name	fieldname	定義?keygen?元素的唯一名稱，用于在提交表單時(shí)搜集字段的值。

支持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?屬性中定義。）

high	number	定義度量的值位于哪個(gè)點(diǎn)，被界定為高的值
low	number	定義度量的值位于哪個(gè)點(diǎn)，被界定為低的值
max	number	定義最大值。默認(rèn)值是?1
min	number	定義最小值。默認(rèn)值是?0
optimum	number	定義什么樣的度量值是最佳的值。如果該值高于?“high”?屬性，則意味著值越高越好。如果該值低于?“l(fā)ow”?屬性的值，則意味著值越低越好。
value	number	定義度量的值

支持HTML5的全局屬性和事件屬性。

<meter?min=”0″?max=”10″>2</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>

定義不同類型的輸出，比如腳本的輸出。

for	id?of?another?element	定義輸出域相關(guān)的一個(gè)或多個(gè)元素
form	formname	定義輸入字段所屬的一個(gè)或多個(gè)表單
name	unique?name	定義對(duì)象的唯一名稱。（表單提交時(shí)使用）

支持HTML5的全局屬性和事件屬性。

定義任務(wù)（如下載）的過(guò)程，可以使用此標(biāo)簽來(lái)顯示?JavaScript?中耗費(fèi)時(shí)間的函數(shù)的進(jìn)度。

max	number	定義完成的值
value	number	定義進(jìn)程的當(dāng)前值

支持HTML5的全局屬性和事件屬性。

<span?id=”progress”>15</span>%

</progress>

<ruby>

定義?ruby?注釋（中文注音或字符）。在東亞使用，顯示的是東亞字符的發(fā)音。ruby?元素由一個(gè)或多個(gè)字符（需要一個(gè)解釋/發(fā)音）和一個(gè)提供該信息的?rt?元素組成，還包括可選的?rp?元素，定義當(dāng)瀏覽器不支持?“ruby”?元素時(shí)顯示的內(nèi)容。

支持HTML5的全局屬性和事件屬性。

定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。

cite

URL

當(dāng)?section?摘自?web?的時(shí)候使用

支持HTML5的全局屬性和事件屬性。

為媒介元素（比如?<video>?和?<audio>）定義媒介資源。

media	media?query	定義媒介資源的類型，供瀏覽器決定是否下載
src	url	媒介的?URL
type	numeric?value	定義播放器在音頻流中播放起始位置。默認(rèn)是從開(kāi)頭播放。

支持HTML5的全局屬性和事件屬性。

<time>

定義一個(gè)日期/時(shí)間，該元素能夠以機(jī)器可讀的方式對(duì)日期和時(shí)間進(jìn)行編碼，舉例說(shuō)，用戶代理能夠把生日提醒或排定的事件添加到用戶日程表中，搜索引擎也能夠生成更智能的搜索結(jié)果。

datetime	datetime	規(guī)定日期或時(shí)間。否則，由元素的內(nèi)容給定日期或時(shí)間
pubdate	pubdate	指示?<time>?元素中的日期或時(shí)間是文檔的發(fā)布日期

支持HTML5的全局屬性和事件屬性。

<p>大家都是早上?<time>9:00</time>?上班。</p>

<video>

定義視頻，比如電影片段或其他視頻流。

autoplay	autoplay	自動(dòng)播放。
controls	controls	顯示控件。
height	pixels	設(shè)置視頻播放器的高度
loop	loop	自動(dòng)重播。
preload	preload	預(yù)備播放。如果使用?“autoplay”，則忽略該屬性。
src	url	視頻的URL。
width	pixels	設(shè)置視頻播放器的寬度

支持HTML5的全局屬性和事件屬性。

轉(zhuǎn)載于:https://www.cnblogs.com/xiaohanzhu/p/5580870.html

總結(jié)

以上是生活随笔為你收集整理的HTML5新增标签的汇总与详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： 216. Combination Sum
下一篇： 6月24日AppCan移动开发者大会礼品