蓝桥杯Web组知识点——HTML篇

Cakndex

已于 2023-10-22 03:14:56 修改

阅读量480

点赞数 1

分类专栏：蓝桥杯备赛文章标签：前端蓝桥杯 html

于 2023-10-14 03:58:56 首次发布

本文链接：https://blog.csdn.net/Lyy_ID/article/details/133820600

版权

蓝桥杯备赛专栏收录该内容

5 篇文章 9 订阅

订阅专栏

因飞书云文档比CSDN功能更强大且更好看，故读者可点击下方链接查看笔记

（非飞书用户也可阅读）

飞书云文档：蓝桥杯web组知识点——HTML篇https://uestc.feishu.cn/docx/UZaZdK9jhomvfPxk6IucfAGEnLd?from=from_copylink涵盖内容：

预览图：

复制到csdn会有部分语法不支持

HTML基本结构

html标签
head标签
meta标签
title标签
body标签

html 标签

在介绍 html 标签之前，我们先说说 <!DOCTYPE html> 的意思，它是文档类型声明标签，用于一个文档类型的声明，DOCTYPE 用来保证文档能够正确被读取，html 声明这是一个 html 文档。

html 标签标识该文档为 HTML 文档。它相当于是一个两层楼的房子框架，第一层是 body 楼，居民住在不同类型的房间中，第二层是 head 楼，里面放着居民的信息文件

<html> 标签置于 HTML 文档最前边，用来标识 HTML 文档的开始，而 </html> 标签恰好相反，它放在 HTML 文档最后边，用来标识 HTML 文档的结束。

两个标签必须成对使用，网页中其他的所有标签都应该放在 <html> 和 </html> 标签之间。

基本语法：

<html> ... </html>

head 标签

head 标签是头部元素的家 🏠 ，头部元素是对页面的一些基本描述。在上面的模板中，我们可以看到 head 标签里有两个成员，title 标签和 meta 标签。其实不止这两个，常见的头部标签如下表所示：

标签	描述
<title>	定义页面标题内容。
<meta>	有关文档本身的元信息，例如：文档的作者，用于查询的关键词，关于文档的描述等。
<style>	定义 CSS 层叠样式表的内容。
<link>	定义外部文件的链接，最常见的用途是链接外部样式表。
<script>	定义页面中程序脚本的内容。

meta 标签

meta 标签的功能是提供关于页面的元信息，能够提供文档作者、关键字、描述等多种信息，在 HTML 的头部可以包括任意数量的 meta 标签。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

其中，name、content 被称为属性，viewport 和 width=device-width, initial-scale=1.0 被称为属性值。

例如：我们添加一个作者的信息。

<meta name="author" content="cakndex.github.io" />

除了上面介绍的属性，这里再给大家介绍一个字符编码的属性，大家知道我们现在常用的是 UTF-8 编码，这种通用的编码使我们的页面内容能够在不同情况下被正确的解析。

在 meta 标签中，我们使用 charset 属性来规定字符编码，在解析文档时，会告诉浏览器我们使用的编码形式。使用如下：

<meta charset="utf-8" />

这里只是简单介绍了 meta 标签，若想了解更多内容，请阅读文档级元数据。

title 标签

<title> 标签是用来设置页面标题的，我们随便打开一个网页都可见其标题。例如，下方我打开了「蓝桥杯大赛」的官网和「蓝桥云课」，可以看见两个网站的标题是不同的。

它有以下几个方面的用处：

可以在浏览者保存该页面时成为默认的保存文件名。
可以在浏览者将该网址添加进收藏夹时成为收藏夹中该网址的名称。
方便搜索引擎索引页面。
搜索引擎显示的页面标题往往就是网页 <title> 标签的内容。

在我们的 HTML 模板中 <title>Document</title>，意思是设置页面的标题为 Document，我们如下修改这个默认标题，然后来看看该标题会显示在哪里。

body 标签

body 标签界定了 HTML 文档的主体。在 <body> 和 </body> 之间放的是要显示在页面上的所有内容，如文本、超链接、图像、表格和列表等。

基本语法：

<body> ... </body>

行内标签

a 标签
span 标签
strong 标签
img 标签

a标签

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

其基本使用格式如下：

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

URL 是链接的地址。例如：

<a href="https://www.lanqiao.cn">蓝桥杯</a>

`target` 属性可以用来规定打开链接文档的位置，它有如下表所示的几种属性值。

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

_blank和_self两个属性较为常用，分别是在新窗口打开和在当前窗口打开

其使用格式为：

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

span 标签

span 标签是用来组合文档中行内元素的，比如你在文档中写入一些文字，页面会以默认样式输出这些文字，若我们想给这段话中的某些词语添加不一样的字体颜色，这时我们可以用 span 标签去包裹这些词语，然后通过 span 标签去设置字体颜色。

其使用格式如下：

<p>我要打<span>蓝桥杯</span></p>

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>

strong 标签的介绍

平时我们浏览网站，会发现网页上字的粗细是不同的，有时候为了让某些词句成为我们关注的焦点，我们会把文字加粗。

在 HTML 中，可以使用 strong 标签来给文字加粗。

使用格式如下：

<strong>文字加粗</strong>

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>

`align` 属性能用来规定如何根据周围的文本来排列图像的位置，其属性值如下所示：

属性值	说明
top	顶部对齐
bottom	底部对齐
middle	居中对齐
left	居左对齐
right	居右对齐

`title` 属性给元素增加额外的提示信息。什么意思呢？🤔

当你把鼠标移到元素上会显示出现一段提示文本。

其基本使用格式如下所示：

<img title="提示文本内容" />

块级标签

div 标签
p 标签
标题标签
列表标签

div 标签

div 元素，它主要是用来布局的，如果不加任何样式的话，预览页面看不到任何效果。

在 HTML 中，div 标签是最重要的一个块级元素，它可以是组合其他 HTML 元素的容器，相当于是个透明的盒子，可以把其他标签放在里面。

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

这个特性有点像我们之前介绍的 span 标签，它们的区别在于 span 是行内元素，可以和其他元素共处一行，而 div 是块级元素，无论大小都不允许其他元素占自己的地盘。

div 标签的使用格式如下所示：

<div>这是一个盒子</div>

p 标签

我们在 Word 中写几段话，直接 enter 就可以分段了，但是在 HTML 中，如果你在 body 中用此方法分段，会发现页面将几段话呈一段显示。例如：

那怎么办呢？

在 HTML 中为我们提供 p 标签来分段，添加 p 标签效果如下：

标题标签

这里的标题标签不是我们之前讲过的 <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>

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

从预览效果中我们可以看到，随着标题标签的级数增大，字体是越来越小的。

列表标签

列表标签一共有三种，分别是：

无序列表
有序列表
自定义列表

有序列表的使用

有序列表就是使用项目符号来标识项目，比如日常我们需要步骤化的操作，可以使用有序列表来表示。

其基本用法为：

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

我们可以使用 type 属性来改变排序符号，取值如下所示：

属性值	说明
A	用大写字母作为排序符号
a	用小写字母作为排序符号
I	用大写罗马字符作为排序符号
i	用小写罗马字符作为排序符号
1	用数字作为排序符号

我们默认都是从第一个字母或数字开头来排序的，其实我们可以通过 start 属性，来自定义起始排序符号。start 属性必须要配合 type 属性来使用。例如：

 <ol type="I" start="4"> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ol>

无序列表的使用

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

基本用法为：

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

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

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

自定义列表的使用

自定义列表跟前两种列表有些区别，用 dl 标签表示自定义列表，其中的 dt 是代表列表项，而 dd 是列表项的描述。比如：我们需要对列表项的内容进行解释的时候，就可以使用自定义列表了。

基本用法为：

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

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

表单标签

form 标签
input 标签
select 标签
option 标签

form 标签

表单是用来描述需要用户输入的页面内容，在用户输入具体信息后，提交到指定位置进行处理。例如下面蓝桥杯大赛官网的登录页面。

当我们正确填写输入框的信息后，点击「登录」按钮，会在某处验证你的信息是否正确，若正确则登录成功，跳转到登录后的页面，否则登录失败。

在 HTML 文档中，使用 form 标签来进行表单提交。form 标签有两个重要的属性，action 和 method 属性，其中 action 的属性值是表单提交的地址，method 的属性值是提交的方法。

其基本语法为：

<form action="表单提交地址" method="提交方法"></form>

method 属性规定了表单提交方式，最常用的有两种方式，分别是 GET 和 POST。其中 GET 是把表单中的参数放置在 HTTP 请求的头部发送给服务器，而 POST 是将请求参数置于请求体内发送。

input 标签

input 标签表示表单，其中它有不同的属性，用于表示不同的表单类型。

这里给大家介绍是四种类型的表单：

文本类表单
选择类表单
文件上传类表单
按钮表单

文本类表单元素

以文本框为代表的表单元素称之为文本类元素。

其基本使用格式为：

<input type="text" />

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

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

选择类表单元素

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

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

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

 <input type="radio" name="选项名" value="提交值" />  <input type="checkbox" name="选项名" value="提交值" />

注意：使用单选框时，每个选项一定要设置相同的 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" 是重置按钮，可以把表单中已填写的信息给清除掉。

文件和发送类型表单

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

图标来自 Icons8。

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

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

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

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

下拉列表

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

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

其语法格式为：

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

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

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

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

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

HTML5 新特性

HTML5 新增的特性如下。

新的语义标签，比如 header、nav、section、article、footer。
新的表单元素，比如 calendar、date、time、email、url、search。
用于绘画的 canvas 元素。
用于媒介回放的 video 和 audio 元素。
对本地离线存储的更好支持。
地理位置、拖曳、摄像头等 API。

知识点

基本语义化标签
多媒体标签
HTML5 新属性

基本语义化标签

语义化标签就是把 HTML 文档中的元素划分到不同区域，每个区域有自己的含义。

我们可以把语义化标签想成一个房子里的不同区域，一套房子，有客厅、饭厅、卧室、厕所等，它们都属于房子里的一部分空间，不同的划分区域有不同的用处，比如，饭厅是用来吃饭的，我们通常不会在厕所里吃饭。

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

标签说明：

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

由于这些标签本身只有一个块级元素的特点，如果不加入 CSS 样式，是没有任何效果的，这里我们不做练习，等学完 CSS 我们再进行练习。

多媒体标签

多媒体标签就是用于在页面中嵌入音频和视频的标签，主要有以下两个标签：

audio 标签
video 标签

使用 `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 controls> <source src="URL" /> </video>

给视频加上封面

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

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

使用格式如下：

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

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

新表单类型-email

email 类型用于邮件地址的输入，很明显，它只适用于邮箱输入。

使用格式如下：

<input type="email" />

新表单类型-url

url 类型是专门用来输入网址的。

使用格式如下：

<input type="url" />

新表单类型-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" />

新表单类型-date

date 是用来选取年、月、日的类型。

其使用格式为：

<input type="date" />

datetime-local 是用来选取年、月、日和本地时间。

其使用格式为：

<input type="datetime-local" />

新表单类型-search

search 类型的 input 标签提供用于输入搜索关键字的文本框，从外观看 search 和 text 是一样的，功能也是相近的可以输入任意的字符串。

使用格式如下：

<input type="search" />

同学们似乎也不能从外观和功能上能发现 search 类型和 text 类型的区别。那么我们为何还要学 search 类型呢？🤔

如果使用不同的浏览器去看，就会发现有细微的差异，比如 Chrome 浏览器给 search 类型的输入框提供了清空按钮。如果在移动端的话，虚拟键盘会根据不同类型的输入框给出不同的反应。还有就是起到语义化的作用，我们一眼能够明白这里的 input 是起到搜索的效果。

新属性-form

HTML5 中 input 标签新增了一个 form 属性，通过该属性可以将表单元素绑定到指定的 form 标签上，这样就可以灵活进行布局，同时一个表单元素可以从属于多个表单，这就让表单和表单元素的组合变得更加灵活。

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

新属性-autocomplete

autocomplete 属性是用来规定表单是否应该启用自动完成功能。

自动完成功能就是当用户输入一次数据过后，再次输入相同的数据时可以自动补全内容。

autocomplete 属性包括两个属性值：on、off。

其语法格式为：

<form autocomplete="on"></form>

on 为默认值，意思是启用自动完成功能。

<form autocomplete="off"></form>

off 为禁用自动完成功能。

新属性-placeholder

placeholder 属性规定可描述输入字段预期值的提示信息，也就是说设置了该属性，它会提示用户设置的输入值。

其语法格式为：

新特性-拖放API讲解

笔者认为这篇博文写的非常详细，可以阅读：关于H5新特性拖放API讲解，在此便不再赘述

HTML5 本地存储

本地存储是指在客户端存储数据，HTML5 为我们提供了两种 API，分别是 localStorage 与 sessionStorage，二者作为 HTML5 新增的特性，它们的使用方法类似，都可以用来存储客户端临时信息，并且二者存储的数据格式均为 key/value 对的数据。

区别在与生命周期，localStorage 除非手动清除，否则会永久保存在客户端，而 sessionStorage 仅仅在当前网页回话下有效，在关闭页面或者浏览器就会被清除。

localStorage 对象提供的方法如下：

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

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

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

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