HTML5 增強(qiáng)頁面的元素，包含 figure、figcaption、details、summary、mark、progress、meter、ol、dl、cite 和 small 元素。這些元素都是起到一些輔助作用，比如：figure元素，它主要作用類似于展示一個(gè)作品集，圖片（包含圖片，圖片說明，圖片標(biāo)題）。具體我們以下來詳細(xì)講解。
figure元素與figcaption元素
figure元素最常用的地方就是來展示圖片，這里的圖片包含圖片說明，圖片標(biāo)題已經(jīng)圖片本身。一個(gè)figure元素只能包含一個(gè)figcaption元素，而figcaption元素必須從屬于figure元素。figure元素可以包含很多其他元素。一般用于圖片展示、統(tǒng)計(jì)圖等。代碼如下：
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<body>
<figure>
<figcaption>黃浦江上的的盧浦大橋</figcaption>
<img src="img.jpg" width="350" height="234" />
</figure>
</body>
</html>
details元素與summary元素
details元素類似于展示與隱藏功能標(biāo)簽，summary提供details標(biāo)題。details只能有一個(gè)summary元素而且summary只能從屬于details元素。如果不寫summary元素那么details將以不同瀏覽器規(guī)定顯示標(biāo)題信息，details的內(nèi)容默認(rèn)是隱藏的，點(diǎn)擊summary或者標(biāo)題將顯示。details有一個(gè)open的boolean屬性，可以通過JS獲取open屬性判斷是展示還是隱藏狀態(tài)。代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>details</title>
</head>
<body>
<script>
function detailFunction(obj){
var open = document.getElementById("details").open;
alert("狀態(tài)是"+open);
}
</script>
<details id="details">
<summary>速度與激情7</summary>
<p id="p">你好嗎？</p>
</details>
<button onClick="detailFunction(this)">獲取狀態(tài)</button>
</body>
效果：
mark元素
mark顧名思義，是標(biāo)記的意思。可以突出高亮mark中的文字。代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>details</title>
</head>
<body>
<p>
突出<mark>高亮mark</mark>中的文字。
</p>
</body>
效果：
ol元素
ol元素，是ul列表的改良，start屬性用于指定開始的序號(hào)，后面的將遞增，reversed屬性用于將序號(hào)逆序顯示，這時(shí)如果指定start將是遞減的。代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ol</title>
</head>
<body>
<ol start="3" reversed>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ol>
</body>
</html>
效果：
dl、dt、dd元素
<dl> <dt> <dd>是一組合標(biāo)簽，使用了dt dd最外層就必須使用dl包裹，此組合標(biāo)簽我們也又叫表格標(biāo)簽。我們實(shí)踐使用dl dt dd標(biāo)簽最多地方，通常是具有標(biāo)題，而標(biāo)題下對(duì)應(yīng)有若干列表簡(jiǎn)單的（欄目標(biāo)題+對(duì)應(yīng)標(biāo)題列表）和標(biāo)題對(duì)應(yīng)下面有內(nèi)容。dt（術(shù)語）元素中的內(nèi)容不能相同，dd元素用于描述。代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ol</title>
</head>
<body>
<dl>
<dt>標(biāo)題1</dt>
<dd>這里有，html教程</dd>
<dd>這里有，css模塊</dd>
<dd>這里有，css教程</dd>
<dt>標(biāo)題2</dt>
<dd>這里有，html教程</dd>
<dd>這里有，css模塊</dd>
<dd>這里有，css教程</dd>
</dl>
</body>
</html>
效果：
progress元素
progress是進(jìn)度條最常用的，用來表示不確定的進(jìn)度，一般不做靜態(tài)的數(shù)據(jù)展示，可以通過設(shè)置progress的value屬性，來改變進(jìn)度條的狀態(tài)。切不可用作磁盤容量大小。代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>progress</title>
<script>
function btn(){
var i = 0;
//定義執(zhí)行方法
function thred_one(params) {
if(i<100){
i++;
updateprogress(i);
}
}
//注冊(cè)定時(shí)器，每100毫秒執(zhí)行一次
setInterval(thred_one,100);
}
function updateprogress(newValue){
var progressBar = document.getElementById("p");
progressBar.value = newValue;
document.getElementsByTagName("span")[0].textContent = newValue;
}
</script>
</head>
<body>
<section>
<h2>progress元素的使用</h2>
<p>完成的百分比<progress id="p" max="100" value="0"></progress><span>0</span>%</p>
<input type="button" onclick="btn();" value="點(diǎn)擊">
</section>
</body>
</html>
效果：
meter元素
規(guī)定空間的使用量。有當(dāng)前值value，最小/最大值min/max,高值/低值high/low,還有一個(gè)合適值optimum。當(dāng)value低于或者大于low/high時(shí)，meter的樣式出現(xiàn)警告樣式，其他時(shí)候柔和的樣式。代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meter</title>
</head>
<body>
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>
</body>
</html>
cite元素
cite 標(biāo)簽定義作品（比如書籍、歌曲、電影、電視節(jié)目、繪畫、雕塑等等）的標(biāo)題。顯示效果是斜體的文字。代碼如下：
<cite>《富春山居圖》</cite>由黃公望始畫于至正七年(1347)，于至正十年完成。
small元素
small元素表示小字印刷體，免責(zé)聲明、注意事項(xiàng)、法律限制或版權(quán)聲明的特征通常都是小型文本。代碼如下：
<dl>
<dt>單人間</dt>
<dd>399 元 <small>含早餐，不含稅</small></dd>
<dt>雙人間</dt>
<dd>599 元 <small>含早餐，不含稅</small></dd>
</dl>
謝謝大家觀看，歡迎大家評(píng)論交流！一起學(xué)習(xí)移動(dòng)網(wǎng)頁制作
