人民邮电出版社《HTML5与CSS3实战指南》学习笔记

原创

已于 2022-05-18 17:05:57 修改 · 1.1k 阅读

标签

#html5 #html

于 2021-12-18 18:45:50 首次发布

本文介绍了HTML5中新增的页面结构标签如header、nav、article、section、aside、footer，以及hgroup、figure、figcaption、mark、progress和meter等元素。还探讨了HTML5表单的特性，包括required、placeholder、pattern属性，新的输入类型如search、email、url等，以及audio和video元素在多媒体处理中的应用。

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>
    Tot
```