4、新增和废除元素的认识
1）其他新增元素
1⃣️新增的figure元素与figcaption元素,是一种元素的组合，带有可选标题
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
<figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。
<figcaption>元素被用来为 <figure> 元素定义标题,它属于figure元素
- figcaption元素必须书写在figure元素内部，可以写在figure元素内的其他从属元素前面或后面。
- 一个figure元素内最多只允许放置一个figcaption元素。
<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
figure figcaption 运行结果
2⃣️新增的details元素与summary元素
⚠️目前，只有 Chrome 和 Safari 6 支持 <details> 标签
details元素是一种用于标识该元素内部的子元素 可以被展开、收缩显示的元素。
用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。
details元素具有一个布尔类型的属性——open：
✤ 当该值为true时，该元素内部的子元素应该被展开显示
✤ 当该属性值为false时，其内部的子元素应该被收缩起来不显示
✤ 该属性的默认值为false。
✳️<details> 元素的内容对用户是不可见的，除非设置了 open 属性
summary元素从属于details元素
✤ 与 <summary>标签配合使用可以为 details 定义标题
✤ 标题是可见的，用户点击标题时，会显示出 details。
✤ <summary> 元素应该是 <details> 元素的第一个子元素
✤ 如果details元素内没有summary元素，浏览器那你会提供默认的文字以供点击，例如“details”
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
<p><b>注意：</b>目前，只有 Chrome 和 Safari 6 支持 details 标签。</p>
内部元素收缩
内部元素展开
3⃣️新增的mark元素
mark元素表示页面中需要突出显示或高亮显示的，对于 当前用户 具有参考作用的一段文字。
✳️主要目的：吸引 当前用户 的注意。
请在需要突出显示文本时使用 <mark> 标签。
⚠️Internet Explorer 8 及更早版本不支持 <mark> 标签。
mark元素是对原文内容有补充作用的一个元素，他应该用在一段原文作者不认为重要的，但是现在为了与原文作者不相关的其他目的而需要突出显示或者高亮显示的文字上面。
mark元素还有一个作用：在引用原文时，为了某种特殊的目的而把作者没有表示出来的内容重点表示出来。
<p>Do not forget to buy <mark>milk</mark> today.</p>
mark
4⃣️新增的progress元素
<body>
下载进度：
<progress value="22" max="100">
</progress>
<p><strong>注意：</strong> IE 9 或者更早版本的 IE 浏览器不支持 progress 标签。</p>
</body>
progress 任务进度表示
<progress> 标签代表一个任务（进程）的完成进度，这个进度可以是不确定的
可以用0到某个最大数字（比如100）之间的s数字来表示准确的进度情况（比如百分比）
提示：请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。
注释：<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。表示度量衡，请使用 <meter>标签代替。
✤ value属性表示已经完成了多少工作量，max属性表示总共有多少工作量。工作量的单位是随意的，不指定。
✤ 在设定属性点时候，value属性和max属性只能指定为有效的浮点数，value属性必须大于0，且小于或等于max的属性，max的属性必须大于0。
5⃣️新增的meter元素
<p>展示给定的数据范围：</p>
2/10
<meter value="2" min="0" max="10">2 out of 10</meter><br>
60%
<meter value="0.6">60%</meter><br>
optimum < low
<meter value="43.9" min="0" max="119" low="50" high="70" optimum="11"></meter><br>
optimum > high
<meter value="43.9" min="0" max="119" low="50" high="70" optimum="88"></meter><br>
low < optimum < high
<meter value="43.9" min="0" max="119" low="50" high="70" optimum="50"></meter><br>
<p><strong>注意：</strong> IE 浏览器不支持 meter 标签。</p>
meter
<meter> 标签定义度量衡。仅用于已知最大和最小值的度量
比如：磁盘使用情况，查询结果的相关性等。
⚠️注意： <meter> 不能作为一个进度条来使用， 进度条是 <progress>标签。
属性
- value：在元素中特地地表示出来的 实际值 。默认为0，可以为浮点小数值。
- min：定义最小值，默认值是 0，不能小于0。
- max：定义最大值，默认值是 1。如果设定时小于min的值，则把min的值视为最大值。
- low：规定被 界定 为低的值的范围，必须<=high的值。
- high：规定被 界定 为高的值的范围。如果小于low的值，则把low的值视为high属性的值，如果大于max的值，则把max的值视为high的值。
-
optimum：最佳值 必须在min与max之间，可以大于high的值。
如果该值高于 "high" 属性，则意味着值越高越好。
如果该值低于 "low" 属性的值，则意味着值越低越好。
optimum<low 表现为绿色💚
optimum>high 表现为红色❤️
low<optimum<high 表现为黄色💛
2）废除元素
1⃣️能使用CSS代替的元素：
basefont、big、center、font、s、strike、tt、u
<basefont> 标签定义文档中所有文本的默认颜色、大小和字体。
<big> 标签用来制作更大的文本
<center> 对其所包括的文本进行水平居中
<font> 标签规定文本的字体、字体尺寸、字体颜色
<s> 标签对那些不正确、不准确或者没有用的文本进行标识。
<strike> 定义加删除线文本
<tt> 标签定义打字机文本
2⃣️不再使用frame框架
对于frameset元素、frame元素与noframes元素，由于frame框架对页面可用性存在负面影响，在html5里面已经不支持frame框架，只支持iframe框架，同时废除以上这三个元素。
3⃣️只有部分浏览器支持的元素
applet元素、bgsound、blink、marquee元素
- bgsound元素、marquee元素，只被IE浏览器支持，所以在HTML5里面被废除！
- applet元素可以由embed元素或者object元素代替
- bgsound元素由audio元素代替
- marquee可以使用javascript来代替！
4⃣️其他被废除的元素
- rb 使用ruby元素代替
- acronym 使用abbr元素代替
- dir 使用ul元素代替
- inindex 使用form元素与input元素相结合的方式代替
- listing 使用pre元素代替
- xmp 使用code元素代替
- nextid 使用GUIDS代替
- plaintext 使用“text/plian” MIME类型代替
3）Html5大纲
1⃣️HTML5大纲上
（1）在HTML5中，可以使用之前我们所学习的结构元素来编排一份网页大纲
我们可以通过这个网页大纲来了解网页中具有那些内容，网页中以什么样的形式来组织这些内容有更清楚的认识。
（2）HTML5大纲分析工具
http://gsnedders.html5.org/outliner
（3）分析一个网页的大纲！
♦️找到出现 Untitled Section 的原因并解决！
（4）header元素可以做大纲吗？
（5）在header元素中用图片来生成大纲的方法！
（6）关于nav元素和aside元素。
2⃣️HTML5大纲下
网页大纲的编排规则
可以分为“显式编排”和“隐式编排”两种方式。
（1）显式编排
显式编排 指明确使用section元素进行分块，每个内容区块内使用标题（h1~h6）
（2）隐式编排
隐式编排 指不使用section元素进行明确的区块划分，而是根据标题元素h1-h6的级别进行自动创建区块。
（3）标题分级
不同的标题有不同的级别，在（h1-h6）中h1的级别最高，而h6的级别最低。所以在隐式编排的情况下就会按照以下规则生成！
- 如果出现新的标题比上一个标题级别低，那么将生成下级内容区块！
- 如果新出现的标题比上面出现的一个标题级别高或者级别相同，那么就生成新的内容区块！
（4）不同的内容区块可以使用相同级别的标题
父内容区块与子内容区块都可以使用相同级别的H1标题
网友评论