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>
效果：
details与summary.png
mark元素
mark顾名思义，是标记的意思。可以突出高亮mark中的文字。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>details</title>
</head>
<body>
<p>
突出<mark>高亮mark</mark>中的文字。
</p>
</body>
效果：
mark.png
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>
效果：
ol.png
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>
效果：
dl-dt-dd.png
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>
效果：
progress.png
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>
谢谢大家观看，欢迎大家评论交流！一起学习移动网页制作
网友评论