欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5新增的9種不為人知的頁(yè)面標(biāo)簽

 更新時(shí)間：2024年11月02日 13:56:03   作者：牙云敏同學(xué)  
HTML5新增了多個(gè)常用標(biāo)簽,如figure、figcaption、details、mark等,figure用于獨(dú)立流內(nèi)容,figcaption為其標(biāo)題,details用于文檔細(xì)節(jié),mark用于標(biāo)記文本,progress顯示進(jìn)度,meter表示已知范圍,menu創(chuàng)建菜單,command定義按鈕,nav用于導(dǎo)航

HTML5新增的標(biāo)簽主要可以分為幾類(lèi)，以下是按照類(lèi)別進(jìn)行分點(diǎn)表示和歸納的

HTML5新增標(biāo)簽分類(lèi)

結(jié)構(gòu)性標(biāo)簽

<header>: 定義文檔或節(jié)的頭部。
<nav>: 定義導(dǎo)航鏈接。
<section>: 定義文檔中的獨(dú)立節(jié)。
<article>: 定義文檔、頁(yè)面、應(yīng)用或網(wǎng)站中獨(dú)立的內(nèi)容區(qū)域。
<aside>: 定義頁(yè)面的側(cè)邊欄內(nèi)容。
<footer>: 定義文檔或節(jié)的頁(yè)腳。
<main>: 定義文檔的主體內(nèi)容。

多媒體標(biāo)簽

<video>: 定義視頻或電影。
<audio>: 定義音頻內(nèi)容。
<source>: 為<video>和<audio>元素定義媒體資源。
<track>: 為<video>和<audio>元素定義文本軌道。
<embed>: 定義嵌入的內(nèi)容，比如插件。
<canvas>: 用于在網(wǎng)頁(yè)上繪制圖形。  

表單標(biāo)簽

<datalist>: 定義選項(xiàng)列表，與<input>元素配合使用，以提供“自動(dòng)完成”功能。
<output>: 定義不同類(lèi)型的輸出，比如腳本的輸出。

其他標(biāo)簽

<time>: 定義日期或時(shí)間。
<mark>: 定義高亮顯示的文本。
<progress>: 定義任何類(lèi)型的任務(wù)的進(jìn)度。
<meter>: 定義已知范圍或分?jǐn)?shù)值內(nèi)的標(biāo)量測(cè)量。
<details>: 定義用戶(hù)可見(jiàn)的或者隱藏的額外的細(xì)節(jié)。
<summary>: 定義<details>元素的可見(jiàn)標(biāo)題。
<figure>: 規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。
<figcaption>: 定義<figure>元素的標(biāo)題（caption）。

HTML5中9種不為人知的頁(yè)面標(biāo)簽

1．figure標(biāo)簽

figure標(biāo)簽是HTML5中新增的標(biāo)簽之一，表示一段獨(dú)立的流內(nèi)容（文本、圖像）。
在使用figure標(biāo)簽時(shí)，標(biāo)簽的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)；但如果被刪除時(shí)，則不應(yīng)對(duì)文檔流產(chǎn)生影響。

示例：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>figure標(biāo)簽使用</title>
</head>
<body>
<p>桂林，位于廣西東北部，是世界著名的旅游勝地和歷史文化名城。地處漓江西岸，以盛產(chǎn)桂花、桂樹(shù)成林而得名。</p>
<figure>
  <p>桂林山水甲天下</p>
  <img src="gl1.jpg" width="300" height="155" /> </figure>
</body>
</html>

在上述代碼中，向figure標(biāo)簽中添加一段文字描述和圖片，形成一個(gè)獨(dú)立流單元。相當(dāng)于一個(gè)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)簽的第一個(gè)或最后一個(gè)子標(biāo)簽的位置。

示例：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>figcaption標(biāo)簽應(yīng)用</title>
</head>
<body>
<p>少林寺，位于中國(guó)河南省鄭州市登封的嵩山，是少林武術(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)簽添加了一個(gè)“少林寺”標(biāo)題。

3．details標(biāo)簽

在HTML5中，details標(biāo)簽主要用于描述文檔或某個(gè)部分的細(xì)節(jié)。
它常與“summary”標(biāo)簽配合使用，可以為details標(biāo)簽定義標(biāo)題。
在瀏覽器中運(yùn)行時(shí)，該標(biāo)題是可見(jiàn)的，當(dāng)用戶(hù)單擊標(biāo)題時(shí)，會(huì)顯示出details標(biāo)簽中的內(nèi)容。
在目前，只有在瀏覽器Chrome中才識(shí)別details標(biāo)簽。
下面通過(guò)一個(gè)在Chrome瀏覽器中運(yùn)行的實(shí)例，來(lái)說(shuō)明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年代，林縣人民在極其艱難的條件下，從太行山腰修建的引漳入林工程。是全國(guó)重點(diǎn)文物保護(hù)單位，被世人稱(chēng)之為“人工天河”，在國(guó)際上被譽(yù)為“世界第八大奇跡”。</p>
</details>
</body>
</html>

在Chrome瀏覽器中，可以看出details標(biāo)簽中的內(nèi)容，默認(rèn)是沒(méi)有顯示的，只顯示summary標(biāo)簽中的標(biāo)題。

單擊details標(biāo)簽中的標(biāo)題“紅旗渠”，details標(biāo)簽中的內(nèi)容會(huì)自動(dòng)顯示。

4．mark標(biāo)簽

mark標(biāo)簽在HTML 5中，主要用于定義帶有記號(hào)的文本。如果用戶(hù)在編輯文本時(shí)，需要突出顯示某文本，可以使用mark標(biāo)簽。

示例：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>mark標(biāo)簽</title>
</head>
<body>
<p>今天，天氣不錯(cuò)，
  <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)簽來(lái)顯示JavaScript中，耗費(fèi)時(shí)間函數(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>

在上述代碼中，添加一個(gè)項(xiàng)目下載進(jìn)度條。定義當(dāng)前完成進(jìn)度為20，下載完成值為100

6．meter標(biāo)簽

在HTML中，meter標(biāo)簽主要用來(lái)表示范圍已知，且可度量的等級(jí)標(biāo)量或分?jǐn)?shù)值，例如磁盤(pán)使用量比例、關(guān)鍵詞匹配程度等。
需要注意的是，meter標(biāo)簽不可以用來(lái)表示那些沒(méi)有已知范圍的任意值，例如重量、高度，除非已經(jīng)設(shè)定了它們值的范圍。

meter標(biāo)簽屬性介紹如下：
- value 表示當(dāng)前的實(shí)際值；如果不做指定，那么標(biāo)簽中的第一個(gè)數(shù)字就會(huì)被認(rèn)為是其當(dāng)前實(shí)際值。
- Min 當(dāng)前的最小值；如不做指定則為0。
- Max 當(dāng)前的最大值；如不做指定則為1；如果指定的最大值小于最小值，那么最小值會(huì)被認(rèn)為是最大值。
- Low 當(dāng)前的低值區(qū)；必須小于或等于max值；如果低值區(qū)數(shù)字小于最小值，那么它會(huì)被認(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月份個(gè)人工作完成進(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個(gè)人的工作進(jìn)度。完成進(jìn)度最高是100%，最低是0%。

7．menu標(biāo)簽

menu標(biāo)簽是HTML 5中重新啟用的一個(gè)舊標(biāo)記，在HTML 2時(shí)就已經(jīng)存在。
在HTML 4時(shí)曾一度被廢棄，而在HTML 5中重新恢復(fù)使用，并賦予了新的功能含義。
常與li列表標(biāo)簽結(jié)合使用，用來(lái)定義一個(gè)列表式的菜單。

其常用屬性及描述如下：
- autosubmit 如果為true，那么當(dāng)表單控件改變時(shí)會(huì)自動(dòng)提交。
- label 為菜單定義一個(gè)可見(jiàn)的標(biāo)注。
- type 定義顯示那種類(lèi)型的菜單，默認(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>

上述代碼是選擇個(gè)人喜歡顏色的實(shí)例，先向頁(yè)面添加menu標(biāo)簽，然后，在該標(biāo)簽中加入li列表標(biāo)簽。
最后添加css樣式，實(shí)現(xiàn)某用戶(hù)將鼠標(biāo)移至某個(gè)li標(biāo)簽時(shí)，展示菜單中某選項(xiàng)被選中的效果。

8．command標(biāo)簽

Command標(biāo)簽是HTML 5中新增加重要標(biāo)簽，用于定義各種類(lèi)型的按鈕（包括命令按鈕、單選擇按鈕、圖片按鈕）及復(fù)選框等。
利用該標(biāo)記的url屬性可以添加圖片，并且實(shí)現(xiàn)圖片按鈕效果；

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

Command標(biāo)簽如果與menu標(biāo)簽結(jié)合使用，可以實(shí)現(xiàn)彈出式的下拉菜單，當(dāng)單擊菜單中的某個(gè)選項(xiàng)時(shí)，將執(zhí)行相應(yīng)的操作。

9．NAV標(biāo)簽

nav標(biāo)簽是頁(yè)面的一個(gè)導(dǎo)航標(biāo)簽。
可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一塊區(qū)域中，使頁(yè)面的標(biāo)簽更有語(yǔ)義性。
示例：

<!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>

上述代碼中，將三個(gè)鏈接放入nav標(biāo)簽中，形成一塊區(qū)域。

總結(jié)

這些新增的標(biāo)簽為HTML5提供了更多語(yǔ)義化的元素，使得網(wǎng)頁(yè)結(jié)構(gòu)更清晰，更易于理解和維護(hù)。同時(shí)，多媒體和表單相關(guān)的新增標(biāo)簽也為網(wǎng)頁(yè)提供了更多的交互性和多媒體內(nèi)容的支持。

到此這篇關(guān)于HTML5新增的9種不為人知的頁(yè)面標(biāo)簽的文章就介紹到這了,更多相關(guān)HTML5新增的9種常用標(biāo)簽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論