HTML5新增標籤總結和說明

ITzhongzi發表於2017-05-17
HTML
摘要: HTML5出來這麼久，都沒有真正的理解和花時間去看，經常看到一些網頁的裡面包含很多陌生的標籤元素，一直不清楚是什麼功能。像<article>、<aside>。 其實這兩個標籤和<div>的功能一樣僅僅是一個塊級元素沒有任何的樣式和功能事件上的特點完全可以理解為div，。但是HTML5為什麼要增加這些看似“毫無作用”標籤呢。

        HTML5出來這麼久，都沒有真正的理解和花時間去看，經常看到一些網頁的裡面包含很多陌生的標籤元素，一直不清楚是什麼功能。像<article>、<aside>。 其實這兩個標籤和<div>的功能一樣僅僅是一個塊級元素沒有任何的樣式和功能事件上的特點完全可以理解為div，。但是HTML5為什麼要增加這些看似“毫無作用”標籤呢。
        我們知道經這麼長時間的發展，HTML5的應用已經普及了。從使用的特點上來看，HTML5相對以前版本來看給人的感覺就是更加人性化。按照以往的頁面佈局習慣是<div id="article"> 代表內容模組，<div id="aside">代表邊欄模組，通過這種方式來區分每個div的區塊部分。HTML5就不一樣了，一改以往佈局習慣換成<article>、<aside> 這些更加語義化的標籤。所以說H5增加了這些標籤最大的作用就是語義化，便於讀取和識辨。因此也更加適合做SEO，容易快速準確的被爬蟲讀取，就像head和 titile 這樣的標籤元素一樣。同時一些移動裝置在解析到這些標籤的時候做出特殊提示或者更加人性化的展示 等等。


HTML5新增了哪些標籤（來源網路）


標籤 標記意義及用法分析/示例 屬性/屬性值/描述
<article> 定義獨立的內容，如論壇帖子、報紙文章、部落格條目、使用者評論等內容。 支援HTML5的全域性屬性和事件屬性。
<aside> 定義兩欄或多欄頁面的側邊欄內容，如聯絡我們、客服、網站公告等內容。 支援HTML5的全域性屬性和事件屬性。
<audio> 定義音訊內容，如音樂或其他音訊流。
autoplay autoplay 自動播放。
controls controls 顯示控制元件。
loop loop 自動重播。
preload preload 預備播放。如果使用 “autoplay”，則忽略該屬性。
src url 音訊的URL。

支援HTML5的全域性屬性和事件屬性。
<audio src=”audio.wav”>

您的瀏覽器不支援 audio 標籤。（注：可以在開始標籤和結束標籤之間加上此文字內容，這樣若瀏覽器不支援此元素，就可以顯示出這個資訊。）

</audio>

<canvas> 定義圖形，如圖表和其他影象。（注：<canvas> 只是圖形容器，我們必須使用指令碼來繪製圖形。）
height pixels 設定 canvas 的高度。
width pixels 設定 canvas 的寬度。

支援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> 標記定義一個命令按鈕，比如單選按鈕、核取方塊或按鈕。只有當 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 onclick=”alert(‘Hello!’)”>Click here.</command>

</menu>

<datalist> 定義選項列表，需與 input 元素配合使用，通過input 元素的 list 屬性來繫結，用來定義 input 可能的值。datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。 支援HTML5的全域性屬性和事件屬性。
<input id=”fruits” list=”fruits” />

<datalist id=”fruits”>

<option value=”Apple”>

<option value=”Banana”>

</datalist>

<details> 用於描述文件或文件某個部分的細節。
open open 定義 details 是否可見

支援HTML5的全域性屬性和事件屬性。
<details>

<summary>Some title.</summary>

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

</details>

<embed> 定義外部的可互動的內容或外掛。
height pixels 設定嵌入內容的高度
src url 嵌入內容的 URL
type type 定義嵌入內容的型別
width pixels 設定嵌入內容的寬度

支援HTML5的全域性屬性和事件屬性。
<embed src=”someone.swf” />

<figure> 定義一組媒體內容（影象、圖表、照片、程式碼等）以及它們的標題。如果被刪除，則不應對文件流產生影響。 支援HTML5的全域性屬性和事件屬性。
<figure>

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

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

</figure>

<footer> 定義一個頁面或一個區域的頁尾。可包含文件的作者姓名、創作日期或者聯絡資訊。 支援HTML5的全域性屬性和事件屬性。
<header> 定義一個頁面或一個區域的頭部。 支援HTML5的全域性屬性和事件屬性。
<hgroup> 定義檔案中一個區塊的相關資訊，使用 <hgroup> 標籤對網頁或區段（section）的標題進行組合。 支援HTML5的全域性屬性和事件屬性。
<hgroup>

<h1>Welcome my world!</h1>

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

</hgroup>

<keygen> 定義表單裡一個生成的鍵值。規定用於表單的金鑰對生成器欄位。當提交表單時，私鑰儲存在本地，公鑰傳送到伺服器。
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>

<meter>2 out of 5</meter>

<meter>10%</meter>

<nav> 定義導航連結。（注：如果文件中有“前後”按鈕，則應該把它放到 <nav> 元素中。） 支援HTML5的全域性屬性和事件屬性。
<nav>

<a href=”index.asp”>Home</a>

<a href=”Previous.asp”>Previous</a>

<a href=”Next.asp”>Next</a>

</nav>

<output> 定義不同型別的輸出，比如指令碼的輸出。
for id of another element 定義輸出域相關的一個或多個元素
form formname 定義輸入欄位所屬的一個或多個表單
name unique name 定義物件的唯一名稱。（表單提交時使用）

支援HTML5的全域性屬性和事件屬性。
<progress> 定義任務（如下載）的過程，可以使用此標籤來顯示 JavaScript 中耗費時間的函式的進度。
max number 定義完成的值
value number 定義程式的當前值

支援HTML5的全域性屬性和事件屬性。
<progress>

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

</progress>

<ruby> 定義 ruby 註釋（中文注音或字元）。在東亞使用，顯示的是東亞字元的發音。ruby 元素由一個或多個字元（需要一個解釋/發音）和一個提供該資訊的 rt 元素組成，還包括可選的 rp 元素，定義當瀏覽器不支援 “ruby” 元素時顯示的內容。 支援HTML5的全域性屬性和事件屬性。
<section> 定義文件中的節（section、區段）。比如章節、頁首、頁尾或文件中的其他部分。
cite URL 當 section 摘自 web 的時候使用

支援HTML5的全域性屬性和事件屬性。
<source> 為媒介元素（比如 <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>

<p><time datetime=”2012-01-01″>元旦</time>晚會。</p>

<video> 定義視訊，比如電影片段或其他視訊流。
autoplay autoplay 自動播放。
controls controls 顯示控制元件。
height pixels 設定視訊播放器的高度
loop loop 自動重播。
preload preload 預備播放。如果使用 “autoplay”，則忽略該屬性。
src url 視訊的URL。
width pixels 設定視訊播放器的寬度

支援HTML5的全域性屬性和事件屬性。
<video src=”movie.ogg” controls=”controls”>

您的瀏覽器不支援 video 標籤。（注：可以在開始標籤和結束標籤之間加上此文字內容，這樣若瀏覽器不支援此元素，就可以顯示出這個資訊。）

</video>


相關文章