目录
1.1 localstorage 与 cookie 的区别：
2.1 sessionStorage与loaclStorage的区别
一.行内标签
1. a标签
1.1 链接邮箱和电话
链接邮箱
<a href="mailto:邮箱地址"></a>
链接电话
<a href="tel:电话号码"></a>
1.2 书签文档
定义书签
<a name="书签名称">文字</a>
链接书签
<a href="#书签名称">链接点</a>
1.3 target属性
在 a 标签中还有个 target 属性可以用来规定打开链接文档的位置，它有如下表所示的几种属性值。
使用格式
<a target="_blank|_self|_top|_parent"></a>
2. span标签
span 标签是用来组合文档中行内元素的，比如你在文档中写入一些文字，页面会以默认样式输出这些文字，若我们想给这段话中的某些词语添加不一样的字体颜色，这时我们可以用 span 标签去包裹这些词语，然后通过 span 标签去设置字体颜色
span 标签就像一个透明的盒子，我们可以把多个盒子放在架子的同一行。
span 标签本身没有特殊之处，若不结合 CSS 来使用的话，我们使用其标签就没有意义了。比如：我们的 body 标签中只有一对 span 标签和一些文字内容，可以看到这与不添加标签直接写入文字内容是一样的效果。
3. strong标签
被包裹的文字会被加粗
4. img标签
在 HTML 中，我们用 img 标签来插入图片，它负责向页面中嵌入一幅图像。
准确来讲，img 标签并不会在页面中真正插入图像，而只是提供一个链接地址，通过链接来显示出图像。所以，img 标签创建的是被引用图像的占位空间。
另外，在 img 标签里可以用 width 属性来设置图片的宽度，用 height 属性来设置图片的高度。
我们设置了固定的宽和高后，在不同大小的窗口所看到的图片大小就相同了。
4.1 使用格式
<img src="图像 URL" alt="图像描述" />
属性说明
4.2 align属性
align 属性能用来规定如何根据周围的文本来排列图像的位置，其属性值如下所示：
4.3 title属性
在 img 标签中，还可以使用 title 属性给元素增加额外的提示信息。
当你把鼠标移到元素上会显示出现一段提示文本。
行内标签总结
二. 块级标签
1. div标签
块级标签元素中的 div 元素，它主要是用来布局的，如果不加任何样式的话，预览页面看不到任何效果。
在 HTML 中，div 标签是最重要的一个块级元素，它可以是组合其他 HTML 元素的容器，相当于是个透明的盒子，可以把其他标签放在里面。
div 标签没有特定的含义，它主要是用于实现页面布局操作。如果与 CSS 一同使用，div 标签可用于对内容块设置样式属性。
这个特性有点像我们之前介绍的 span 标签，它们的区别在于 span 是行内元素，可以和其他元素共处一行，而 div 是块级元素，无论大小都不允许其他元素占自己的地盘。
使用style属性改变了div的宽度之后，尽管 div 的宽度未占满整行，但是 div 元素还是会单独占一行
2. p标签
对于段落标签，有一个可选的属性 align，用于表示段落相对浏览器窗口在水平位置上的对齐方式。它有三个可取值，每个可取值的含义如表所示：
3.标题标签
这里的标题标签不是我们之前讲过的 <title>，而是能够在页面上用于标题显示的 <hn> 系列标签。在 HTML 中一共有六级标题，用 <h1> ~ <h6> 来表示，其中 <h1> 的标题字号最大，依次递减。
在浏览器解析标题标签时，会将标题内容设为一个段落，字体设为黑体，字号大小根据 n 值的大小确定。
4.列表标签
4.1 有序列表
有序列表就是使用项目符号来标识项目，比如日常我们需要步骤化的操作，可以使用有序列表来表示。
基本用法
<ol> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ol>
type属性
可以看到有序列表的默认是从 1 开始的数字排序。我们可以使用 type 属性来改变排序符号，取值如下所示：
start属性
我们默认都是从第一个字母或数字开头来排序的，其实我们可以通过 start 属性，来自定义起始排序符号。start 属性必须要配合 type 属性来使用。例如：
<!--从第 4 个大写罗马数字开始排序--> <ol type="I" start="4"> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ol>
4.2 无序列表
在 HTML 文档中，所谓无序列表，是指以实心圆 ●（默认）、空心圆 ○、实心方块 ■ 开头的，没有顺序的列表项目。比如，有时候我们会用无序列表的形式来做一个总结，这样会让内容看起来更加清晰。
基本用法
<ul> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul>
type属性
我们使用 type 属性可以修改列表开头的符号，其取值如下：
4.3 自定义列表
自定义列表跟前两种列表有些区别，用 dl 标签表示自定义列表，其中的 dt 是代表列表项，而 dd 是列表项的描述。比如：我们需要对列表项的内容进行解释的时候，就可以使用自定义列表了
基本用法
<dl> <dt>列表项一</dt> <dd>列表项一的描述</dd> <dt>列表项二</dt> <dd>列表项二的描述</dd> </dl>
块级标签总结
三. 表单标签
1. form标签
在 HTML 文档中，使用 form 标签来进行表单提交。form 标签有两个重要的属性，action 和 method 属性，其中 action 的属性值是表单提交的地址，method 的属性值是提交的方法。
1.1 基本语法
<form action="表单提交地址" method="提交方法"></form>
method 属性规定了表单提交方式，最常用的有两种方式，分别是 GET 和 POST。
其中 GET 是把表单中的参数放置在 HTTP 请求的头部发送给服务器，
而 POST 是将请求参数置于请求体内发送。
2. input标签
2.1 文本类表单元素
以文本框为代表的表单元素称之为文本类元素。
使用格式
<input type="text" />
2.2 选择类表单元素
选择类表单元素是指单选框和复选框。
- 单选框就是给出多个选项只能选择其中一个。
- 复选框就是给出多个选项可以选择多个。
使用格式
<!--单选框--> <input type="radio" name="选项名" value="提交值" /> <!--复选框--> <input type="checkbox" name="选项名" value="提交值" />
注意：使用单选框时，每个选项一定要设置相同的 name 值，否则就没有单选的效果。
⭐️ 对于 radio 类型元素来说，若 name 属性的取值相同，可以实现单选的效果，但 checkbox 不会因为 name 属性的取值相同变成单选。
<input type="reset" />
上面代码中的 type="reset" 是重置按钮，可以把表单中已填写的信息给清除掉。
2.3 文件和发送类型表单
在 HTML 中，我们使用 type="file" 表示文件类型表单元素
使用格式
<input type="file" name="表单名字" accept="上传文件的格式" />
在 HTML 中，我们使用 type="submit" 表示发送类型表单元素，其使用格式为：
<input type="submit" name="表单名字" value="表单名" />
3.下拉列表
在 HTML 中，通过 select 和 option 标签可以实现下拉列表框，select 标签用于显示可供用户选择的下拉列表，其中的每个选项都由 option 标签标识。
语法格式
<select> <option>选项一</option> <option>选项二</option> <option>选项三</option> </select>
属性
select 有两个常用属性，如下所示：
option 有两个常用属性，如下所示：
表单标签总结
四. HTML5新特性
HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。与传统的技术相比，HTML5 的语法特征更加明显，可以更加便捷地处理多媒体内容，而且 HTML5 中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。
HTML 语言从 1.0 到 5.0 经历了巨大的变化，从单一的文本显示功能到图文并茂的多媒体显示功能，许多特性经过多年的完善，已经发展成为一种非常重要的标记语言。 HTML5 新增的特性如下。
- 新的语义标签，比如 header、nav、section、article、footer。
- 新的表单元素，比如 calendar、date、time、email、url、search。
- 用于绘画的 canvas 元素。
- 用于媒介回放的 video 和 audio 元素。
- 对本地离线存储的更好支持。
- 地理位置、拖曳、摄像头等 API。
1. 基本语义化标签
语义化标签就是把 HTML 文档中的元素划分到不同区域，每个区域有自己的含义。
在 HTML5 中，提供了如下图所示的语义化标签，让我们可以更直观地看到页面的结构。
1.1 标签说明
- header 标签是头部区域。
- nav 标签是导航区域。
- article 标签是内容区域。
- section 标签是文档中部分内容区域。
- aside 标签是侧边内容栏区域。
- footer 标签是底部信息区域。
2. 多媒体标签
2.1 audio标签
在 HTML5 中，使用 audio 标签来播放声音文件或者音频流，该标签支持 Ogg、MP3、WAV 等音频格式。
使用格式
<audio src="URL" controls></audio>
参数说明
- src 属性用于指定要播放的声音文件。
- controls 是 controls="controls" 简写形式，用于提供播放、暂停和音量控件。
除了上面两种属性，audio 标签还有以下属性可用：
- autoplay 属性：音频自动播放。
- loop 属性：音频自动重复播放。
- preload 属性：用来缓冲 audio 标签的大文件，它有三个属性值 none（不缓冲）、auto（缓冲音频文件）、metadata （缓冲文件的元数据）
2.2 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>
2.3 vedio标签
在 HTML 中，提供了 video 标签向文档中嵌入媒体播放器
语法格式
<video controls> <source src="URL" /> </video>
属性
- muted 属性：视频默认静音转台
- poster 属性：给视频添加封面。属性值 URL 是封面图的地址。
3.新表单类型
3.1 email
email 类型用于邮件地址的输入，很明显，它只适用于邮箱输入。如果你输入的邮箱格式不正确，当你点击提交按钮时，会提醒你格式错误。
使用格式
<input type="email" />
3.2 url
url 类型是专门用来输入网址的。如果你输入的字符不是一个网址，点击提交后，会提示你这个输入框需要输入一个网址。
使用格式
<input type="url" />
3.3 number
number 类型用于数字的输入
属性
例如：
<input type="number" value="5" step="2" />
3.4 range
range 类型用于包含一定范围内数值的输入。
使用格式
<input type="range" />
3.5 date
date 是用来选取年、月、日的类型。
datetime-local 是用来选取年、月、日和本地时间。
使用格式
<input type="date" /> <input type="datetime-local" />
3.6 search
search 类型的 input 标签提供用于输入搜索关键字的文本框，从外观看 search 和 text 是一样的，功能也是相近的可以输入任意的字符串。
使用格式
<input type="search" />
从外观和功能上不能发现 search 类型和 text 类型的区别。那么我们为何还要学 search 类型呢？🤔
如果使用不同的浏览器去看，就会发现有细微的差异，比如 Chrome 浏览器给 search 类型的输入框提供了清空按钮。如果在移动端的话，虚拟键盘会根据不同类型的输入框给出不同的反应。还有就是起到语义化的作用，我们一眼能够明白这里的 input 是起到搜索的效果。
3.7 color
color 类型是 input 标签提供的专门用于设置颜色的文本框。通过单击文本框可以打开一个调色板，用户可以在面板中选择需要的颜色。不同的操作系统打开的拾色面板也不相同。
使用格式
<input type="color" />
3.8 form
HTML5 中 input 标签新增了一个 form 属性，通过该属性可以将表单元素绑定到指定的 form 标签上，这样就可以灵活进行布局，同时一个表单元素可以从属于多个表单，这就让表单和表单元素的组合变得更加灵活。
使用格式
<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" />
我们把第一个 text 类型的输入框绑定到 myForm1 上，我们把第二个 text 类型的输入框绑定到 myForm2 上。
3.9 autofocus
打开一个页面，当某个文本框需要获得光标焦点时，可以使用 autofocus 属性来实现。
例如，百度搜索页面，用户的鼠标点击搜索栏会获得光标焦点，用户直接输入需要搜索的内容即可，这种设置可以很好地提高用户体检。
使用格式
<input type="text" autofocus />
3.10 autocomplete
autocomplete 属性是用来规定表单是否应该启用自动完成功能。
自动完成功能就是当用户输入一次数据过后，再次输入相同的数据时可以自动补全内容。
autocomplete 属性包括两个属性值：on、off。
语法格式
on 为默认值，意思是启用自动完成功能。
off 为禁用自动完成功能。
<form autocomplete="on"></form> <form autocomplete="off"></form>
3.11 placeholder
placeholder 属性规定可描述输入字段预期值的提示信息，也就是说设置了该属性，它会提示用户设置的输入值。
语法格式
<input placeholder="text" />
总结
五. HTML5本地存储
1. localStorage
localStorage 对象是 HTML 5 新增的特性，主要用于本地存储。
说到在本地存储数据，大家第一个联想到的应该是 cookie 吧。
那么，它们有什么区别呢？👇
1.1 localstorage 与 cookie 的区别：
- localStorage 解决了早期使用 cookie 存储遇到的存储空间不足的问题( 每条 cookie 的存储空间为 4k )；
- localStorage 一般浏览器支持的是 5M 大小，具体存储大小根据浏览器的不同会有所不同。
- 并且相较于 cookie 而言，localStorage 中的信息不会被传输到服务器。
1.2 提供的方法
localStorage 对象提供的方法如下：
1.3 使用格式
// 语句 1： 保存数据到本地存储
localStorage.setItem("ExpireTime", "1527592757");
localStorage.UserId = "2021008";
// 语句 2： 根据指定名称获取本地存储中的数据
var expireTime = localStorage.getItem("ExpireTime");
console.log(expireTime);
// 语句 3： 根据指定名称从本地存储中移除
localStorage.removeItem("ExpireTime");
// 语句 4： 清除本地存储中所有数据
localStorage.clear();
执行语句1
语句 1 中的两种方式都可以完成数据的存储。
执行完成后，打开浏览器开发人员调试工具，“Application” 面板下，左侧菜单项 “Storage” → “localStorage”。
即可看到所保存的数据，如下所示：
执行语句2
使用 getItem() 方法，根据名称获取 value 值，打开浏览器开发人员调试工具，找到 Console 面板。
即可看到输出结果：
执行语句3
使用 removeItem() 方法根据指定名称删除数据；
执行完成后，再次打开浏览器开发人员调试工具，找到 “Application” 面板下，左侧菜单项 “Storage” → “localStorage”。
效果如下：
执行语句4
使用 Clear() 方法清空所有数据；
执行完成后，再次打开浏览器开发人员调试工具，找到 “Application” 面板下，左侧菜单项 “Storage” → “localStorage”。
效果如下：
2. sessionStorage
2.1 sessionStorage与loaclStorage的区别
localStorage 和 sessionStorage 对象作为 HTML5 新增的特性，都可以用来存储客户端临时信息，并且二者存储的数据格式均为 key/value 键值对数据。
那么localStorage 和 sessionStorage 二者有什么区别呢？🤔️
💡 他们的区别在于：
localStorage 的生命周期是永久的，除非用户清除 localStorage 信息，否则这些信息将永远存在。
sessionStorage 的生命周期是临时的，一旦当前窗口或标签页被关闭了，那么通过它存储的数据也就被清空了。
2.2 提供的方法
sessionStorage 对象提供的方法与 localStorage 对象相同，具体如下：
2.3 使用格式
// 语句 1： 保存数据到本地存储
sessionStorage.setItem("ShopId", "SH1290333211");
sessionStorage.ShopNumber = "10";
// 语句 2： 根据指定名称获取本地存储中的数据
var ShopId = sessionStorage.getItem("ShopId");
console.log(ShopId);
// 语句 3： 根据指定名称从本地存储中移除
sessionStorage.removeItem("ShopId");
// 语句 4： 清除本地存储中所有数据
sessionStorage.clear();
语句分析与localStorage完全一样
🌟 需要注意的是，IsThisFirstTime_Log_From_LiveServer 的数据是由于启动 Web 服务，使用了 LiveServer 所产生，这里不用进行关注。
总结
在本节实验中给大家介绍了 HTML5 中本地存储两种 API，分别是 localStorage 和 sessionStorage。
虽然使用 localStorage 和 sessionStorage 对象都可以轻松进行数据的存储与取出，但是两者之间也是有区别的，它们的区别在于页面刷新后，对于 sessionStorage 来说，浏览器会清空数据，而对于 localStorage，数据仍然保留在浏览器中。
扫一扫
9010
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
