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