HTML5！进击2025web蓝桥杯复习之路
# HTML5 全面解析
## 目录
1. [HTML5 简介](#1-html5-简介)
2. [基本标签](#2-基本标签)
3. [新特性](#3-新特性)
4. [本地存储](#4-本地存储)
5. [总结](#5-总结)
---
## 1. HTML5 简介
HTML5 是 HTML 的第五个主要版本，2014年由 W3C 正式发布。主要特性包括：
- 语义化标签
- 多媒体支持
- 图形绘制（Canvas/SVG）
- 本地存储能力
- Web Workers
- 地理位置
- WebSocket
---
## 2. 基本标签
### 2.1 文档结构
```html
文档标题
2.2 常用标签
1-语义化标签
| 标签 | 描述 |
|---|---|
|
页面/区块头部 |
|
导航链接 |
|
独立内容区块 |
|
文档中的节 |
|
侧边栏内容 |
|
页面/区块底部 |
|
文档主要内容 |
2-表单增强
<input type="email" required>//用途：用于输入电子邮件地址。[email protected]
<input type="date">//用途：用于选择日期。输入的值会以 YYYY-MM-DD 格式提交
<input type="color">//用途：用于选择颜色。输入的值是一个十六进制颜色值（如 #FFFFFF）。用户点击输入框时，会弹出颜色选择器。
<input type="range" min="0" max="100">//用途：用于选择一个范围内的值（滑动条）。
特点：
显示为一个滑动条，用户可以通过拖动滑块选择值。
可以通过 min 和 max 属性设置最小值和最大值。
默认范围是 0 到 100。
<input type="search">
//用途：用于输入搜索关键词。
特点：
在支持 HTML5 的浏览器中，输入框可能会有特殊的样式（如圆角或清除按钮）。
在移动设备上，键盘可能会显示“搜索”按钮。
3-多媒体
和 是 HTML5 中用于嵌入视频和音频的标签。它们提供了丰富的属性和方法，可以控制媒体的播放、暂停、音量等。
<video controls width="600">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持视频标签
video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
audio>
4-常用属性
| 属性 | 描述 |
|---|---|
controls |
显示浏览器默认的视频控制条（播放/暂停、音量、全屏等）。 |
width |
设置视频播放器的宽度（单位：像素）。 |
height |
设置视频播放器的高度（单位：像素）。 |
autoplay |
视频加载后自动播放（注意：部分浏览器可能会阻止自动播放）。 |
loop |
视频播放结束后自动重新播放。 |
muted |
视频静音播放。 |
poster |
设置视频封面图片（在视频未播放时显示）。 |
preload |
设置视频的预加载方式：auto（自动加载）、metadata（仅加载元数据）、none（不预加载）。 |
src |
视频文件的路径（可以直接写在 |
5-常用属性
| 属性 | 描述 |
|---|---|
controls |
显示浏览器默认的音频控制条（播放/暂停、音量等）。 |
autoplay |
音频加载后自动播放（注意：部分浏览器可能会阻止自动播放）。 |
loop |
音频播放结束后自动重新播放。 |
muted |
音频静音播放。 |
preload |
设置音频的预加载方式：auto（自动加载）、metadata（仅加载元数据）、none（不预加载）。 |
src |
音频文件的路径（可以直接写在 |
6-
和 提供多个媒体源，以便浏览器选择支持的格式。
6.1常用属性
| 属性 | 描述 |
|---|---|
src |
媒体文件的路径。 |
type |
媒体文件的 MIME 类型（如 video/mp4、audio/mpeg）。 |
7-支持的媒体格式
7.1视频格式
| 格式 | MIME 类型 | 浏览器支持情况 |
|---|---|---|
| MP4 | video/mp4 |
几乎所有现代浏览器（H.264 编码）。 |
| WebM | video/webm |
Chrome、Firefox、Edge。 |
| Ogg | video/ogg |
Firefox、Chrome。 |
7.2音频格式
| 格式 | MIME 类型 | 浏览器支持情况 |
|---|---|---|
| MP3 | audio/mpeg |
几乎所有现代浏览器。 |
| Ogg | audio/ogg |
Firefox、Chrome。 |
| WAV | audio/wav |
Firefox、Chrome、Edge。 |
3. 新特性
3.1 Canvas 绘图
<canvas id="myCanvas" width="400" height="200">canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50);
script>
是 HTML5 中用于绘制图形的标签，它提供了一个 JavaScript API，可以通过脚本动态生成图形、动画、游戏等内容。下面我会详细介绍 的使用方法、常用 API 以及一些高级技巧。
1.
1.1 基本结构
<canvas id="myCanvas" width="400" height="200">canvas>
width和height属性用于设置画布的宽度和高度（单位：像素）。- 如果不设置
width和height，默认值为300px（宽）和150px（高）。
1.2 获取绘图上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
getContext('2d')返回一个 2D 绘图上下文对象（CanvasRenderingContext2D），用于绘制图形。
2. 常用绘图 API
2.1 绘制矩形
| 方法 | 描述 |
|---|---|
fillRect(x, y, w, h) |
绘制填充矩形 |
strokeRect(x, y, w, h) |
绘制描边矩形 |
clearRect(x, y, w, h) |
清除矩形区域 |
示例：
ctx.fillStyle = 'red'; // 设置填充颜色
ctx.fillRect(10, 10, 100, 50); // 绘制填充矩形
ctx.strokeStyle = 'blue'; // 设置描边颜色
ctx.strokeRect(50, 50, 100, 50); // 绘制描边矩形
2.2 绘制路径
| 方法 | 描述 |
|---|---|
beginPath() |
开始一条新路径 |
moveTo(x, y) |
将画笔移动到指定点 |
lineTo(x, y) |
从当前点到指定点画线 |
arc(x, y, r, startAngle, endAngle) |
绘制圆弧 |
closePath() |
闭合路径 |
fill() |
填充路径 |
stroke() |
描边路径 |
示例：
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 150);
ctx.closePath();
ctx.fillStyle = 'green';
ctx.fill(); // 填充三角形
2.3 绘制文本
| 方法 | 描述 |
|---|---|
fillText(text, x, y) |
绘制填充文本 |
strokeText(text, x, y) |
绘制描边文本 |
font |
设置字体样式 |
textAlign |
设置文本对齐方式 |
textBaseline |
设置文本基线 |
示例：
ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 10, 50);
2.4 绘制图像
| 方法 | 描述 |
|---|---|
drawImage(image, x, y) |
绘制图像 |
drawImage(image, x, y, w, h) |
绘制并缩放图像 |
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) |
裁剪并绘制图像 |
示例：
const img = new Image();
img.src = 'image.png';
img.onload = () => {
ctx.drawImage(img, 10, 10, 100, 100);
};
2.5 颜色和样式
| 属性 | 描述 |
|---|---|
fillStyle |
设置填充颜色或渐变 |
strokeStyle |
设置描边颜色或渐变 |
lineWidth |
设置描边宽度 |
lineCap |
设置线段的端点样式 |
lineJoin |
设置线段连接处的样式 |
示例：
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色
ctx.strokeStyle = '#00FF00'; // 绿色
ctx.lineWidth = 5;
2.6 渐变
| 方法 | 描述 |
|---|---|
createLinearGradient(x1, y1, x2, y2) |
创建线性渐变 |
createRadialGradient(x1, y1, r1, x2, y2, r2) |
创建径向渐变 |
addColorStop(position, color) |
添加颜色停止点 |
示例：
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);
3. 高级技巧
3.1 动画
通过 requestAnimationFrame 实现动画效果。
示例：
let x = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
ctx.fillRect(x, 50, 50, 50);
x += 1;
requestAnimationFrame(draw);
}
draw();
3.2 事件交互
可以通过监听鼠标事件实现交互。
示例：
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x - 25, y - 25, 50, 50);
});
3.3 保存和恢复状态
| 方法 | 描述 |
|---|---|
save() |
保存当前绘图状态 |
restore() |
恢复之前保存的绘图状态 |
示例：
ctx.fillStyle = 'red';
ctx.save(); // 保存状态
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = 'blue';
ctx.fillRect(70, 10, 50, 50);
ctx.restore(); // 恢复状态
ctx.fillRect(130, 10, 50, 50); // 使用红色填充
3.2 地理定位
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
position => {
console.log(`纬度: ${position.coords.latitude}`);
console.log(`经度: ${position.coords.longitude}`);
},
error => {
console.error('定位失败:', error.message);
}
);
}
地理定位（Geolocation）是 HTML5 提供的一个 API，允许网页获取用户的地理位置信息。它基于设备的 GPS、Wi-Fi、IP 地址等方式来定位用户的位置。下面我会详细介绍地理定位的使用方法、API 和相关注意事项。
1. 基本用法
1.1 检查浏览器支持
在使用地理定位之前，需要检查浏览器是否支持该功能：
if (navigator.geolocation) {
// 浏览器支持地理定位
} else {
console.error('您的浏览器不支持地理定位');
}
1.2 获取当前位置
使用 navigator.geolocation.getCurrentPosition() 方法获取用户的当前位置。
示例：
navigator.geolocation.getCurrentPosition(
position => {
console.log('纬度:', position.coords.latitude);
console.log('经度:', position.coords.longitude);
},
error => {
console.error('定位失败:', error.message);
}
);
2. getCurrentPosition 方法详解
2.1 参数说明
getCurrentPosition(successCallback, errorCallback, options) 方法接受三个参数：
successCallback：定位成功时的回调函数，接收一个Position对象。errorCallback：定位失败时的回调函数，接收一个PositionError对象。options：可选配置对象，用于设置定位行为。
2.2 Position 对象
successCallback 接收的 Position 对象包含以下属性：
| 属性 | 描述 |
|---|---|
coords.latitude |
纬度（十进制度数） |
coords.longitude |
经度（十进制度数） |
coords.accuracy |
定位精度（单位：米） |
coords.altitude |
海拔高度（单位：米） |
coords.altitudeAccuracy |
海拔精度（单位：米） |
coords.heading |
设备移动方向（相对于正北，单位：度） |
coords.speed |
设备移动速度（单位：米/秒） |
timestamp |
定位时间戳 |
2.3 PositionError 对象
errorCallback 接收的 PositionError 对象包含以下属性：
| 属性 | 描述 |
|---|---|
code |
错误代码（见下表） |
message |
错误信息 |
错误代码：
| 代码 | 常量 | 描述 |
|---|---|---|
1 |
PERMISSION_DENIED |
用户拒绝授权 |
2 |
POSITION_UNAVAILABLE |
无法获取位置信息 |
3 |
TIMEOUT |
定位超时 |
3. 配置选项
getCurrentPosition 的第三个参数是一个配置对象，可以设置以下属性：
| 属性 | 描述 |
|---|---|
enableHighAccuracy |
是否启用高精度定位（默认：false） |
timeout |
定位超时时间（单位：毫秒，默认：无限制） |
maximumAge |
允许返回缓存位置的最大时间（单位：毫秒，默认：0） |
示例：
navigator.geolocation.getCurrentPosition(
position => {
console.log('定位成功:', position.coords);
},
error => {
console.error('定位失败:', error.message);
},
{
enableHighAccuracy: true, // 启用高精度
timeout: 5000, // 超时时间 5 秒
maximumAge: 60000 // 允许使用 1 分钟内的缓存位置
}
);
4. 持续定位
如果需要持续获取用户的位置变化，可以使用 watchPosition 方法。
4.1 watchPosition 方法
watchPosition 的用法与 getCurrentPosition 类似，但它会持续监听位置变化，并返回一个监听 ID。
示例：
const watchId = navigator.geolocation.watchPosition(
position => {
console.log('当前位置:', position.coords);
},
error => {
console.error('定位失败:', error.message);
}
);
// 停止监听
navigator.geolocation.clearWatch(watchId);
5. 注意事项
5.1 用户授权
- 地理定位需要用户授权，浏览器会弹出权限请求对话框。
- 如果用户拒绝授权，
errorCallback会收到PERMISSION_DENIED错误。
5.2 隐私问题
- 地理位置信息属于敏感数据，使用时需遵守隐私政策。
- 建议在使用前告知用户定位的目的。
5.3 定位精度
- 定位精度受设备硬件和网络环境影响。
- 启用
enableHighAccuracy可以提高精度，但会增加设备耗电。
5.4 浏览器兼容性
- 几乎所有现代浏览器都支持地理定位。
- 在不支持的浏览器中，可以通过第三方服务（如 IP 定位）实现类似功能。
6. 实际应用场景
6.1 地图应用
- 在地图上显示用户当前位置。
- 提供导航功能。
6.2 本地服务
- 根据用户位置推荐附近的商家或服务。
- 显示附近的天气信息。
6.3 社交应用
- 分享用户的位置信息。
- 查找附近的朋友。
7. 示例代码
7.1 获取并显示用户位置
<p>点击按钮获取您的位置：p>
<button onclick="getLocation()">获取位置button>
<p id="location">p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
position => {
const { latitude, longitude } = position.coords;
document.getElementById('location').innerText =
`纬度: ${latitude}, 经度: ${longitude}`;
},
error => {
document.getElementById('location').innerText =
`定位失败: ${error.message}`;
}
);
} else {
document.getElementById('location').innerText =
'您的浏览器不支持地理定位';
}
}
script>
3.3 Web Workers
Web Workers 是 HTML5 提供的一种技术，允许在浏览器中运行多线程 JavaScript 代码。它使得开发者可以将耗时的任务放到后台线程中执行，从而避免阻塞主线程（UI 线程），提升页面的响应速度和用户体验。
1.1 解决主线程阻塞问题
- JavaScript 是单线程的，所有任务都在主线程中执行。
- 如果主线程执行耗时任务（如复杂计算、大数据处理），页面会卡顿甚至无响应。
- Web Workers 可以将这些任务放到后台线程中执行，避免阻塞主线程。
1.2 适用场景
-
复杂计算（如加密、图像处理）
-
大数据处理（如 CSV 解析、数据过滤）
-
实时通信（如 WebSocket 数据处理）
-
其他需要长时间运行的任务
2. Web Workers 的基本用法
2.1 创建 Worker
在主线程中创建一个 Worker：
const worker = new Worker('worker.js');
worker.js是 Worker 线程中执行的脚本文件。
2.2 主线程与 Worker 通信
-
主线程发送消息：
worker.postMessage('Hello Worker!'); -
Worker 接收消息：
self.onmessage = event => { console.log('收到主线程消息:', event.data); }; -
Worker 发送消息：
self.postMessage('Hello Main Thread!'); -
主线程接收消息：
worker.onmessage = event => { console.log('收到 Worker 消息:', event.data); };
2.3 终止 Worker
当 Worker 完成任务后，可以手动终止：
worker.terminate();
3. Web Workers 的限制
3.1 无法访问 DOM
- Worker 线程中不能直接操作 DOM，因为 DOM 是主线程的资源。
- 如果需要更新 UI，必须通过
postMessage将数据发送回主线程。
3.2 无法使用某些 API
- Worker 中无法使用
window、document、alert等浏览器 API。 - 但可以使用
WebSocket、IndexedDB、Fetch等 API。
3.3 文件限制
- Worker 脚本必须是一个独立的文件（如
worker.js）。 - 不能直接使用内联脚本。
4. Web Workers 的类型
4.1 专用 Worker（Dedicated Worker）
- 只能被创建它的脚本使用。
- 生命周期与创建它的页面绑定。
4.2 共享 Worker（Shared Worker）
- 可以被多个页面共享。
- 适用于多个页面需要共享数据的场景。
4.3 Service Worker
- 主要用于离线缓存和网络请求拦截。
- 是 PWA（渐进式 Web 应用）的核心技术之一。
主线程：
const worker = new Worker('worker.js');
worker.postMessage('开始计算');
worker.onmessage = e => {
console.log('收到结果:', e.data);
};
worker.js：
self.onmessage = function(e) {
const result = heavyCalculation();
self.postMessage(result);
};
3.4 WebSocket
WebSocket 是一种基于 TCP 的网络协议，它允许在客户端和服务器之间建立全双工通信（双向通信）。与传统的 HTTP 请求-响应模式不同，WebSocket 提供了一种持久的连接，使得服务器可以主动向客户端推送数据，而不需要客户端不断地发送请求。
WebSocket 是 HTML5 的一部分，广泛应用于实时通信场景，如聊天应用、实时数据更新、在线游戏等。
const socket = new WebSocket('ws://example.com/socket');
socket.onopen = () => {
socket.send('Hello Server!');
};
socket.onmessage = event => {
console.log('收到消息:', event.data);
};
1. WebSocket 的特点
1.1 全双工通信
- 客户端和服务器可以同时发送和接收数据。
- 不需要像 HTTP 那样每次通信都需要建立和关闭连接。
1.2 低延迟
- 由于连接是持久的，数据可以实时传输，减少了建立连接的开销。
1.3 减少带宽消耗
- WebSocket 使用更小的数据帧头，减少了每次通信的开销。
1.4 支持跨域
- WebSocket 支持跨域通信，但服务器需要明确允许跨域连接。
2. WebSocket 的基本用法
2.1 创建 WebSocket 连接
const socket = new WebSocket('ws://example.com/socket');
ws://是 WebSocket 协议的 URL 前缀（类似于 HTTP 的http://）。- 如果需要加密通信，可以使用
wss://（类似于 HTTPS 的https://）。
2.2 WebSocket 事件
onopen
- 当连接成功建立时触发。
socket.onopen = () => {
console.log('连接已建立');
socket.send('Hello Server!'); // 向服务器发送消息
};
onmessage
- 当接收到服务器发送的消息时触发。
socket.onmessage = event => {
console.log('收到消息:', event.data); // event.data 是服务器发送的数据
};
onerror
- 当连接发生错误时触发。
socket.onerror = error => {
console.error('连接错误:', error);
};
onclose
- 当连接关闭时触发。
socket.onclose = () => {
console.log('连接已关闭');
};
2.3 发送数据
使用 send() 方法向服务器发送数据。
socket.send('Hello Server!'); // 发送文本
socket.send(JSON.stringify({ key: 'value' })); // 发送 JSON 数据
2.4 关闭连接
使用 close() 方法关闭连接。
socket.close();
3. WebSocket 协议
3.1 握手过程
WebSocket 连接的建立需要经过一次 HTTP 握手：
- 客户端发送一个 HTTP 请求，包含
Upgrade: websocket头。 - 服务器响应
101 Switching Protocols，表示协议升级成功。 - 连接升级为 WebSocket 协议，后续通信使用 WebSocket 数据帧。
3.2 数据帧
WebSocket 使用二进制数据帧传输数据，支持文本和二进制格式。
4. WebSocket 的实际应用场景
4.1 实时聊天
- 客户端和服务器可以实时发送和接收消息。
- 适用于聊天应用、在线客服等。
4.2 实时数据更新
- 服务器可以主动向客户端推送数据更新。
- 适用于股票行情、实时监控等。
4.3 在线游戏
- 支持低延迟的双向通信。
- 适用于多人在线游戏。
4.4 协同编辑
- 多个用户可以实时编辑同一份文档。
- 适用于在线文档编辑工具。
5. WebSocket 示例代码
5.1 客户端代码
const socket = new WebSocket('ws://example.com/socket');
socket.onopen = () => {
console.log('连接已建立');
socket.send('Hello Server!');
};
socket.onmessage = event => {
console.log('收到消息:', event.data);
};
socket.onerror = error => {
console.error('连接错误:', error);
};
socket.onclose = () => {
console.log('连接已关闭');
};
5.2 服务器端代码（Node.js + ws 库）
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', ws => {
console.log('客户端已连接');
ws.on('message', message => {
console.log('收到消息:', message);
ws.send(`服务器回复: ${message}`);
});
ws.on('close', () => {
console.log('客户端已断开连接');
});
});
6. WebSocket 的优缺点
6.1 优点
- 实时性：支持低延迟的双向通信。
- 高效性：减少了 HTTP 请求的开销。
- 灵活性：支持文本和二进制数据。
6.2 缺点
- 兼容性：旧版本浏览器可能不支持 WebSocket。
- 复杂性：需要服务器和客户端同时支持 WebSocket。
- 连接管理：需要处理连接断开和重连的逻辑。
7. WebSocket 的替代方案
如果 WebSocket 不可用，可以考虑以下替代方案：
-
HTTP 长轮询（Long Polling）：
- 客户端不断向服务器发送请求，服务器在有数据时返回响应。
- 缺点是延迟较高，且占用服务器资源。
-
Server-Sent Events (SSE)：
- 服务器向客户端单向推送数据。
- 适用于只需要服务器向客户端推送数据的场景。
4. 本地存储
4.1 localStorage
// 存储数据
localStorage.setItem('username', 'JohnDoe');
// 读取数据
const user = localStorage.getItem('username');
// 删除数据
localStorage.removeItem('username');
// 清空所有
localStorage.clear();
4.2 sessionStorage
使用方法同 localStorage，区别：
- 页面会话结束时自动清除
- 不可跨标签页共享
4.3 IndexedDB
const request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = (event) => {
const db = event.target.result;
const store = db.createObjectStore('users', { keyPath: 'id' });
store.createIndex('name', 'name', { unique: false });
};
request.onsuccess = (event) => {
const db = event.target.result;
const tx = db.transaction('users', 'readwrite');
const store = tx.objectStore('users');
store.add({ id: 1, name: 'Alice' });
};
存储方式对比
| 特性 | Cookie | localStorage | sessionStorage | IndexedDB |
|---|---|---|---|---|
| 容量 | 4KB | 5MB | 5MB | 250MB+ |
| 生命周期 | 可设置过期时间 | 永久 | 会话级 | 永久 |
| 服务器访问 | 自动携带 | 无 | 无 | 无 |
| 数据类型 | 字符串 | 字符串 | 字符串 | 结构化数据 |
5. 总结
HTML5 的核心优势：
- 语义化标签提升SEO和可访问性
- 原生多媒体支持减少插件依赖
- 强大的本地存储能力
- 复杂图形处理能力
- 多线程支持提升性能
建议结合 CSS3 和 JavaScript API 使用，可构建现代化 Web 应用。