html学习易忘点-学习十四届蓝桥杯（Web 应用开发）一站通关【大学组】的自用笔记

real_Moke

已于 2024-04-10 20:34:50 修改

阅读量354

点赞数 10

文章标签：笔记 html html5 前端学习

于 2024-03-20 21:35:25 首次发布

本文链接：https://blog.csdn.net/m0_68247693/article/details/136889418

版权

a标签

基本使用 href=“URL”

在 HTML 中，使用 a 标签可以实现这一功能，它被称为超链接标签，常用于网页之间的跳转、设置文档书签，以及链接电话、邮箱等。

其基本使用格式如下：

<a href="URL"></a>

链接邮箱和电话

a 标签除了可以跳转到其他页面，还可以用于 创建 email 链接、电话链接 等。

使用格式如下：

<a href="mailto:邮箱地址"></a> 
<a href="tel:电话号码"></a>

书签文档

要 通过超链接的方式访问同一页面的某一位置内容 ，那么首先要给该位置建立一个书签。

使用以下语法定义书签：(跳转的部分)

<a name="书签名称">文字</a>

定义了书签后，链接到该书签的超链接（点击的部分），其基本语法为：

<a href="#书签名称">链接点</a>

name 中定义的书签名称与 href 中 # 号后面的书签名称相同。

target属性

在 a 标签中还有个 target 属性可以用来规定打开链接文档的位置，它有如下表所示的几种属性值。

属性值	描述
_blank	在新窗口中打开被链接文档。
_self	在相同的框架中打开被链接文档。
_top	在整个窗口中打开被链接文档。
_parent	在父框架集中打开被链接文档。

其使用格式为：

<a target="_blank|_self|_top|_parent"></a>

我们来举个例子～

<!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>
    self <a href="https://www.lanqiao.cn" target="_self">蓝桥云课</a><br>
    top <a href="https://www.lanqiao.cn" target="_top">蓝桥云课</a><br>
    parent <a href="https://www.lanqiao.cn" target="_parent">蓝桥云课</a>
  </body>
</html>

总结：a、span、strong、img

a 标签：

用于页面之间的跳转。
用于链接电话、邮箱等。
用于文档书签。

span 标签没有固定的表现格式，它就像一个透明的盒子，当加入 CSS 代码时，它才会产生视觉上的变化。span 标签最大的特点时可以把很多标签放在同一行。

strong 标签用于给文字加粗。

img 标签用于在页面中显示图片。

学了这四个标签，你会发现这四种标签可以显示在同一行，这就是行内元素的特点了。

列表标签

有序列表 `<ol>`

有序列表（ordered list）就是使用项目符号来标识项目，比如日常我们需要步骤化的操作，可以使用有序列表来表示。li的全称是：list item。

其基本用法为：

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

无序列表 `<ul>`

在 HTML 文档中，所谓无序列表（unordered list），是指以实心圆 ●（默认）、空心圆 ○、实心方块 ■ 开头的，没有顺序的列表项目。比如，有时候我们会用无序列表的形式来做一个总结，这样会让内容看起来更加清晰。

基本用法为：

<ul>
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ul>

项目一
项目二
项目三

我们使用 type 属性可以修改列表开头的符号，其取值如下：

属性值	说明
disc	实心圆 ●
circle	空心圆 ○
square	实心方块 ■

自定义列表 `<dl>`

自定义列表（definition lists）跟前两种列表有些区别。

用 dl 标签表示自定义列表（definition lists），
其中的 dt 是代表列表项（definition term），
而 dd 是列表项的描述（definition description）。

比如：我们需要对列表项的内容进行解释的时候，就可以使用自定义列表了。

基本用法为：

<dl>
  <dt>列表项一</dt>
  <dd>列表项一的描述</dd>
  <dt>列表项二</dt>
  <dd>列表项二的描述</dd>
</dl>

列表项一

列表项一的描述

列表项二

列表项二的描述

在开发过程中，一般使用这个组合标签来实现图文混编的功能。例如既有图片又有描述的商品列表，就可以使用这个组合标签来实现。

总结：div、p、hn、ul、ol、dl

行内标签是可以排列在一行显示到页面上，而块级标签不能在一行显示。

div 标签没有特定的含义，它主要是用于实现页面布局操作。如果与 CSS 一同使用，div 标签可用于对内容块设置样式属性。

p 标签用于对文本内容分段，因为我们不能像在 word 里编辑文本那样使用回车来换行。

<hn> 系列标题标签，在 HTML 中一共有六级标题，用 <h1> ~ <h6> ，在浏览器解析标题标签时，会将标题内容设为一个段落，字号大小会根据 n 值的大小来确定。

最后给大家介绍了三种列表标签，分别是无序列表（ul）、有序列表（ol）、自定义列表（dl）。

input 标签

这些内容基本上都写在<form>标签里

文本类表单元素 type=“text”

其基本使用格式为：

<input type="text" />

例如，填写用户名的输入框就适合用文本类型的输入框。

<!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>

点击预览页面，效果如下：

选择类表单元素

选择类表单元素是指单选框和复选框。

单选框就是给出多个选项只能选择其中一个。
复选框就是给出多个选项可以选择多个。

单选框和复选框的使用格式如下所示：

<!--单选框-->
<input type="radio" name="选项名" value="提交值" />
<!--复选框-->
<input type="checkbox" name="选项名" value="提交值" />

注意：使用单选框时，每个选项一定要设置相同的 name 值，否则就没有单选的效果。

拓展：input 的 name 属性的作用？（总结）

例如，选择性别的输入框就适合用单选框，选择兴趣爱好的输入框就适合用复选框。

<!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” 是重置按钮，可以把表单中已填写的信息给清除掉。

文件和发送类型表单 type=“file”

想象一个场景，当我们填写一个电子简历需要上传附件文件到表单上，那么我们需要一个「上传文件」的按钮，选择目标文件后，点击「上传」按钮，上传到页面上。

在 HTML 中，我们使用 type="file" 表示文件类型表单元素，其使用格式为：

<input type="file" name="表单名字" accept="上传文件的格式" />

例如：

<input type="file" name="img" accept="image/gif, image/jpg">

显示如下图：
选择前

如果选择了一个文件会变成：
选择后

在 HTML 中，我们使用 type="submit" 表示发送类型表单元素，其使用格式为：

<input type="submit" name="表单名字" value="表单名" />

例如：

<input type="submit" name="upload" value="上传">

显示如下图：

练习：

<!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>
      <p><input type="file" name="img" accept="image/gif, image/jpg" /></p>
      <p><input type="submit" name="upload" value="上传" /></p>
    </form>
  </body>
</html>

点击预览页面，效果如下：

在上面代码中，我们只允许上传 jpg 或者 gif 类型的文件，如果选择其他类型的文件，我们从上图可以看出窗口的「打开」按钮是灰色的。

下拉列表

这些内容基本上都写在<form>标签里

下拉列表就是一个鼠标放在目标框中，会出现多种选择的列表。例如：

在 HTML 中，通过 select 和 option 标签可以实现下拉列表框。
select 标签用于显示可供用户选择的下拉列表，
其中的每个选项都由 option 标签标识。

其语法格式为：

<select>
  <option>选项一</option>
  <option>选项二</option>
  <option>选项三</option>
</select>

效果如下图：

select 有两个常用属性，如下所示：

属性	描述
multiple	设置下拉列表可以选择多项。
size	设置下拉列表选择几个表项。

例如：

<select name="city" multiple size="3">

option 有两个常用属性，如下所示：

属性	描述
selected	设置是否被选中。
value	设置列表项的默认值。

例如：

<option value="A" selected>北京</option>

新建一个 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>
    <h3>请提交就业相关信息</h3>
    <form>
      <p>
        学历：
        <select name="edu">
          <option value="0">初中</option>
          <option value="1">高中</option>
          <option value="2">大专</option>
          <option value="3" selected>本科</option>
          <option value="4">硕士</option>
          <option value="5">博士</option>
          <option value="6">其他</option>
        </select>
        就业城市：
        <select name="city" multiple>
          <option value="A" selected>北京</option>
          <option value="B">上海</option>
          <option value="C">深圳</option>
          <option value="D">广州</option>
          <option value="E">其他</option>
        </select>
      </p>
      <p><input type="submit" name="submit" value="提交" /></p>
    </form>
  </body>
</html>

点击预览页面，效果如下：

HTML5新特性

在 HTML5 中，提供了如下图所示的语义化标签，让我们可以更直观地看到页面的结构。

标签说明：

header 标签是头部区域。
nav 标签是导航区域。
article 标签是内容区域。
section 标签是文档中部分内容区域。
aside 标签是侧边内容栏区域。
footer 标签是底部信息区域。

例如，环球科学的首页，我们可以用语义化标签来划分一下结构。
在这里插入图片描述

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>

video 标签

在 HTML 中，提供了 video 标签向文档中嵌入媒体播放器。

语法格式如下所示：

<video muted controls>
  <source src="URL" />
</video>

打开页面视频默认是静音状态？这是因为我加入了 muted 属性，如果你去掉该属性视频默认是有声播放。

给视频加上封面

有时候我们不想让别人一眼看出播放的视频内容，为了保持神秘，吊人胃口，我们可以给视频加上一个封面。

我们在 video 标签中加入 poster 属性即可给视频添加封面。

使用格式如下：

<video poster="URL"></video>

属性值 URL 是封面图的地址。

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>

点击预览页面，效果如下：
在这里插入图片描述
从上面的效果我们可以看出，如果你输入的邮箱格式不正确，当你点击提交按钮时，会提醒你格式错误。

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>

点击预览，效果如下：

在这里插入图片描述

从上图可以看出，如果你输入的字符不是一个网址，点击提交后，会提示你这个输入框需要输入一个网址。

number 类型

number 类型用于数字的输入。

number 类型表单有以下属性。

属性	描述
max	输入框允许的最大值。
min	输入框允许的最小值。
step	合法的数字间隔，例如 step=2，则合法为：2、4、6、8。
value	默认值。

例如：

<input type="number" value="5" step="2" />

在这里插入图片描述

设置默认值为 5，步长为 2，每点 ⬆️ 一次，数字 + 2。

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>

点击预览页面，效果如下：

在这里插入图片描述

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>

点击预览页面，实验效果如下：
在这里插入图片描述

serch 类型

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 是起到搜索的效果。

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>

点击预览页面，实验效果如下：

在这里插入图片描述

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 上。

拓展:

name 属性的作用如下：
表单提交：当用户填写表单并提交时，name属性指定的字段名称将与该字段的值一起作为键值对传递到服务器端。服务器端可以通过这个名称来获取对应字段的值，以便处理用户提交的数据。

method 属性的作用如下：
form表单知识点、
form表单的method属性有哪些
GET：通过URL参数将表单数据提交到服务器。这是默认的方法，会将表单数据附加在URL的末尾，并以明文形式传输。
POST：将表单数据作为请求的实体内容发送到服务器。相对于GET方法，POST方法更适合处理敏感或大量数据，且不会在URL中暴露数据。

action 属性的作用如下：
form（表单）标签里的action=“#“、action=““、action=的解释
action="#" 表示提交数据到本页，假设本页为index10.html，等价于action=“index10.html”

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>

点击预览页面，效果如下：

在这里插入图片描述

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>

点击预览页面，效果如下：
在这里插入图片描述
拓展： HTML中 <datalist> 标签

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>

打开预览页面，效果如下。

在这里插入图片描述

总结：HTML5语义化标签和新属性

主要给大家介绍了 HTML5 中的两大块内容：语义化标签和新属性。

其中，我们讲解了用于布局的 6 个基本语义化标签，分别是：

header 标签是头部区域。
nav 标签是导航区域。
article 标签是内容区域。
section 标签是文档中部分内容区域。
aside 标签是侧边内容栏区域。
footer 标签是底部信息区域。

还讲解了与多媒体相关的语义化标签，分别是：

audio 标签：添加音频文件。
source 标签：设置多数据源播放。

最后给大家介绍了新增的表单类型和一些常见的新属性。

html5 本地存储

本地存储是指在客户端存储数据，HTML5 为我们提供了两种 API，分别是 localStorage 与 sessionStorage，二者作为 HTML5 新增的特性，它们的使用方法类似，都可以用来存储客户端临时信息，并且二者存储的数据格式均为 key/value 对的数据。
区别在与生命周期，localStorage 除非手动清除，否则会永久保存在客户端，而 sessionStorage 仅仅在当前网页回话下有效，在关闭页面或者浏览器就会被清除。

localStorage 对象提供的方法如下：

方法	说明
setItem(key,value)	保存数据到本地存储
getItem(key)	从本地存储获取数据
removeItem(key)	根据指定 key 从本地存储中移除数据
clear()	清除所有保存数据

sessionStorage 对象提供的方法与 localStorage 对象相同，具体如下：

方法	说明
setItem(key,value)	保存数据到本地存储
getItem(key)	从本地存储获取数据
removeItem(key)	根据指定 key 从本地存储中移除数据
clear()	清除所有保存数据

localStorage

localStorage 对象是 HTML 5 新增的特性，主要用于本地存储。
说到在本地存储数据，大家第一个联想到的应该是 cookie 吧。

那么，它们有什么区别呢？👇

localstorage 与 cookie 的区别：

localStorage 解决了早期使用 cookie 存储遇到的存储空间不足的问题( 每条 cookie 的存储空间为 4k )；
localStorage 一般浏览器支持的是 5M 大小，具体存储大小根据浏览器的不同会有所不同。
并且相较于 cookie 而言，localStorage 中的信息不会被传输到服务器。

新建一个 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”。

效果如下：
在这里插入图片描述

sessionStorage

localStorage 和 sessionStorage 对象作为 HTML5 新增的特性，都可以用来存储客户端临时信息，并且二者存储的数据格式均为 key/value 键值对数据。

那么localStorage 和 sessionStorage 二者有什么区别呢？🤔️

💡 他们的区别在于：

localStorage 的生命周期是永久的，除非用户清除 localStorage 信息，否则这些信息将永远存在。

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>