HTML5新增的9種不為人知的頁面標(biāo)簽
HTML5新增的標(biāo)簽主要可以分為幾類，以下是按照類別進(jìn)行分點(diǎn)表示和歸納的
HTML5新增標(biāo)簽分類
結(jié)構(gòu)性標(biāo)簽
<header>: 定義文檔或節(jié)的頭部。
<nav>: 定義導(dǎo)航鏈接。
<section>: 定義文檔中的獨(dú)立節(jié)。
<article>: 定義文檔、頁面、應(yīng)用或網(wǎng)站中獨(dú)立的內(nèi)容區(qū)域。
<aside>: 定義頁面的側(cè)邊欄內(nèi)容。
<footer>: 定義文檔或節(jié)的頁腳。
<main>: 定義文檔的主體內(nèi)容。
多媒體標(biāo)簽
<video>: 定義視頻或電影。
<audio>: 定義音頻內(nèi)容。
<source>: 為<video>和<audio>元素定義媒體資源。
<track>: 為<video>和<audio>元素定義文本軌道。
<embed>: 定義嵌入的內(nèi)容，比如插件。
<canvas>: 用于在網(wǎng)頁上繪制圖形。
表單標(biāo)簽
<datalist>: 定義選項(xiàng)列表，與<input>元素配合使用，以提供“自動完成”功能。
<output>: 定義不同類型的輸出，比如腳本的輸出。
其他標(biāo)簽
<time>: 定義日期或時間。
<mark>: 定義高亮顯示的文本。
<progress>: 定義任何類型的任務(wù)的進(jìn)度。
<meter>: 定義已知范圍或分?jǐn)?shù)值內(nèi)的標(biāo)量測量。
<details>: 定義用戶可見的或者隱藏的額外的細(xì)節(jié)。
<summary>: 定義<details>元素的可見標(biāo)題。
<figure>: 規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。
<figcaption>: 定義<figure>元素的標(biāo)題（caption）。
HTML5中9種不為人知的頁面標(biāo)簽
1．figure標(biāo)簽
figure標(biāo)簽是HTML5中新增的標(biāo)簽之一，表示一段獨(dú)立的流內(nèi)容（文本、圖像）。
在使用figure標(biāo)簽時，標(biāo)簽的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)；但如果被刪除時，則不應(yīng)對文檔流產(chǎn)生影響。
示例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>figure標(biāo)簽使用</title> </head> <body> <p>桂林，位于廣西東北部，是世界著名的旅游勝地和歷史文化名城。地處漓江西岸，以盛產(chǎn)桂花、桂樹成林而得名。</p> <figure> <p>桂林山水甲天下</p> <img src="gl1.jpg" width="300" height="155" /> </figure> </body> </html>
在上述代碼中，向figure標(biāo)簽中添加一段文字描述和圖片，形成一個獨(dú)立流單元。相當(dāng)于一個div.
2．figcaption標(biāo)簽
figcaption標(biāo)簽位于figure標(biāo)簽內(nèi)，用于定義figure標(biāo)簽的標(biāo)題（caption）。在默認(rèn)情況下，figcaption標(biāo)簽應(yīng)該被置于figure標(biāo)簽的第一個或最后一個子標(biāo)簽的位置。
示例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>figcaption標(biāo)簽應(yīng)用</title> </head> <body> <p>少林寺，位于中國河南省鄭州市登封的嵩山，是少林武術(shù)的發(fā)源地。</p> <figure> <figcaption>少林寺</figcaption> <img src="sl.jpg" width="388" height="296" /> </figure> </body> </html>
從上述代碼中可以看出，在figure標(biāo)簽中，使用figcaption標(biāo)簽為figure標(biāo)簽添加了一個“少林寺”標(biāo)題。
3．details標(biāo)簽
在HTML5中，details標(biāo)簽主要用于描述文檔或某個部分的細(xì)節(jié)。
它常與“summary”標(biāo)簽配合使用，可以為details標(biāo)簽定義標(biāo)題。
在瀏覽器中運(yùn)行時，該標(biāo)題是可見的，當(dāng)用戶單擊標(biāo)題時，會顯示出details標(biāo)簽中的內(nèi)容。
在目前，只有在瀏覽器Chrome中才識別details標(biāo)簽。
下面通過一個在Chrome瀏覽器中運(yùn)行的實(shí)例，來說明details標(biāo)簽的應(yīng)用。
示例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>details標(biāo)簽應(yīng)用</title> </head> <body> <details> <summary>紅旗渠</summary> <p>紅旗渠是20世紀(jì)60年代，林縣人民在極其艱難的條件下，從太行山腰修建的引漳入林工程。是全國重點(diǎn)文物保護(hù)單位，被世人稱之為“人工天河”，在國際上被譽(yù)為“世界第八大奇跡”。</p> </details> </body> </html>
在Chrome瀏覽器中，可以看出details標(biāo)簽中的內(nèi)容，默認(rèn)是沒有顯示的，只顯示summary標(biāo)簽中的標(biāo)題。
單擊details標(biāo)簽中的標(biāo)題“紅旗渠”，details標(biāo)簽中的內(nèi)容會自動顯示。
4．mark標(biāo)簽
mark標(biāo)簽在HTML 5中，主要用于定義帶有記號的文本。如果用戶在編輯文本時，需要突出顯示某文本，可以使用mark標(biāo)簽。
示例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>mark標(biāo)簽</title> </head> <body> <p>今天，天氣不錯， <mark>心情</mark> 挺好的！</p> </body> </html>
從上述代碼中，使用mark標(biāo)簽設(shè)置“心情”文本為突出顯示，默認(rèn)背景顏色為黃色。
5．progress標(biāo)簽
在HTML5中，progress標(biāo)簽的作用是定義運(yùn)行中的進(jìn)度（進(jìn)程）。
例如，可以使用progress標(biāo)簽來顯示JavaScript中，耗費(fèi)時間函數(shù)的進(jìn)度。
progress標(biāo)簽的常用屬性介紹如下：
- max 數(shù)值 定義完成的值。
- value 數(shù)值 定義進(jìn)程的當(dāng)前值。
示例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>progress標(biāo)簽應(yīng)用</title> </head> <body> 項(xiàng)目的下載進(jìn)度是： <progress value="20" max="100"> </progress> </body> </html>
在上述代碼中，添加一個項(xiàng)目下載進(jìn)度條。定義當(dāng)前完成進(jìn)度為20，下載完成值為100
6．meter標(biāo)簽
在HTML中，meter標(biāo)簽主要用來表示范圍已知，且可度量的等級標(biāo)量或分?jǐn)?shù)值，例如磁盤使用量比例、關(guān)鍵詞匹配程度等。
需要注意的是，meter標(biāo)簽不可以用來表示那些沒有已知范圍的任意值，例如重量、高度，除非已經(jīng)設(shè)定了它們值的范圍。
meter標(biāo)簽屬性介紹如下：
- value 表示當(dāng)前的實(shí)際值；如果不做指定，那么標(biāo)簽中的第一個數(shù)字就會被認(rèn)為是其當(dāng)前實(shí)際值。
- Min 當(dāng)前的最小值；如不做指定則為0。
- Max 當(dāng)前的最大值；如不做指定則為1；如果指定的最大值小于最小值，那么最小值會被認(rèn)為是最大值。
- Low 當(dāng)前的低值區(qū)；必須小于或等于max值；如果低值區(qū)數(shù)字小于最小值，那么它會被認(rèn)為是最小值。
- High 當(dāng)前的高值區(qū)。 Optimum 最佳值；其范圍在最小值與最大值區(qū)間當(dāng)中，并且可以處于高值區(qū)。
示例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>meter標(biāo)簽應(yīng)用</title> </head> <body> <p>11月份個人工作完成進(jìn)度：</p> <p>付強(qiáng)： <meter value="10" optimum="100" high="90" low="10" max="100" min="0"> </meter> <span> 10% </span> </p> <p>張紅： <meter value="60" optimum="100" high="90" low="10" max="100" min="0"> </meter> <span> 60% </span> </p> <p>王林： <meter value="89" optimum="100" high="90" low="10" max="100" min="0"> </meter> <span> 89% </span> </p> </body> </html>
在上述代碼中，以進(jìn)度條的形式，顯示3個人的工作進(jìn)度。完成進(jìn)度最高是100%，最低是0%。
7．menu標(biāo)簽
menu標(biāo)簽是HTML 5中重新啟用的一個舊標(biāo)記，在HTML 2時就已經(jīng)存在。
在HTML 4時曾一度被廢棄，而在HTML 5中重新恢復(fù)使用，并賦予了新的功能含義。
常與li列表標(biāo)簽結(jié)合使用，用來定義一個列表式的菜單。
其常用屬性及描述如下：
- autosubmit 如果為true，那么當(dāng)表單控件改變時會自動提交。
- label 為菜單定義一個可見的標(biāo)注。
- type 定義顯示那種類型的菜單，默認(rèn)值是 list。
示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>標(biāo)簽menu的使用</title>
<style type="text/css">
body {
font-size:12px;
}
menu {
padding:0;
margin:0;
display:block;
border: solid 1px #365167;
width:100px
}
menu li {
list-style-type:none;
margin:2px;
height:25px;
width:80px
}
menu li:hover {
border: solid 1px #7DA2CE;
background-color:#CFE3FD
}
</style>
</head>
<body>
<p>選擇你喜歡的顏色：</p>
<menu>
<li><input type="checkbox" />紅色</li>
<li><input type="checkbox" />黃色</li>
<li><input type="checkbox" />綠色</li>
<li><input type="checkbox" />藍(lán)色</li>
</menu>
</body>
</html>上述代碼是選擇個人喜歡顏色的實(shí)例，先向頁面添加menu標(biāo)簽，然后，在該標(biāo)簽中加入li列表標(biāo)簽。
最后添加css樣式，實(shí)現(xiàn)某用戶將鼠標(biāo)移至某個li標(biāo)簽時，展示菜單中某選項(xiàng)被選中的效果。
8．command標(biāo)簽
Command標(biāo)簽是HTML 5中新增加重要標(biāo)簽，用于定義各種類型的按鈕（包括命令按鈕、單選擇按鈕、圖片按鈕）及復(fù)選框等。
利用該標(biāo)記的url屬性可以添加圖片，并且實(shí)現(xiàn)圖片按鈕效果；
command標(biāo)簽的常用屬性如下：
- checked 定義是否被選中。僅用于radio或checkbox類型。
- disabled 定義command是否可用。
- icon 定義作為command來顯示的圖像的url。
- label command定義可見的 label。
- radiogroup groupname定義command所屬的組名。僅在類型為radio時使用。
- type 定義該command的類型。默認(rèn)是“command”。
Command標(biāo)簽如果與menu標(biāo)簽結(jié)合使用，可以實(shí)現(xiàn)彈出式的下拉菜單，當(dāng)單擊菜單中的某個選項(xiàng)時，將執(zhí)行相應(yīng)的操作。
9．NAV標(biāo)簽
nav標(biāo)簽是頁面的一個導(dǎo)航標(biāo)簽。
可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一塊區(qū)域中，使頁面的標(biāo)簽更有語義性。
示例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>nav標(biāo)簽應(yīng)用</title> </head> <body> <nav draggable="true"> <a rel="external nofollow" >百度</a> <a rel="external nofollow" >新浪</a> <a rel="external nofollow" >谷歌</a> </nav> </body> </html>
上述代碼中，將三個鏈接放入nav標(biāo)簽中，形成一塊區(qū)域。
總結(jié)
這些新增的標(biāo)簽為HTML5提供了更多語義化的元素，使得網(wǎng)頁結(jié)構(gòu)更清晰，更易于理解和維護(hù)。同時，多媒體和表單相關(guān)的新增標(biāo)簽也為網(wǎng)頁提供了更多的交互性和多媒體內(nèi)容的支持。
到此這篇關(guān)于HTML5新增的9種不為人知的頁面標(biāo)簽的文章就介紹到這了,更多相關(guān)HTML5新增的9種常用標(biāo)簽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
DIV 居中的絕好解決方法...2006-11-11
昨天在使用css結(jié)合div布局的時候碰到了一個問題。 在一個規(guī)定寬度大小的ul里邊 我把li的寬度定義為自動。企圖讓li根據(jù)內(nèi)容長度來自動向左對齊排列。2008-07-07
用了這么多年的CSS，現(xiàn)在才明白CSS的真正匹配原理，不知道你是否也跟我一樣？2010-06-06
解決 select 擋住div的解決方法...2006-11-11
除非限制你自己只做單個頁面的網(wǎng)站，否則你都需要導(dǎo)航欄。事實(shí)上，導(dǎo)航欄是任何網(wǎng)站設(shè)計中最主要的部分之一，如果希望用戶很容易的在你的站點(diǎn)移動，導(dǎo)航欄的設(shè)計需要大量的思考。2008-05-05
用CSS給圖片打標(biāo)的方法...2007-06-06
一個頁面有4個Iframe來顯示flash內(nèi)容，其中第二個iframe的顯示是用Javascript控制的，只有當(dāng)特定的cookie存在時才出現(xiàn)，否則顯示普通的文本。2008-05-05
百分比的細(xì)節(jié)－－容器大小篇...2007-04-04
CSS中Float（浮動）相關(guān)技巧文章...2007-09-09
2008-01-01