在 HTML5 中，不仅增加了很多表单中的元素，同时也增加和改良了可以应用在整个页面中的元素。重点包含 figure、figcaption、details、summary、mark、progress、meter、ol、dl、cite 、small元素。
1、figure，figcaption元素
figure元素用来表示网页上一块独立的内容，可以是图片、统计图、代码实例。
figcaption元素从属figure元素，表示figure元素的标题；一个figure元素只能放置一个figcaption元素。
<body>
<figure>
<img src="1.jpg" alt="美女">
<img src="2.jpg" alt="美女">
<img src="3.jpg" alt="美女">
<figcaption>美女</figcaption>
</figure>
</body>
2、detail，summary元素
detail元素表示其内部的元素可以被收缩和展开显示，内部可以放置表单、插件、统计图的详细数据等。
summary元素从属于detail元素，用鼠标单击detail元素的内容时，summary元素的内部会被展开；如果detail中没有summary元素，浏览器会提供默认文字，以供单击。
<body>
<script>
function detail_onclick(detail){
var p = document.getElementById("p");
if (detail.open) {
p.style.visibility = "hidden";
}else{
p.style.visibility = "visible";
}
}
</script>
<details id="detail" onclick="detail_onclick(this)">
<summary>速度与激情</summary>
<p id="p" style="visibility: hidden">你好么，这是为保罗打造的电影，看起来激情四射</p>
</details>
</body>
3、mark元素
mark元素表示页面需要突出显示或高亮显示的文字。
<body>
<p>这是一段文字，用来<mark>测试</mark>元素</p>
</body>
4、progress、meter元素
progress元素代表任务完成的进度，这个进度可以是不确定的。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body>
<script>
function btn(){
var i = 0;
function thread_one(){
if (i<=100) {
i++;
updateprogress(i);
}
}
setInterval(thread_one,100);
}
function updateprogress(newValue){
var progressBar = document.getElementById("p");
progressBar.value = newValue;
progressBar.getElementsByTagName("span")[0].textContent = newValue;
}
</script>
<section>
<h2>progress元素的使用</h2>
<p>完成百分比<progress style="background-color: #269abc" id = "p" value="0" max="100"><span>0</span>%</progress></p>
<input type="button" value="点击" onclick="btn()"></input>
</section>
</body>
</html>
meter元素表示规定范围内的数值量，属性值有6个，如下例：
<body>
<meter value="40" min="0" max="100" low="10" high="90" optimum="80"></meter>
</body>
5、ol、dl、cite 、small元素
在html5中，对ol元素进行了改良，添加了start和reversed属性。
<body>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ol>
<ol start="5">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ol>
<ol start="5" reversed>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ol>
</body>
dl元素在html5中重新定义，表示多个名字的列表项。每一项都包含1条或者多条带有名字的dd元素。
<body>
<dl>
<dt>Hello</dt>
<dd>你好就是hello</dd>
<dt>博客</dt>
<dd>你喜欢看博客吗？</dd>
</dl>
</body>
cite元素，表示作品的标题，可以在页面详细引用，也可以只在页面提一下。
<body>
<h3>cite元素</h3>
<p>我最喜欢的电影是<cite>速度与激情</cite></p>
</body>
small元素，在html5中改良为标识小字印刷体的元素。
<body>
<dl>
<dt>单人间</dt>
<dd>399 元 <small>含早餐，不含税</small></dd>
<dt>双人间</dt>
<dd>599 元 <small>含早餐，不含税</small></dd>
</dl>
</body>