增强的页面元素

•      figure元素与figcaption元素

figure元素用来表示网页上一块独立的内容，可以是图片、统计图或代码示例，甚至是音频插件、视频插件等。figcaption元素表示figure元素的标题，从属figure元素，必须写在figure元素内部。

<figure>
     <img src="lufu.jpg" alt="lufu"/>
     <img src="lufu2.jpg" alt="lufu"/>
     <figcaption>路飞</figcaption>
</figure>

•      details元素

     提供了一种替代JavaScript的、将画面上局部区域进行展开或收缩的方法。summary元素从属于details元素，用鼠标点击summary元素中的内容文字时，detail元素中的其他从属元素将会展开或收缩。如果没有summary元素，浏览器也会提供默认的样式。details元素还提供了“open”属性， 使用<details open>，则默认页面加载时就打开details里面的内容。

<details>
     <summary>HTML 5</summary>
     This document teaches you everything you have to learn about HTML5
</details>

•      mark元素

mark元素表示页面中需要突出显示或高亮显示的，一般可以用于显示关键字高亮，或者是与用户相关需要提醒用户的时候使用。

<h1>搜索"<mark>HTML 5</mark>", 找到相关网页约10,200,000篇，用时0.041秒</h1>
<section id="search-results">
     <article>
          <h2>
               <a href="#">专题：<mark>HTML 5 </mark> 下一代web开发标准</a>
          </h2>
          <p><mark>HTML 5</mark>近十年XXXXXXXXX</p>
     </article>
     <article>
          <h2>
               <a href="#">专题：<mark>HTML 5 </mark> 下一代web开发标准</a>
          </h2>
          <p><mark>HTML 5</mark>近十年XXXXXXXXX</p>
     </article>
</section>

PS：mark元素的作用与em元素、strong元素是有区别的，mark元素的标示目的与原文作者无关，而是在后来引用时添加上去的，目的是为了吸引当前用户或者给用户做参考。而em、strong是原文作者用来强调一段文字的重要性添加的。

•      progress元素

progress元素代表一个任务的完成进度

•      meter元素

meter元素表示规定范围内的数量值