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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

2.2 常用标签

1-语义化标签

标签	描述
`<header>`	页面/区块头部
`<nav>`	导航链接
`<article>`	独立内容区块
`<section>`	文档中的节
`<aside>`	侧边栏内容
`<footer>`	页面/区块底部
`<main>`	文档主要内容

2-表单增强

<input type="email" required>//用途：用于输入电子邮件地址。xxx@xxx.com
<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`	视频文件的路径（可以直接写在 `<video>` 标签中，也可以通过 `<source>` 指定）。

5-常用属性

属性	描述
`controls`	显示浏览器默认的音频控制条（播放/暂停、音量等）。
`autoplay`	音频加载后自动播放（注意：部分浏览器可能会阻止自动播放）。
`loop`	音频播放结束后自动重新播放。
`muted`	音频静音播放。
`preload`	设置音频的预加载方式：`auto`（自动加载）、`metadata`（仅加载元数据）、`none`（不预加载）。
`src`	音频文件的路径（可以直接写在 `<audio>` 标签中，也可以通过 `<source>` 指定）。

6-`<source>` 标签

<source> 标签用于为 <video> 和 <audio> 提供多个媒体源，以便浏览器选择支持的格式。

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>

<canvas> 是 HTML5 中用于绘制图形的标签，它提供了一个 JavaScript API，可以通过脚本动态生成图形、动画、游戏等内容。下面我会详细介绍 <canvas> 的使用方法、常用 API 以及一些高级技巧。

1. `<canvas>` 基础

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 应用。