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