人民邮电出版社《HTML5与CSS3实战指南》学习笔记
HTML5 是最新的 HTML 标准。
HTML5页面结构标签
-
header元素
header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他的内容,比如在header里面放置logo图片、搜索表单等等。
注意:一个页面内并没有限制header的出现次数,也就是说我们可以在同一页面内,不同的内容区块上分别加上一个header元素。 -
nav元素
nav元素表示页面中的导航链接部分。 -
article元素
article元素代表文档、页面或者应用程序中独立的、完整的、可以独自被外部引用的内容。 -
section元素
section元素标签用来表现普通的文档内容或应用区块。一个section通常由内容及其标题组成,但section元素标签并非一个普通的容器元素;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div元素而非section。 -
aside元素
aside元素可用于包含与其他内容不相关的部分。例如侧边栏、二级链表或广告区。 -
footer元素
footer元素表示页面或者页面中的一块区域的页脚。
HTML5新元素
1. hgroup
hgroup标签用于对标题进行组合,譬如将一个内容区块的标题及其副标题分为一组。
通常,将hgroup元素放在header元素中。
<header>
<hgroup>
<h1>主标题</h1>
<h2>副标题</h2>
</hgroup>
</header>
-
< hgroup >标签只是对标题进行组合,而对标题的样式没有影响。
-
在页面头部、文章头部、章节或者分段分块的头部,至少有两个主题标签,才可以使用< hgroup >标签;如果只有一个主题标签,则不需要使用。
2. figure和figcaption元素
< figure >标签规定独立的流内容(图像、图表、照片、代码等等)。
figure标签用来表示网页上一块独立的内容,可用于文章中的插图、照片、代码清单等。
figure元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
figure有一个子标签:figcaption
< figcation > 标签定义 figure 元素的标题(caption)。
“figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
注意:
- 如果可以将它从文档中删除,并且理解文档内容不受影响,则不必使用figure元素,可以使用其他元素代替。
- 如果图像或清单形成了文档流,并且移动到文本需要的地方需要重新措辞,那么最好选择其他元素代替。
<article>
<p>As you can see in <a href="#fig1">Figure 1</a> </p>
<figure id="fig1">
<figcaption>Screen Reader support</figcaption>
<img src="27858.jpg" alt="">
</figure>
</article>
3. mark
mark元素的主要功能是在文本中高亮显示某些字符,以引起用户注意。
mark 元素“表示文档中的一部分由于可能与用户当前活动有关,已被突出显示”。
不常用。最常见的是在搜索文章时,搜索关键词在搜索结果中突出显示。
<h1>yes, you can use <mark>HTML5</mark> today</h1>
效果:
4. progress和meter
-
progress元素
progress元素代表一个任务的完成进度。
这个元素有两个属性来表示当前任务的完成情况,value属性表示已经完成了多少工作量,max属性表示总共有多少<p> Status: <progress min='0' max="100" value="0" > <span>0</span>% </progress> Status: <progress min='0' max="50" value="25" > <span>50</span>% </progress> </p>
-
meter元素
meter元素标签用来表示范围已知且可度量的等级标量或分数值,如磁盘使用量比例、投票人数比例等。它有六个属性:
- value 属性值显示的是当前值,默认为0
- min:当前标量的最小值;如不做指定则为0
- max:当前标量的最大值;如不做指定则为1
- low:当前标量的低值区
- high:当前标量的高值区
- optimum:最佳值;其范围在最小值与最大值区间当中,并且可以处于高值区
<h1>以磁盘使用为例,展示 meter 元素的用法</h1> <p> Total current disk usage:(value低于low