本文详细介绍了HTML5中的行内标签、块级标签、表单标签和新特性，包括a标签、span标签、strong标签、img标签、div标签、p标签、标题标签、列表标签、form标签、input标签、audio标签、video标签以及HTML5的新表单类型和本地存储。学习这些基础知识对理解HTML5和前端开发至关重要。
目录
1.考点
2.关键
2.1.对知识熟练使用
2.2调试
3.行内标签
3.1.a标签
a 标签：
- 用于页面之间的跳转。
- 用于链接电话、邮箱等。
- 用于文档书签。
3.2.target 属性
在 a 标签中还有个 target 属性可以用来规定打开链接文档的位置，它有如下表所示的几种属性值。
| 属性值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 在相同的框架中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
其使用格式为：
<a target="_blank|_self|_top|_parent"></a>
我们来举个例子
新建一个 index5.html 文件，在文件中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
blank <a href="https://www.lanqiao.cn" target="_blank">蓝桥云课</a><br />
top <a href="https://www.lanqiao.cn" target="_top">蓝桥云课</a>
</body>
</html>
3.3.span
span 标签是用来组合文档中行内元素的，比如你在文档中写入一些文字，页面会以默认样式输出这些文字，若我们想给这段话中的某些词语添加不一样的字体颜色，这时我们可以用 span 标签去包裹这些词语，然后通过 span 标签去设置字体颜色。
其使用格式如下：
<span></span>
span 标签就像一个透明的盒子，我们可以把多个盒子放在架子的同一行。
span 标签本身没有特殊之处，若不结合 CSS 来使用的话，我们使用其标签就没有意义了。比如：我们的 body 标签中只有一对 span 标签和一些文字内容，可以看到这与不添加标签直接写入文字内容是一样的效果。
<span>1</span>
<span>2</span>
<span>3</span>
但当我们使用 CSS 给 span 元素加上背景颜色，同一行的元素就拥有了自己的独特气质。
<span style="background-color:cornflowerblue">1</span>
<span style="background-color: chartreuse;">2</span>
<span style="background-color: goldenrod;">3</span>
style 是设置 CSS 样式的属性，background-color 是设置元素背景颜色的属性，属性冒号后面的内容是背景颜色的属性值。
关于 CSS 样式属性，这属于后面学习的内容，同学们这里先了解一下，具体内容我们后面会细讲。
3.4.strong 标签的介绍
平时我们浏览网站，会发现网页上字的粗细是不同的，有时候为了让某些词句成为我们关注的焦点，我们会把文字加粗。
在 HTML 中，可以使用 strong 标签来给文字加粗。
使用格式如下：
<strong></strong>
例如：
<strong>塔克拉玛干大沙漠</strong>是中国最大的沙漠。
3.5.img 标签的介绍
在 HTML 中，我们用 img 标签来插入图片，它负责向页面中嵌入一幅图像。
准确来讲，img 标签并不会在页面中真正插入图像，而只是提供一个链接地址，通过链接来显示出图像。所以，img 标签创建的是被引用图像的占位空间。
其使用格式为：
<img src="图像 URL" alt="图像描述" />
属性说明如下：
src属性定义了图像的链接地址。alt属性则当图像无法显示时，替代显示的文本。
另外，在 img 标签里可以用 width 属性来设置图片的宽度，用 height 属性来设置图片的高度。
我们设置了固定的宽和高后，在不同大小的窗口所看到的图片大小就相同了。
例如：
<body>
<img
src="https://labfile.oss.aliyuncs.com/courses/4421/wijdan-mq-H5yiRXDUkto-unsplash.jpeg"
alt="礼物"
width="400px"
height="270px"
/>
</body>
3.6.align 属性的使用
同学们有没有发现，图片都是居左显示到页面上的，如果我们想让图片居中或者局右显示，该怎么办呢？
align 属性能用来规定如何根据周围的文本来排列图像的位置，其属性值如下所示：
| 属性值 | 说明 |
|---|---|
| top | 顶部对齐 |
| bottom | 底部对齐 |
| middle | 居中对齐 |
| left | 居左对齐 |
| right | 居右对齐 |
例如，我们让一张图片居左和居右显示在 index9.html 中写入以下代码。
使用以下命令获取需要的图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<img src="icons8-home-64.png" align="left" width="80" />
<img src="icons8-home-64.png" align="right" width="80" />
</body>
</html>
点击预览页面，实验效果如下：
注意：虽然大部分浏览器支持
align属性，但 HTML 4.0 不推荐使用该属性，并且 HTML 5 也不支持该属性了。由于我们还没有学习 CSS，所以讲解了该属性，同学们了解即可。
3.7.title 属性的使用
在 img 标签中，还可以使用 title 属性给元素增加额外的提示信息。什么意思呢？🤔
当你把鼠标移到元素上会显示出现一段提示文本。
3.8.总结
本节实验为大家介绍了常用的行内标签的用法，这里我们来总结一下。
a 标签：
- 用于页面之间的跳转。
- 用于链接电话、邮箱等。
- 用于文档书签。
span 标签没有固定的表现格式，它就像一个透明的盒子，当加入 CSS 代码时，它才会产生视觉上的变化。span 标签最大的特点时可以把很多标签放在同一行。
strong 标签用于给文字加粗。
img 标签用于在页面中显示图片。
学了这四个标签，你会发现这四种标签可以显示在同一行，这就是行内元素的特点了。在下面的内容中，我们还会学到块级元素，等学完块级元素我们就能理解为什么要这样给元素分类了。
4.块级标签
4.1.知识点
- div 标签
- p 标签
- 标题标签
- 列表标签
4.2.div
在 HTML 中，div 标签是最重要的一个块级元素，它可以是组合其他 HTML 元素的容器，相当于是个透明的盒子，可以把其他标签放在里面。
div 标签没有特定的含义，它主要是用于实现页面布局操作。如果与 CSS 一同使用，div 标签可用于对内容块设置样式属性。
同学们有没有发现这个特性有点像我们之前介绍的 span 标签，它们的区别在于 span 是行内元素，可以和其他元素共处一行，而 div 是块级元素，无论大小都不允许其他元素占自己的地盘,
4.3.p标签
我们在 Word 中写几段话，直接 return 就可以分段了，但是在 HTML 中，如果你在 body 中用此方法分段，会发现页面将几段话呈一段显示。例如：
那怎么办呢？
在 HTML 中为我们提供 p 标签来分段，添加 p 标签效果如下：
对于段落标签，有一个可选的属性 align，用于表示段落相对浏览器窗口在水平位置上的对齐方式。它有三个可取值，每个可取值的含义如表所示：
| 属性值 | 说明 |
|---|---|
| left | 段落左对齐 |
| right | 段落右对齐 |
| center | 段落居中对齐 |
注意：虽然大部分浏览器支持 align 属性，但 HTML 4.0 不推荐使用该属性，并且 HTML 5 也不支持该属性了。由于我们还没有学习 CSS，所以讲解了该属性，同学们了解即可。
4.4.标题标签
这里的标题标签不是我们之前讲过的 <title>，而是能够在页面上用于标题显示的 <hn> 系列标签。在 HTML 中一共有六级标题，用 <h1> ~ <h6> 来表示，其中 <h1> 的标题字号最大，依次递减。
在浏览器解析标题标签时，会将标题内容设为一个段落，字体设为黑体，字号大小根据 n 值的大小确定。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h1>
<h3>三级标题</h1>
<h4>四级标题</h1>
<h5>五级标题</h1>
<h6>六级标题</h1>
</body>
</html>
点击预览页面，实验效果如下：
从预览效果中我们可以看到，随着标题标签的级数增大，字体是越来越小的。
我们已经说过标题标签只有 h1~h6，这六种，那如果我们设置 hn，其 n > 6 会发生什么呢？🤔 空想是毫无用处的，我们用代码来测试一下吧！👻
新建 index3.html 文件，我们从 h1 写到 h8。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h1>
<h3>三级标题</h1>
<h4>四级标题</h1>
<h5>五级标题</h1>
<h6>六级标题</h1>
<h7>七级标题</h7>
<h8>八级标题</h8>
<p>段落标签</p>
</body>
</html>
点击预览页面，实验效果如下：
从效果中，我们可以看出 h7、h8 标签中的内容显示在一行，其字体大小是默认的文本字体大小。
4.5.列表标签
列表标签一共有三种，分别是：
- 无序列表
- 有序列表
- 自定义列表
4.5.1.有序列表
有序列表就是使用项目符号来标识项目，比如日常我们需要步骤化的操作，可以使用有序列表来表示。
其基本用法为：
<ol>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ol>
从上面截图可以看到有序列表的默认是从 1 开始的数字排序。我们可以使用 type 属性来改变排序符号，取值如下所示：
| 属性值 | 说明 |
|---|---|
| A | 用大写字母作为排序符号 |
| a | 用小写字母作为排序符号 |
| I | 用大写罗马字符作为排序符号 |
| i | 用小写罗马字符作为排序符号 |
| 1 | 用数字作为排序符号 |
我们默认都是从第一个字母或数字开头来排序的，其实我们可以通过 start 属性，来自定义起始排序符号。start 属性必须要配合 type 属性来使用。例如：
<!--从第 4 个大写罗马数字开始排序-->
<ol type="I" start="4">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ol>
4.5.2.无序列表的使用
在 HTML 文档中，所谓无序列表，是指以实心圆 ●（默认）、空心圆 ○、实心方块 ■ 开头的，没有顺序的列表项目。比如，有时候我们会用无序列表的形式来做一个总结，这样会让内容看起来更加清晰。
基本用法为：
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
我们使用 type 属性可以修改列表开头的符号，其取值如下：
| 属性值 | 说明 |
|---|---|
| disc | 实心圆 ● |
| circle | 空心圆 ○ |
| square | 实心方块 ■ |
4.5.3.自定义列表的使用
自定义列表跟前两种列表有些区别，用 dl 标签表示自定义列表，其中的 dt 是代表列表项，而 dd 是列表项的描述。比如：我们需要对列表项的内容进行解释的时候，就可以使用自定义列表了。
基本用法为：
5.表单标签
5.1.知识点
- form 标签
- input 标签
- select 标签
- option 标签
5.2.认识 form 标签
表单是用来描述需要用户输入的页面内容，在用户输入具体信息后，提交到指定位置进行处理。例如下面蓝桥杯大赛官网的登录页面。
当我们正确填写输入框的信息后，点击「登录」按钮，会在某处验证你的信息是否正确，若正确则登录成功，跳转到登录后的页面，否则登录失败。
在 HTML 文档中，使用 form 标签来进行表单提交。form 标签有两个重要的属性，action 和 method 属性，其中 action 的属性值是表单提交的地址，method 的属性值是提交的方法。
其基本语法为：
<form action="表单提交地址" method="提交方法"></form>
method 属性规定了表单提交方式，最常用的有两种方式，分别是 GET 和 POST。其中 GET 是把表单中的参数放置在 HTTP 请求的头部发送给服务器，而 POST 是将请求参数置于请求体内发送。这部分内容属于 JavaScript 的内容，同学们先了解即可，在后面的章节会详细讲解。
5.3.input 标签
input 标签表示表单，其中它有不同的属性，用于表示不同的表单类型。
这里给大家介绍是四种类型的表单：
- 文本类表单
- 选择类表单
- 文件上传类表单
- 按钮表单
5.3.1.文本类表单元素
以文本框为代表的表单元素称之为文本类元素。
其基本使用格式为：
<input type="text" />
例如，填写用户名的输入框就适合用文本类型的输入框。
新建一个 index.html 文件，在其中写入以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>用户名：<input type="text" /></form>
</body>
</html>
点击预览页面，效果如下：
5.3.2.选择类表单元素
选择类表单元素是指单选框和复选框。
- 单选框就是给出多个选项只能选择其中一个。
- 复选框就是给出多个选项可以选择多个。
单选框和复选框的使用格式如下所示：
<!--单选框-->
<input type="radio" name="选项名" value="提交值" />
<!--复选框-->
<input type="checkbox" name="选项名" value="提交值" />
注意：使用单选框时，每个选项一定要设置相同的 name 值，否则就没有单选的效果。
例如，选择性别的输入框就适合用单选框，选择兴趣爱好的输入框就适合用复选框。
新建一个 index1.html 文件，在其中写入以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
性别：<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女 <br />
爱好：<input type="checkbox" name="hobby" value="basketball" />篮球
<input type="checkbox" name="hobby" value="football" />足球<br />
<input type="reset" />
</form>
</body>
</html>
点击预览页面，效果如下：
⭐️ 对于 radio 类型元素来说，若 name 属性的取值相同，可以实现单选的效果，但 checkbox 不会因为 name 属性的取值相同变成单选。
上面代码中的 type="reset" 是重置按钮，可以把表单中已填写的信息给清除掉。
5.2.3.文件和发送类型表单
想象一个场景，当我们填写一个电子简历需要上传附件文件到表单上，那么我们需要一个「上传文件」的按钮，选择目标文件后，点击「上传」按钮，上传到页面上。
在 HTML 中，我们使用 type="file" 表示文件类型表单元素，其使用格式为：
<input type="file" name="表单名字" accept="上传文件的格式" />
在 HTML 中，我们使用 type="submit" 表示发送类型表单元素，其使用格式为：
<input type="submit" name="表单名字" value="表单名" />5.2.4.下拉列表
下拉列表就是一个鼠标放在目标框中，会出现多种选择的列表。例如：
在 HTML 中，通过 select 和 option 标签可以实现下拉列表框，select 标签用于显示可供用户选择的下拉列表，其中的每个选项都由 option 标签标识。
其语法格式为：
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>select 有两个常用属性，如下所示：
| 属性 | 描述 |
|---|---|
| multiple | 设置下拉列表可以选择多项。 |
| size | 设置下拉列表选择几个表项。 |
option 有两个常用属性，如下所示：
| 属性 | 描述 |
|---|---|
| selected | 设置是否被选中。 |
| value | 设置列表项的默认值。 |
6.HTNL5新特性
6.1.知识点
- 基本语义化标签
- 多媒体标签
- HTML5 新属性
6.2.基本语义化标签
语义化标签就是把 HTML 文档中的元素划分到不同区域，每个区域有自己的含义。
我们可以把语义化标签想成一个房子里的不同区域，一套房子，有客厅、饭厅、卧室、厕所等，它们都属于房子里的一部分空间，不同的划分区域有不同的用处，比如，饭厅是用来吃饭的，我们通常不会在厕所里吃饭。
在 HTML5 中，提供了如下图所示的语义化标签，让我们可以更直观地看到页面的结构。
标签说明：
header标签是头部区域。nav标签是导航区域。article标签是内容区域。section标签是文档中部分内容区域。aside标签是侧边内容栏区域。footer标签是底部信息区域。
例如，环球科学的首页，我们可以用语义化标签来划分一下结构。
由于这些标签本身只有一个块级元素的特点，如果不加入 CSS 样式，是没有任何效果的，这里我们不做练习，等学完 CSS 我们再进行练习。
6.3.多媒体标签
多媒体标签就是用于在页面中嵌入音频和视频的标签，主要有以下两个标签：
- audio 标签
- video 标签
6.3.1.audio 标签
在 HTML5 中，使用 audio 标签来播放声音文件或者音频流，该标签支持 Ogg、MP3、WAV 等音频格式。
其使用格式如下：
<audio src="URL" controls></audio>
参数说明：
src属性用于指定要播放的声音文件。controls是controls="controls"简写形式，用于提供播放、暂停和音量控件。
除了上面两种属性，audio 标签还有以下属性可用：
autoplay属性：音频自动播放。loop属性：音频自动重复播放。preload属性：用来缓冲audio标签的大文件，它有三个属性值 none（不缓冲）、auto（缓冲音频文件）、metadata （缓冲文件的元数据）。
source 标签
audio 标签还可以通过子标签 source 来进行多数据源的设置。
其使用格式如下：
<audio>
<source src="URL" />
</audio>
一个 audio 标签可以包含多个 source 标签，当播放器无法识别当前格式的播放源时会调用下一个 source 播放源进行播放。
source 标签是用来指定多个文件，给不同的浏览器提供可支持的编码格式。
例如：
<audio>
<source src="filename.opus" />
<source src="filename.ogg" />
<source src="filename.mp3" />
</audio>
6.3.2.video 标签
在有些网站的页面上会放上一些视频，我们点击视频就会播放，那么这是怎么实现的呢？🤔
在 HTML 中，提供了 video 标签向文档中嵌入媒体播放器。
语法格式如下所示：
<video controls>
<source src="URL" />
</video>
我们举个例子来看看。😉
在终端输入以下命令来获取一个 .mp4 的文件。
wget https://labfile.oss.aliyuncs.com/courses/3582/video.mp4
新建一个 index1.html 文件，在其中写入以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<video muted controls>
<source src="video.mp4" />
</video>
</body>
</html>
启动 8080 端口，打开 Web 服务，让我们一起看个动画片吧 😎 ～
同学们有没有注意到打开页面视频默认是静音状态？这是因为我加入了 muted 属性，如果你去掉该属性视频默认是有声播放。
给视频加上封面
有时候我们不想让别人一眼看出播放的视频内容，为了保持神秘，吊人胃口，我们可以给视频加上一个封面。
我们在 video 标签中加入 poster 属性即可给视频添加封面。
使用格式如下：
<video poster="URL"></video>
6.4.新表单类型-email
email 类型用于邮件地址的输入，很明显，它只适用于邮箱输入。
使用格式如下：
<input type="email" />
我们来练习一下吧！
新建一个 index3.html 文件，在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
email: <input type="email" />
<input type="submit" value="提交" />
</form>
</body>
</html>
点击预览页面，效果如下：
从上面的效果我们可以看出，如果你输入的邮箱格式不正确，当你点击提交按钮时，会提醒你格式错误。
6.5.新表单类型-url
url 类型是专门用来输入网址的。
使用格式如下：
<input type="url" />
我们来练习一下吧！
新建一个 index4.html 文件，在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
url: <input type="url" />
<input type="submit" value="提交" />
</form>
</body>
</html>
点击预览，效果如下：
从上图可以看出，如果你输入的字符不是一个网址，点击提交后，会提示你这个输入框需要输入一个网址。
6.6.新表单类型-number
number 类型用于数字的输入。
number 类型表单有以下属性。
| 属性 | 描述 |
|---|---|
| max | 输入框允许的最大值。 |
| min | 输入框允许的最小值。 |
| step | 合法的数字间隔，例如 step=2，则合法为：2、4、6、8。 |
| value | 默认值。 |
例如：
<input type="number" value="5" step="2" />
设置默认值为 5，步长为 2，每点 ⬆️ 一次，数字 + 2。
6.7.新表单类型-range
range 类型用于包含一定范围内数值的输入。
其使用格式为：
<input type="range" />
接下来我们练习一下吧！😁
新建一个 index6.html 文件，在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
number: <input type="range" />
<input type="submit" value="提交" />
</form>
</body>
</html>
点击预览页面，效果如下：
6.8.新表单类型-date
date 是用来选取年、月、日的类型。
其使用格式为：
<input type="date" />
datetime-local 是用来选取年、月、日和本地时间。
其使用格式为：
<input type="datetime-local" />
这里我们用 date 和 datetime-local 两个日期选择控件来做一下练习。
新建一个 index7.html 文件，在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
date： <input type="date" /> <br />
datetime-local：<input type="datetime-local" /> <br />
<input type="submit" value="提交" />
</form>
</body>
</html>
点击预览页面，实验效果如下：
6.9.新表单类型-search
search 类型的 input 标签提供用于输入搜索关键字的文本框，从外观看 search 和 text 是一样的，功能也是相近的可以输入任意的字符串。
使用格式如下：
<input type="search" />
我们来练习一下吧！💪
新建 index8.html 文件，在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
search: <input type="search" />
<input type="submit" value="提交" />
</form>
</body>
</html>
点击预览页面，效果如下：
从例子中，同学们似乎也不能从外观和功能上能发现 search 类型和 text 类型的区别。那么我们为何还要学 search 类型呢？🤔
如果使用不同的浏览器去看，就会发现有细微的差异，比如 Chrome 浏览器给 search 类型的输入框提供了清空按钮。如果在移动端的话，虚拟键盘会根据不同类型的输入框给出不同的反应。还有就是起到语义化的作用，我们一眼能够明白这里的 input 是起到搜索的效果。
6.10.新表单类型-color
color 类型是 input 标签提供的专门用于设置颜色的文本框。通过单击文本框可以打开一个调色板，用户可以在面板中选择需要的颜色。不同的操作系统打开的拾色面板也不相同。
我们来练习一下吧！💪
index9.html 文件，在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
color: <input type="color" />
<input type="submit" value="提交" />
</form>
</body>
</html>
点击预览页面，实验效果如下：
6.11.新属性-form
HTML5 中 input 标签新增了一个 form 属性，通过该属性可以将表单元素绑定到指定的 form 标签上，这样就可以灵活进行布局，同时一个表单元素可以从属于多个表单，这就让表单和表单元素的组合变得更加灵活。
我们来练习一下吧！💪
新建 index10.html 文件，在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form id="myForm1" action="#" method="GET"></form>
<form id="myForm2" action="#" method="POST"></form>
提交到 myForm1：<input type="text" form="myForm1" name="myForm1" />
<input type="submit" value="提交" form="myForm1" />
提交到 myForm2：<input type="text" form="myForm2" name="myForm2" />
<input type="submit" value="提交" form="myForm2" />
</body>
</html>
点击预览页面，实验效果如下：
我们把第一个 text 类型的输入框绑定到 myForm1 上，我们把第二个 text 类型的输入框绑定到 myForm2 上。
6.12.新属性-autofocus
打开一个页面，当某个文本框需要获得光标焦点时，可以使用 autofocus 属性来实现。
例如，百度搜索页面，用户的鼠标点击搜索栏会获得光标焦点，用户直接输入需要搜索的内容即可，这种设置可以很好地提高用户体检。
我们来练习一下吧！💪
新建 index11.html 文件，在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
<input type="text" autofocus /> <input type="submit" value="搜索" />
</form>
</body>
</html>
点击预览页面，效果如下：
6.13.新属性-autocomplete
autocomplete 属性是用来规定表单是否应该启用自动完成功能。
自动完成功能就是当用户输入一次数据过后，再次输入相同的数据时可以自动补全内容。
autocomplete 属性包括两个属性值：on、off。
其语法格式为：
<form autocomplete="on"></form>
on 为默认值，意思是启用自动完成功能。
<form autocomplete="off"></form>
off 为禁用自动完成功能。
我们来练习一下吧！💪
新建 index12.html 文件，在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form autocomplete="on">
您最喜欢前端技术: <input type="text" list="selectList" />
<datalist id="selectList">
<option>html</option>
<option>css</option>
<option>js</option>
<option>vue</option>
</datalist>
<input type="submit" />
</form>
</body>
</html>
点击预览页面，效果如下：
6.14.新属性-placeholder
placeholder 属性规定可描述输入字段预期值的提示信息，也就是说设置了该属性，它会提示用户设置的输入值。
其语法格式为：
<input placeholder="text" />
我们来练习一下吧！💪
新建 index.html 文件，在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
<input type="text" placeholder="姓名" />
<input type="text" placeholder="性别" />
</form>
</body>
</html>
打开预览页面，效果如下。
7.HTML5本地存储
7.1.知识点
- localStorage
- sessionStorage
7.2.localStorage
localStorage 对象是 HTML 5 新增的特性，主要用于本地存储。
说到在本地存储数据，大家第一个联想到的应该是 cookie 吧。
那么，它们有什么区别呢？👇
localstorage 与 cookie 的区别：
localStorage解决了早期使用cookie存储遇到的存储空间不足的问题( 每条cookie的存储空间为 4k )；localStorage一般浏览器支持的是 5M 大小，具体存储大小根据浏览器的不同会有所不同。- 并且相较于
cookie而言，localStorage中的信息不会被传输到服务器。
好了，接下来让我们来看看如何使用 localStorage 吧！
localStorage 对象提供的方法如下：
| 方法 | 说明 |
|---|---|
| setItem(key,value) | 保存数据到本地存储 |
| getItem(key) | 从本地存储获取数据 |
| removeItem(key) | 根据指定 key 从本地存储中移除数据 |
| clear() | 清除所有保存数据 |
新建一个 index.html 文件，然后在文件中写入以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
// 语句 1： 保存数据到本地存储
localStorage.setItem("ExpireTime", "1527592757");
localStorage.UserId = "2021008";
// 语句 2： 根据指定名称获取本地存储中的数据
var expireTime = localStorage.getItem("ExpireTime");
console.log(expireTime);
// 语句 3： 根据指定名称从本地存储中移除
localStorage.removeItem("ExpireTime");
// 语句 4： 清除本地存储中所有数据
localStorage.clear();
</script>
</head>
<body></body>
</html>
最后，启动 8080 端口，打开 Web 服务。
接下来，根据让我们根据执行语句的顺序（对照注释中标注的语句序号阅读）依次来看执行的效果。
执行语句 1
语句 1 中的两种方式都可以完成数据的存储。
执行完成后，打开浏览器开发人员调试工具，“Application” 面板下，左侧菜单项 “Storage” → “localStorage”。
即可看到所保存的数据，如下所示：
执行语句 2
使用
getItem()方法，根据名称获取value值，打开浏览器开发人员调试工具，找到Console面板。
即可看到输出结果：
执行语句 3
使用
removeItem()方法根据指定名称删除数据；
执行完成后，再次打开浏览器开发人员调试工具，找到 “Application” 面板下，左侧菜单项 “Storage” → “localStorage”。
效果如下：
执行语句 4
使用
Clear()方法清空所有数据；
执行完成后，再次打开浏览器开发人员调试工具，找到 “Application” 面板下，左侧菜单项 “Storage” → “localStorage”。
效果如下：
7.3.sessionStorage
localStorage 和 sessionStorage 对象作为 HTML5 新增的特性，都可以用来存储客户端临时信息，并且二者存储的数据格式均为 key/value 键值对数据。
sessionStorage 对象提供的方法与 localStorage 对象相同，具体如下：
| 方法 | 说明 |
|---|---|
| setItem(key,value) | 保存数据到本地存储 |
| getItem(key) | 从本地存储获取数据 |
| removeItem(key) | 根据指定 key 从本地存储中移除数据 |
| clear() | 清除所有保存数据 |
那么localStorage 和 sessionStorage 二者有什么区别呢？🤔️
💡 他们的区别在于：
localStorage的生命周期是永久的，除非用户清除 localStorage 信息，否则这些信息将永远存在。
sessionStorage的生命周期是临时的，一旦当前窗口或标签页被关闭了，那么通过它存储的数据也就被清空了。
了解了 sessionStorage 对象的概念后，接下来让我们一起学习下 sessionStorage 的使用吧！
新建一个 index1.html 文件，在文件中写入以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
// 语句 1： 保存数据到本地存储
sessionStorage.setItem("ShopId", "SH1290333211");
sessionStorage.ShopNumber = "10";
// 语句 2： 根据指定名称获取本地存储中的数据
var ShopId = sessionStorage.getItem("ShopId");
console.log(ShopId);
// 语句 3： 根据指定名称从本地存储中移除
sessionStorage.removeItem("ShopId");
// 语句 4： 清除本地存储中所有数据
sessionStorage.clear();
</script>
</head>
<body></body>
</html>
启动 8080 端口，打开 Web 服务，接下来，根据执行语句顺序（对照注释中标注的语句序号阅读）依次来看执行效果。
执行语句 1
语句 1 中的两种方式都可以完成数据的存储。
当语句 1 执行后，打开浏览器开发人员调试工具，找到 Application 面板下，左侧菜单项 Storage → sessionStorage，即可看到所保存的数据。
🌟 需要注意的是，上图中所出现的 Key 为 IsThisFirstTime_Log_From_LiveServer 的数据是由于启动 Web 服务，使用了 LiveServer 所产生，这里不用进行关注。
执行语句 2
语句 2 中使用
getItem()方法，根据名称获取 value 值，打开浏览器开发人员调试工具，找到 Console 面板，即可看到输出结果。
执行语句 3
语句 3 中使用
removeItem()方法根据指定名称删除数据，执行完成后，再次打开浏览器开发人员调试工具，找到 “Application” 面板下，左侧菜单项 “Storage” → “sessionStorage”，效果如下。
执行语句 4
语句 4 中使用
Clear()方法清空所有数据，执行完成后，再次打开浏览器开发人员调试工具，找到 “Application” 面板下，左侧菜单项 “Storage” → “sessionStorage”，效果如下。
7.4.实验总结
在本节实验中给大家介绍了 HTML5 中本地存储两种 API，分别是 localStorage 和 sessionStorage。
虽然使用 localStorage 和 sessionStorage 对象都可以轻松进行数据的存储与取出，但是两者之间也是有区别的，它们的区别在于页面刷新后，对于 sessionStorage 来说，浏览器会清空数据，而对于 localStorage，数据仍然保留在浏览器中。
扫一扫
2226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
