前言：
这节课主要学习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>
HTML5--新增的页面元素(4)
原文地址：https://www.cnblogs.com/diweikang/p/8641896.html