當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5新增标签的汇总与详解

發布時間：2024/4/15 HTML 67 豆豆

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

趁著一點閑暇時間，把HTML5的新增標簽整理了一下，用了表格的形式展現，分別歸納了各標簽的用法及屬性分析。這樣方便各位以后在運用HTML5標記遇到疑惑時，直接上來對照看下就明了了，希望對大家有幫助哦。

標簽

標記意義及用法分析/示例

屬性/屬性值/描述

定義獨立的內容，如論壇帖子、報紙文章、博客條目、用戶評論等內容。

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

<aside>

定義兩欄或多欄頁面的側邊欄內容，如聯系我們、客服、網站公告等內容。

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

<audio>

定義音頻內容，如音樂或其他音頻流。

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

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

<audio?src=”audio.wav”>

您的瀏覽器不支持?audio?標簽。（注：可以在開始標簽和結束標簽之間加上此文本內容，這樣若瀏覽器不支持此元素，就可以顯示出這個信息。）

</audio>

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

height	pixels	設置?canvas?的高度。
width	pixels	設置?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>

標記定義一個命令按鈕，比如單選按鈕、復選框或按鈕。只有當?command?元素位于?menu?元素內時，該元素才是可見的。否則不會顯示這個元素，但是可以用它規定鍵盤快捷鍵。

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

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

<menu>

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

</menu>

定義選項列表，需與?input?元素配合使用，通過input?元素的?list?屬性來綁定，用來定義?input?可能的值。datalist?及其選項不會被顯示出來，它僅僅是合法的輸入值列表。

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

<input?id=”fruits”?list=”fruits”?/>

<datalist?id=”fruits”>

<option?value=”Apple”>

<option?value=”Banana”>

</datalist>

用于描述文檔或文檔某個部分的細節。

open

定義?details?是否可見

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

<summary>Some?title.</summary>

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

</details>

<embed>

定義外部的可交互的內容或插件。

height	pixels	設置嵌入內容的高度
src	url	嵌入內容的?URL
type	type	定義嵌入內容的類型
width	pixels	設置嵌入內容的寬度

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

定義一組媒體內容（圖像、圖表、照片、代碼等）以及它們的標題。如果被刪除，則不應對文檔流產生影響。

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

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

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

</figure>

定義一個頁面或一個區域的頁腳?？砂臋n的作者姓名、創作日期或者聯系信息。

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

定義一個頁面或一個區域的頭部。

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

定義文件中一個區塊的相關信息，使用?<hgroup>?標簽對網頁或區段（section）的標題進行組合。

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

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

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

</hgroup>

定義表單里一個生成的鍵值。規定用于表單的密鑰對生成器字段。當提交表單時，私鑰存儲在本地，公鑰發送到服務器。

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

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

<form?action=”demo_keygen.asp”?method=”get”>

Username:?<input?type=”text”?name=”usr_name”?/>

Encryption:?<keygen?name=”security”?/>

<input?type=”submit”?/>

</form>

<mark>

定義有標記的文本。請在需要突出顯示文本時使用此標簽。

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

<p>I?like?<mark>apple</mark>?most.</p>

<meter>

定義度量衡。僅用于已知最大和最小值的度量。（注：必須定義度量的范圍，既可以在元素的文本中，也可以在?min/max?屬性中定義。）

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

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

<meter?min=”0″?max=”10″>2</meter>

<nav>

定義導航鏈接。（注：如果文檔中有“前后”按鈕，則應該把它放到?<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	定義輸出域相關的一個或多個元素
form	formname	定義輸入字段所屬的一個或多個表單
name	unique?name	定義對象的唯一名稱。（表單提交時使用）

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

定義任務（如下載）的過程，可以使用此標簽來顯示?JavaScript?中耗費時間的函數的進度。

max	number	定義完成的值
value	number	定義進程的當前值

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

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

</progress>

<ruby>

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

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

定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。

cite

URL

當?section?摘自?web?的時候使用

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

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

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

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

<time>

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

datetime	datetime	規定日期或時間。否則，由元素的內容給定日期或時間
pubdate	pubdate	指示?<time>?元素中的日期或時間是文檔的發布日期

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

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

<video>

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

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

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

轉載于:https://www.cnblogs.com/xiaohanzhu/p/5580870.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 216. Combination Sum
下一篇：前端工具网站推荐