4、新增和废除元素的认识
1)其他新增元素
1⃣️新增的figure元素与figcaption元素,是一种元素的组合,带有可选标题
- figcaption元素必须书写在figure元素内部,可以写在figure元素内的其他从属元素前面或后面。
- 一个figure元素内最多只允许放置一个figcaption元素。
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.
Fig.1 - A view of the pulpit rock in Norway.
2⃣️新增的details元素与summary元素
⚠️目前,只有 Chrome 和 Safari 6 支持
details元素是一种用于标识该元素内部的子元素 可以被展开、收缩显示的元素。
用来供用户开启关闭的交互式控件。任何形式的内容都能被放在
details元素具有一个布尔类型的属性——open:
✤ 当该值为true时,该元素内部的子元素应该被展开显示
✤ 当该属性值为false时,其内部的子元素应该被收缩起来不显示
✤ 该属性的默认值为false。
✳️
summary元素从属于details元素
✤ 与
✤ 标题是可见的,用户点击标题时,会显示出 details。
✤
✤ 如果details元素内没有summary元素,浏览器那你会提供默认的文字以供点击,例如“details”
Copyright 1999-2011.
- by Refsnes Data. All Rights Reserved.
All content and graphics on this web site are the property of the company Refsnes Data.
注意:目前,只有 Chrome 和 Safari 6 支持 details 标签。
3⃣️新增的mark元素
mark元素表示页面中需要突出显示或高亮显示的,对于 当前用户 具有参考作用的一段文字。
✳️主要目的:吸引 当前用户 的注意。
请在需要突出显示文本时使用 标签。
⚠️Internet Explorer 8 及更早版本不支持 标签。
mark元素是对原文内容有补充作用的一个元素,他应该用在一段原文作者不认为重要的,但是现在为了与原文作者不相关的其他目的而需要突出显示或者高亮显示的文字上面。
mark元素还有一个作用:在引用原文时,为了某种特殊的目的而把作者没有表示出来的内容重点表示出来。
Do not forget to buy milk today.
4⃣️新增的progress元素
下载进度:
注意: IE 9 或者更早版本的 IE 浏览器不支持 progress 标签。
注释:
✤ value属性表示已经完成了多少工作量,max属性表示总共有多少工作量。工作量的单位是随意的,不指定。
✤ 在设定属性点时候,value属性和max属性只能指定为有效的浮点数,value属性必须大于0,且小于或等于max的属性,max的属性必须大于0。
5⃣️新增的meter元素
展示给定的数据范围:
2/10
2 out of 10
60%
60%
optimum < low
optimum > high
low < optimum < high
注意: IE 浏览器不支持 meter 标签。
比如:磁盘使用情况,查询结果的相关性等。
⚠️注意:
属性
- value:在元素中特地地表示出来的 实际值 。默认为0,可以为浮点小数值。
- min:定义最小值,默认值是 0,不能小于0。
- max:定义最大值,默认值是 1。如果设定时小于min的值,则把min的值视为最大值。
- low:规定被 界定 为低的值的范围,必须<=high的值。
- high:规定被 界定 为高的值的范围。如果小于low的值,则把low的值视为high属性的值,如果大于max的值,则把max的值视为high的值。
- optimum:最佳值 必须在min与max之间,可以大于high的值。
如果该值高于 "high" 属性,则意味着值越高越好。
如果该值低于 "low" 属性的值,则意味着值越低越好。
optimumoptimum>high 表现为红色❤️
low
2)废除元素
1⃣️能使用CSS代替的元素:
basefont、big、center、font、s、strike、tt、u
标签用来制作更大的文本
标签规定文本的字体、字体尺寸、字体颜色
标签对那些不正确、不准确或者没有用的文本进行标识。
定义加删除线文本
标签定义打字机文本
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标题