蓝桥杯Web组备赛复习知识点（一）HTML CSS

今天准备开始备战2025年的蓝桥杯Web组的比赛，最近在网上搜索了很长时间，发现很少有Web组的详细，系统的备战资料，所以我打算直接记录下自己的备考过程和对所有的知识点进行系统的梳理，知识点来自于蓝桥杯官方给出的考试大纲。希望可以帮助到大家！

一、 H5的新特性

这一章节在蓝桥杯的考试中占比不大，难度也相对较低，实操水平有限，基本上以理论知识为主，所以只需要了解认识即可。

1、语义化标签

语义化标签，顾名思义，就是将标签进行语义化，使标签更加易读，文档结构更加的清晰。

<!-- 语义化标签 -->
<header>、<footer>、<nav>、<section>、<article>、<aside>、<main>、<figure>、<figcaption>

2、多媒体

音视频可以直接嵌入到网页中，无需其他插件。

<!-- 音频、视频标签 -->
<audio>、<video>

3、表单增强

在表单中填了一些新的类型，如 email、url、tel、date、month、week、time、datetime、datetime-local、number、range、search、color 等。

4、2D绘图

Canvas：顾名思义，就是提供了一块画布，可以使用JS进行绘制
SVG：一种矢量插画

5、存储

5.1 LocalStorage

本地存储是一种全新的存储方式，可以将信息通过键值对的形式存储在浏览器中，需要的时候进行获取，如果不主动进行消除，LocalStorage会一直存在，不会受到关闭标签页或者关闭浏览器的影响。

// 设置数据
LocalStorage.setItem("键"，"值")
// 获取数据
const demo = LocalStorage.getItem("键","值")
console.log(demo);
// 删除数据
LocalStorage.removeItem("键","值")
// 清空所有数据
LocalStorage,clear()

5.2 sessionStorage

另一种本地存储方式，和LocalStorage的特性一样，但是不同的是，sessionStorage会受到关闭标签页和关闭浏览器的影响。

// 设置数据
sessionStorage.setItem("键"，"值")
// 获取数据
const demo = sessionStorage.getItem("键","值")
console.log(demo);
// 删除数据
sessionStorage.removeItem("键","值")
// 清空所有数据
sessionStorage,clear()

6、地理定位

Geolocation API：允许网页访问用户的地理位置信息。

二、盒子模型

盒子模型是CSS中最常用的布局方式，在实际项目中，虽然已经衍生出了很多的语义化标签，但是div + CSS的布局方式还是经久不衰，所以学好盒子模型对于以后接项目非常关键。

盒子模型的本质实际就是对盒子大小和左右的间隔进行确定的过程。从内到外的结构分别是盒子、内边距、边框、外边距。

如图：

1、盒子（div）

在CSS代码中，width和height属性决定的宽和高就是盒子的宽和高。

<div class="demo"></div>

.demo {
	width: 100px;
	height:100px;
}

2、内边距（padding）

内边距就是从盒子最外层到边框之间的距离，在我们的传统认知中，边框以内都是盒子，但是严格意义上来说，在Web开发中并不是，但是在实际业务中，也可以按照传统认知去理解和布局。

.demo {
	width: 100px;
	height:100px;
	padding：20px，20px，20px，20px; /* 依次是上、右、下、左 */
	padding：20px;  /* 如果上右下左的值都是一样的，可以简化 */
	padding-left:20px; /* 单独定义 */
	padding-right:20px; /* 单独定义 */
	padding-top:20px; /* 单独定义 */
	padding-bottom:20px; /* 单独定义 */
}

3、边框（border）

边框就是盒子的边框的相关配置，包括颜色、样式、粗细等。

.demo {
	width: 100px;
	height:100px;
	padding：20px; 
	border: [border-width] [border-style] [border-color];
	border-top: 2px solid red;    /* 顶部边框 */
	border-right: 3px dashed blue; /* 右侧边框 */
	border-bottom: 4px dotted green; /* 底部边框 */
	border-left: 5px double black; /* 左侧边框 */
}

4、外边距（margin）

外边距和内边距的性质都是一样的，如下：

.demo {
	width: 100px;
	height:100px;
	padding：20px; 
	border: 2px solid red; 
	margin：20px，20px，20px，20px; /* 依次是上、右、下、左 */
	margin：20px;  /* 如果上右下左的值都是一样的，可以简化 */
	margin-left:20px; /* 单独定义 */
	margin-right:20px; /* 单独定义 */
	margin-top:20px; /* 单独定义 */
	margin-bottom:20px; /* 单独定义 */
}

三、弹性盒子

弹性盒子诞生的背景是在浮动定位的基础之上，在Web开发中，我们会遇到一个非常棘手也必须要解决的问题，就是响应式布局：根据不同设备的分辨率进行不同的布局，目前主流的有几种方案，诸如传统的媒体查询方案和其他的rpx，vh/vw等方案，但是弹性盒子是适配性最好的方案。

弹性盒子就是在需要进行弹性定位的元素的父元素上加上弹性布局的相关属性，如下：如果想使flex盒子是弹性布局，那就需要在其父元素上，也就是demo盒子上，添加flex属性配置，需要注意，flex盒子必须有明确的宽和高，以下是一些基础配置项：

<div class="demo">
	<div class="flex"></div>
	<div class="flex"></div>
</div>

.demo {
	width: 100px;
	height:100px;
	display:flex; /* 开启弹性盒子布局 */
	flex-direction: column; /* 弹性布局的方向 */
	justiy-content: center; /* 弹性布局的方式 */
}

在基础配置以外，还有其他的配置项可选：

Flex 布局配置项

四、浮动与定位

这一章节考察较少也较为简单，可以自行学习

五、媒体查询

媒体查询同样是为前端开发中最重要的响应式布局来服务的，其本质是监测设备的长宽像素分辨率，根据不同的分辨率设置不同的CSS代码，在初期，设备的像素分辨率较为统一，媒体查询较为方便，但是随着设备的分辨率越来越多样，用媒体查询去适配所有的设备显然不现实，但其仍是重要的适配手段。

@media 媒体类型 and (条件) {
  /* 在满足条件时应用的样式 */
}

常见的媒体查询写法

1. 针对屏幕宽度做响应式布局

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

2. 针对屏幕宽度做响应式布局

@media screen and (min-width: 600px) and (max-width: 1024px) {
  body {
    background-color: lightgreen;
  }
  }