前言：
这节课主要学习HTML5中新增的页面元素，figure、figcaption、details、summary、mark......等元素
1.新增的figure和figcaption元素
figure元素
作用：<figure> 用来表示网页上一块独立的内容，将其从网页移除后，不会对网页上的其他内容产生任何的影响。
场景：常常用在流内容，如：图像、图表、照片、代码等等
figcaption元素
作用：<figcaption> 元素表示figure元素标题，从属于figure元素(一个figure只能用于一个)，必须包裹在其内部，
figure和figcaption元素示例：
<body>
<figure>
<img src="./img/eg_submit.jpg" alt="测试图">
<!-- 表示figure部分的标题 -->
<figcaption>提交按钮图标</figcaption>
</figure>
</body>
2.新增的details和summary元素
details元素
作用：<details> 标签用于描述文档或文档某个部分的详细内容
summary元素
作用：<summary>元素显示details标题内容
details和summary元素示例：
<body> <!-- open属性默认为false --> <details id="details"> <!-- 当没有设置summary属性，标题显示为‘详细信息‘ --> <summary>隋唐五代史</summary> <p> 这是一部讲述隋唐五代史的断代史书记，让我们穿越历史和古人来一次思想上的碰撞。 </p> </details> <script> var details = document.getElementById(‘details‘) details.onclick = function(){ console.log(details.open) } </script> </body>
3.新增的mark元素
作用：使元素中的部分内容高亮显示
mark示例：
<body> <p>这段文字用来<mark>测试</mark>mark元素</p> </body>
4.新增ol的start和reverse属性
作用：HTML5中对ol元素进行了改良，为它添加了start和reverse属性。
ol新属性示例：
<body> <ol start="6" reversed> <!-- start重新定义了列表起始序号，reversed让列表项倒序排列 --> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> </ol> </body>
5.新增cite元素
作用：<cite> 表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题，通常以斜体显示而且会用a标签包裹。
cite元素示例：
<body> <!-- cite主要表示对文献的引用，显示为斜体 --> <p>隋唐五代史这本书中的很多内容参考了<cite>史记</cite>中的内容</p> </body>
6.新增progress元素
作用：<progress> 标签通常用来标示任务的进度。
属性：
max -- 表示任务总量
value -- 表示当前任务完成量
progress元素示例：
<body> <section> <h2>progress元素的使用</h2> <!-- max表示进度条总量，value表示当前的完成量 --> <p>任务进度<progress id="pro" max="100" value="0"><span>0</span>%</progress></p> <input type="button" value="开始" id="btn"> </section> <script> var timer = null var progress = document.getElementById(‘pro‘) var span = progress.getElementsByTagName(‘span‘)[0] var btn = document.getElementById(‘btn‘) function update() { if (progress.value < 100) { progress.value++ span.textContent = progress.value } else { clearInterval(timer) } } btn.onclick = function() { timer = setInterval(update, 100) } </script> </body>
7.新增meter元素
作用：<meter> 标签用来表示规定范围内的数值量，例如:磁盘使用量、投票比例等
属性：
max -- 表示范围的最大值
min-- 表示范围的最小值
high -- 表示被识为高级别的值的范围
low -- 表示被识为低级别的值的范围
value -- 当前元素所显示的值
optinum -- 表示当前度量最优值
meter元素示例：
<body> <!-- 这里low和high将meter范围分成了三部分，三部分显示的颜色也不同 --> <meter value="95" min="0" max="100" low="10" high="90" optimum="80"></meter> </body>
