�� HTML —— 互联网的砖块，每一个网站都是从这玩意儿开始的
一、先说两句
不管你用多先进的框架、多酷炫的技术，最终浏览器里渲染的东西，本质上就是三个东西：
```
HTML → 结构（房子的框架和房间）
CSS → 样式（墙的颜色、家具的摆放）
JavaScript → 行为（开关灯、按门铃）
```
**HTML 是三个里面最重要的一个**——没有它，CSS 和 JS 没有容器可放。
HTML 的全称是 **HyperText Markup Language（超文本标记语言）**。注意它不是编程语言——它没有变量、没有逻辑判断、没有循环、没有函数。它只是一套"标记"，告诉浏览器"这是一级标题"、"这是一个段落"、"这是一张图片"。
世界上第一份 HTML 文档是 Tim Berners-Lee 在 1991 年写的。那时候 HTML 只有十几个标签。三十多年过去了，现在的 HTML 已经有 **100 多个标签**，从简单的 `<p>` 到复杂的 `<canvas>`、`<video>`、`<svg>`。
但最神奇的是：**1991 年写的那份 HTML 文档，放到今天的浏览器上仍然能正确显示。** 没有哪种技术有这种级别的向后兼容性。
二、HTML 是怎么工作的？
你写了一段 HTML，浏览器是怎么把它变成你看到的页面的？
```
你写的 HTML：
<h1>Hello World</h1>
<p>这是一段文字。</p>
浏览器做的事：
1. 下载 .html 文件（从服务器到本地）
2. 解析 HTML 字符串 → 生成 DOM 树（Document Object Model）
3. 解析 CSS → 生成 CSSOM 树
4. DOM + CSSOM → 生成渲染树
5. 计算每个元素的位置和大小（Layout）
6. 绘制到屏幕上（Paint）
整个过程叫"关键渲染路径"（Critical Rendering Path），
从收到 HTML 到用户看到画面，浏览器都在干这些事。
```
**HTML 是最宽容的语言**
写错了不会报错，浏览器会尽力"猜"你想表达什么：
```html
<!-- ❌ 忘了闭合标签 -->
<p>这是一段文字
<p>这是另一段文字
<!-- 浏览器会自己补上 </p>，把它理解成两个段落 -->
```
这在其他语言里是无法想象的。Python 缩进错了直接报错，JavaScript 少了个分号在某些情况下也会出问题。HTML 几乎永远不报错——这也是为什么有些网页在 Chrome 里正常，在 Safari 里崩了：**浏览器们"猜"的方式不一样。**
三、HTML 必知必会的核心概念
**1. 标签、元素、属性**
```html
<!-- 一个完整的 HTML 元素 -->
<a href="https://example.com" class="link">点击这里</a>
↑ ↑ ↑ ↑
标签名 属性 内容 闭合标签
<!-- 自闭合标签（没有内容的） -->
<img src="photo.jpg" alt="一张照片">
<br>
<hr>
<input type="text">
```
**2. 块级元素 vs 行内元素**
这是 HTML 最重要的概念，CSS 一切布局都基于这个：
```html
<!-- 块级元素（Block）：
- 独占一行
- 默认宽度 100%
- 可以设宽高
-->
<div>这是一个块</div>
<p>这也是一个块</p>
<h1>标题也是块</h1>
<!-- 行内元素（Inline）：
- 在一行内排列
- 宽度由内容决定
- 不能设宽高（除了一些特殊行内块）
-->
<span>这是一个行内元素</span>
<a href="#">链接也是行内</a>
<strong>加粗也是</strong>
```
**布局就是这么开始的——** 你想让几个元素横着排？用行内元素或者用 CSS 的 `display: flex` 或 `display: grid`。你想让它们竖着堆？用块级元素就行。
**3. HTML 文档的基本骨架**
```html
<!DOCTYPE html> <!-- 告诉浏览器：这是 HTML5 文档 -->
<html lang="zh-CN"> <!-- 根元素，lang 属性很重要（SEO + 屏幕阅读器） -->
<head> <!-- 头部：元数据，不在页面上显示 -->
<meta charset="UTF-8"> <!-- 字符编码：一定要设，不然中文可能乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 响应式设计的关键：让页面适配手机屏幕 -->
<title>我的网站</title> <!-- 浏览器标签页上显示的文字 -->
<meta name="description" content="网站描述"> <!-- SEO 用的 -->
<link rel="stylesheet" href="style.css"> <!-- 引入 CSS -->
</head>
<body> <!-- 身体：页面上所有可见内容 -->
<header>网站头部</header>
<main>主要内容</main>
<footer>网站底部</footer>
<script src="script.js"></script> <!-- 引入 JS（通常放 body 末尾） -->
</body>
</html>
```
**每个标签存在的意义：**
| 标签 | 意义 | 为什么重要 |
|------|------|-----------|
| `<!DOCTYPE html>` | 声明文档类型 | 没有它浏览器会进入"怪异模式"，排版全乱 |
| `<meta charset="UTF-8">` | 字符编码 | 不设的话中文大概率变乱码 |
| `<title>` | 页面标题 | 浏览器标签页 + 搜索引擎结果标题 |
| `<meta name="description">` | 页面描述 | 在搜索结果里显示的那段话 |
| `<link>` | 引入外部资源 | CSS、图标、字体 |
| `<script>` | 引入 JavaScript | 放 body 底部避免阻塞渲染 |
四、HTML5 —— 2014 年的革命
2014 年，HTML5 正式成为 W3C 推荐标准。这是 HTML 历史上最大的一次升级，带来的东西彻底改变了 Web：
```bash
HTML5 带来的新东西：
语义化标签：
<header> → 头部区域
<nav> → 导航栏
<main> → 主要内容（一个页面只能有一个）
<article> → 独立的内容块（一篇文章、一条评论）
<section> → 内容的章节
<aside> → 侧边栏
<footer> → 底部区域
<figure> → 配图区域
以前：
<div class="header">
<div class="nav">
<div class="main">
<div class="footer">
现在：
<header>
<nav>
<main>
<footer>
```
语义化标签的好处：
- **SEO 更好** —— 搜索引擎能看懂哪里是导航、哪里是正文
- **无障碍更好** —— 屏幕阅读器可以正确跳转
- **代码更可读** —— 看标签名就知道是什么区域
**多媒体标签（直接干掉 Flash）：**
```html
<!-- 以前：视频要 Flash 插件 -->
<object data="video.swf" type="application/x-shockwave-flash"></object>
<!-- HTML5：浏览器原生播放 -->
<video controls width="640">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
你的浏览器不支持视频播放。
</video>
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
```
**Canvas —— 在网页上画图：**
```html
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100); // 画一个红色方块
</script>
```
Canvas 让浏览器可以做游戏、数据可视化、图片编辑——**不需要任何插件。**
**表单增强：**
```html
<!-- HTML4 的输入类型：text、password、checkbox、radio -->
<!-- HTML5 新增的输入类型：-->
<input type="email"> <!-- 自动校验邮箱格式 -->
<input type="url"> <!-- 自动校验 URL 格式 -->
<input type="tel"> <!-- 手机端弹出数字键盘 -->
<input type="number"> <!-- 带上下箭头 -->
<input type="date"> <!-- 日期选择器 -->
<input type="color"> <!-- 颜色选择器 -->
<input type="range"> <!-- 滑块 -->
<input type="search"> <!-- 搜索框（手机端键盘带搜索按钮） -->
<!-- 表单校验（不需要 JavaScript） -->
<input type="email" required placeholder="请输入邮箱">
<!-- 必填字段为空 → 浏览器自动提示"请填写此字段" -->
<!-- 邮箱格式不对 → 浏览器自动提示"请与所要求的格式保持一致" -->
```
五、HTML 的核心思想：语义化
"语义化"是 HTML 最重要的设计理念。**选择合适的标签来表达内容的含义，而不是只关心它长什么样。**
```html
<!-- ❌ 非语义化：只关心外观 -->
<div style="font-size: 32px; font-weight: bold;">这是一级标题</div>
<div style="color: gray; font-size: 14px;">这是副标题</div>
<!-- ✅ 语义化：用正确的标签 -->
<h1>这是一级标题</h1>
<p class="subtitle">这是副标题</p>
```
**语义化的好处：**
```
1. 搜索引擎能理解内容结构
→ <h1> 是最重要的，<h2> 是次重要的……
→ 搜索引擎把 <h1> 的内容当作页面主题
2. 屏幕阅读器能正确朗读
→ 盲人用户可以通过快捷键跳转到 <nav>、<main>、<article>
→ 读屏软件会以不同方式朗读 <h1>、<p>、<ul>
3. 代码更容易维护
→ 看到 <footer> 知道是底部，不用去看 class 名
```
**语义化五条铁律：**
```bash
1. 标题用 <h1>~<h6>，不要用 <div> 改字号冒充标题
2. 段落用 <p>，不要用 <div>
3. 列表用 <ul>/<ol> + <li>，不要用 <div> + <br>
4. 强调用 <strong> 或 <em>，不要用 <b> 或 <i>（也可以用，但语义不同）
5. 导航用 <nav>，不用 <div class="nav">
```
**是的，就算你只用一个 `<div>` + CSS 也能做出跟语义化一模一样的视觉效果。但搜索引擎和辅助工具看不到 CSS——它们只看 HTML 结构。** 这就是语义化的价值。
六、写 HTML 的常见误区
| 误区 | ❌ 错误做法 | ✅ 正确做法 |
|------|-----------|-----------|
| 多重 H1 | 一个页面多个 `<h1>` | 每个页面**唯一一个** `<h1>` |
| DIV 滥用 | 能用 DIV 就不用语义标签 | 优先用 `<header>/<nav>/<main>/<article>` |
| 忽略 alt | `<img src="photo.jpg">` | `<img src="photo.jpg" alt="描述文字">` |
| 内联样式 | 所有样式写 style 属性里 | CSS 写单独文件，HTML 只负责结构 |
| script 放 head | `<script>` 在 `<head>` 里 | `<script>` 在 `</body>` 前面 |
| 忘了 DOCTYPE | 不写 `<!DOCTYPE html>` | 必须写，否则触发怪异模式 |
| 标签不闭合 | `<p>文字` | `<p>文字</p>`（虽然浏览器会补，但不要依赖） |
**`alt` 属性尤其重要：**
```html
<!-- 不加 alt -->
<img src="cat.jpg">
<!-- 加 alt -->
<img src="cat.jpg" alt="一只橘猫趴在键盘上睡着了">
```
`alt` 的作用：
1. 图片加载失败时，显示替代文字（用户知道这里本来是什么）
2. 屏幕阅读器朗读给盲人用户听
3. 搜索引擎理解图片内容（SEO）
**你不应该有任何一张图片没有 `alt` 属性。** `alt=""` 是可以的（装饰性图片不需要描述），但不能不写。
七、⚠️ 常见坑
**meta viewport 不设 = 手机上看网页像蚂蚁**
```html
<!-- ❌ 不设 viewport -->
<!-- 手机浏览器会缩放到 980px 宽来显示，文字小到看不见 -->
<!-- ✅ 必须设 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
这是移动端网页开发的"第一行代码"——没有它其他响应式设计全是白搭。
**编码声明要放 head 最前面**
```html
<head>
<meta charset="UTF-8"> <!-- ✅ 这是 head 里的第一行 -->
<title>我的网站</title>
</head>
<!-- 浏览器解析 HTML 时，看到 <meta charset> 之前如果已经解析了中文字符，
且不知道编码，可能会显示乱码。所以 charset 声明要放在 head 最前面。 -->
```
**Script 放 head 会阻塞渲染**
```html
<head>
<script src="big.js"></script> <!-- ❌ 下载并执行完 big.js 之前，页面什么都看不到 -->
</head>
```
两种正确做法：
```html
<!-- 方案一：放到 body 末尾（推荐） -->
<body>
...HTML 内容...
<script src="big.js"></script>
</body>
<!-- 方案二：用 defer 或 async（还是放 head，但不阻塞） -->
<head>
<script src="big.js" defer></script> <!-- 下载不阻塞，HTML 解析完再执行 -->
</head>
```
**标签嵌套不能跨类型**
```html
<!-- ❌ 错误：行内元素不能嵌套块级元素 -->
<a href="#">
<div>点击这里</div> <!-- a 是行内，div 是块级，不能这样嵌套 -->
</a>
<!-- ✅ 在 HTML5 里，a 标签可以包裹块级元素 -->
<a href="#">
<div>点击这里</div> <!-- HTML5 放宽了 a 标签的规则，这是允许的 -->
</a>
<!-- 但其他行内元素不行 -->
<span>
<p>文字</p> <!-- ❌ span 不能包 p -->
</span>
```
**表格布局（2025 年还有人这么写）**
```html
<!-- ❌ 用表格布局——2005 年的做法，不是不会用，是真不推荐 -->
<table>
<tr>
<td>左侧栏</td>
<td>右侧栏</td>
</tr>
</table>
<!-- ✅ 现代布局用 flexbox 或 grid -->
<div style="display: flex;">
<div>左侧栏</div>
<div>右侧栏</div>
</div>
```
表格只用来展示表格数据（财务报表、成绩单、对比表），不要用来做页面布局。
写在最后
HTML 是所有 Web 技术中最不起眼、但最重要的一个。
它没有 CSS 那种"画出一张漂亮页面"的快感，没有 JavaScript 那种"让页面活起来"的魔力，也没有后端语言那种"处理复杂逻辑"的成就感。它只是安静地站在最底层，默默支撑起一切。
但如果你 HTML 写得不好，上层的一切都会出问题：
- CSS 布局怎么调都调不对 → 检查 HTML 结构
- SEO 排名上不去 → 检查语义化
- 无障碍审核不过 → 检查 alt 和标签语义
- 页面加载慢 → 检查 script 放哪了
**HTML 是 Web 开发里投入产出比最高的东西**——花一周学完所有常用标签，之后每一天写代码都能用上。
而且你不用担心它过时。HTML5 是 2014 年的标准，直到今天（2025 年）仍然是所有新特性的基础。你 2015 年学的 HTML 知识，现在照样能用。这在技术圈里是一种奢侈。
本文由 AI 生成，内容仅供参考。HTML 标准和标签的详细用法请以 MDN 文档（developer.mozilla.org/zh-CN/docs/Web/HTML）为准。
—— 全文完 ——�� HTML —— 互联网的砖块，每一个网站都是从这玩意儿开始的
一、先说两句
不管你用多先进的框架、多酷炫的技术，最终浏览器里渲染的东西，本质上就是三个东西：
```
HTML → 结构（房子的框架和房间）
CSS → 样式（墙的颜色、家具的摆放）
JavaScript → 行为（开关灯、按门铃）
```
**HTML 是三个里面最重要的一个**——没有它，CSS 和 JS 没有容器可放。
HTML 的全称是 **HyperText Markup Language（超文本标记语言）**。注意它不是编程语言——它没有变量、没有逻辑判断、没有循环、没有函数。它只是一套"标记"，告诉浏览器"这是一级标题"、"这是一个段落"、"这是一张图片"。
世界上第一份 HTML 文档是 Tim Berners-Lee 在 1991 年写的。那时候 HTML 只有十几个标签。三十多年过去了，现在的 HTML 已经有 **100 多个标签**，从简单的 `<p>` 到复杂的 `<canvas>`、`<video>`、`<svg>`。
但最神奇的是：**1991 年写的那份 HTML 文档，放到今天的浏览器上仍然能正确显示。** 没有哪种技术有这种级别的向后兼容性。
二、HTML 是怎么工作的？
你写了一段 HTML，浏览器是怎么把它变成你看到的页面的？
```
你写的 HTML：
<h1>Hello World</h1>
<p>这是一段文字。</p>
浏览器做的事：
1. 下载 .html 文件（从服务器到本地）
2. 解析 HTML 字符串 → 生成 DOM 树（Document Object Model）
3. 解析 CSS → 生成 CSSOM 树
4. DOM + CSSOM → 生成渲染树
5. 计算每个元素的位置和大小（Layout）
6. 绘制到屏幕上（Paint）
整个过程叫"关键渲染路径"（Critical Rendering Path），
从收到 HTML 到用户看到画面，浏览器都在干这些事。
```
**HTML 是最宽容的语言**
写错了不会报错，浏览器会尽力"猜"你想表达什么：
```html
<!-- ❌ 忘了闭合标签 -->
<p>这是一段文字
<p>这是另一段文字
<!-- 浏览器会自己补上 </p>，把它理解成两个段落 -->
```
这在其他语言里是无法想象的。Python 缩进错了直接报错，JavaScript 少了个分号在某些情况下也会出问题。HTML 几乎永远不报错——这也是为什么有些网页在 Chrome 里正常，在 Safari 里崩了：**浏览器们"猜"的方式不一样。**
三、HTML 必知必会的核心概念
**1. 标签、元素、属性**
```html
<!-- 一个完整的 HTML 元素 -->
<a href="https://example.com" class="link">点击这里</a>
↑ ↑ ↑ ↑
标签名 属性 内容 闭合标签
<!-- 自闭合标签（没有内容的） -->
<img src="photo.jpg" alt="一张照片">
<br>
<hr>
<input type="text">
```
**2. 块级元素 vs 行内元素**
这是 HTML 最重要的概念，CSS 一切布局都基于这个：
```html
<!-- 块级元素（Block）：
- 独占一行
- 默认宽度 100%
- 可以设宽高
-->
<div>这是一个块</div>
<p>这也是一个块</p>
<h1>标题也是块</h1>
<!-- 行内元素（Inline）：
- 在一行内排列
- 宽度由内容决定
- 不能设宽高（除了一些特殊行内块）
-->
<span>这是一个行内元素</span>
<a href="#">链接也是行内</a>
<strong>加粗也是</strong>
```
**布局就是这么开始的——** 你想让几个元素横着排？用行内元素或者用 CSS 的 `display: flex` 或 `display: grid`。你想让它们竖着堆？用块级元素就行。
**3. HTML 文档的基本骨架**
```html
<!DOCTYPE html> <!-- 告诉浏览器：这是 HTML5 文档 -->
<html lang="zh-CN"> <!-- 根元素，lang 属性很重要（SEO + 屏幕阅读器） -->
<head> <!-- 头部：元数据，不在页面上显示 -->
<meta charset="UTF-8"> <!-- 字符编码：一定要设，不然中文可能乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 响应式设计的关键：让页面适配手机屏幕 -->
<title>我的网站</title> <!-- 浏览器标签页上显示的文字 -->
<meta name="description" content="网站描述"> <!-- SEO 用的 -->
<link rel="stylesheet" href="style.css"> <!-- 引入 CSS -->
</head>
<body> <!-- 身体：页面上所有可见内容 -->
<header>网站头部</header>
<main>主要内容</main>
<footer>网站底部</footer>
<script src="script.js"></script> <!-- 引入 JS（通常放 body 末尾） -->
</body>
</html>
```
**每个标签存在的意义：**
| 标签 | 意义 | 为什么重要 |
|------|------|-----------|
| `<!DOCTYPE html>` | 声明文档类型 | 没有它浏览器会进入"怪异模式"，排版全乱 |
| `<meta charset="UTF-8">` | 字符编码 | 不设的话中文大概率变乱码 |
| `<title>` | 页面标题 | 浏览器标签页 + 搜索引擎结果标题 |
| `<meta name="description">` | 页面描述 | 在搜索结果里显示的那段话 |
| `<link>` | 引入外部资源 | CSS、图标、字体 |
| `<script>` | 引入 JavaScript | 放 body 底部避免阻塞渲染 |
四、HTML5 —— 2014 年的革命
2014 年，HTML5 正式成为 W3C 推荐标准。这是 HTML 历史上最大的一次升级，带来的东西彻底改变了 Web：
```bash
HTML5 带来的新东西：
语义化标签：
<header> → 头部区域
<nav> → 导航栏
<main> → 主要内容（一个页面只能有一个）
<article> → 独立的内容块（一篇文章、一条评论）
<section> → 内容的章节
<aside> → 侧边栏
<footer> → 底部区域
<figure> → 配图区域
以前：
<div class="header">
<div class="nav">
<div class="main">
<div class="footer">
现在：
<header>
<nav>
<main>
<footer>
```
语义化标签的好处：
- **SEO 更好** —— 搜索引擎能看懂哪里是导航、哪里是正文
- **无障碍更好** —— 屏幕阅读器可以正确跳转
- **代码更可读** —— 看标签名就知道是什么区域
**多媒体标签（直接干掉 Flash）：**
```html
<!-- 以前：视频要 Flash 插件 -->
<object data="video.swf" type="application/x-shockwave-flash"></object>
<!-- HTML5：浏览器原生播放 -->
<video controls width="640">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
你的浏览器不支持视频播放。
</video>
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
```
**Canvas —— 在网页上画图：**
```html
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100); // 画一个红色方块
</script>
```
Canvas 让浏览器可以做游戏、数据可视化、图片编辑——**不需要任何插件。**
**表单增强：**
```html
<!-- HTML4 的输入类型：text、password、checkbox、radio -->
<!-- HTML5 新增的输入类型：-->
<input type="email"> <!-- 自动校验邮箱格式 -->
<input type="url"> <!-- 自动校验 URL 格式 -->
<input type="tel"> <!-- 手机端弹出数字键盘 -->
<input type="number"> <!-- 带上下箭头 -->
<input type="date"> <!-- 日期选择器 -->
<input type="color"> <!-- 颜色选择器 -->
<input type="range"> <!-- 滑块 -->
<input type="search"> <!-- 搜索框（手机端键盘带搜索按钮） -->
<!-- 表单校验（不需要 JavaScript） -->
<input type="email" required placeholder="请输入邮箱">
<!-- 必填字段为空 → 浏览器自动提示"请填写此字段" -->
<!-- 邮箱格式不对 → 浏览器自动提示"请与所要求的格式保持一致" -->
```
五、HTML 的核心思想：语义化
"语义化"是 HTML 最重要的设计理念。**选择合适的标签来表达内容的含义，而不是只关心它长什么样。**
```html
<!-- ❌ 非语义化：只关心外观 -->
<div style="font-size: 32px; font-weight: bold;">这是一级标题</div>
<div style="color: gray; font-size: 14px;">这是副标题</div>
<!-- ✅ 语义化：用正确的标签 -->
<h1>这是一级标题</h1>
<p class="subtitle">这是副标题</p>
```
**语义化的好处：**
```
1. 搜索引擎能理解内容结构
→ <h1> 是最重要的，<h2> 是次重要的……
→ 搜索引擎把 <h1> 的内容当作页面主题
2. 屏幕阅读器能正确朗读
→ 盲人用户可以通过快捷键跳转到 <nav>、<main>、<article>
→ 读屏软件会以不同方式朗读 <h1>、<p>、<ul>
3. 代码更容易维护
→ 看到 <footer> 知道是底部，不用去看 class 名
```
**语义化五条铁律：**
```bash
1. 标题用 <h1>~<h6>，不要用 <div> 改字号冒充标题
2. 段落用 <p>，不要用 <div>
3. 列表用 <ul>/<ol> + <li>，不要用 <div> + <br>
4. 强调用 <strong> 或 <em>，不要用 <b> 或 <i>（也可以用，但语义不同）
5. 导航用 <nav>，不用 <div class="nav">
```
**是的，就算你只用一个 `<div>` + CSS 也能做出跟语义化一模一样的视觉效果。但搜索引擎和辅助工具看不到 CSS——它们只看 HTML 结构。** 这就是语义化的价值。
六、写 HTML 的常见误区
| 误区 | ❌ 错误做法 | ✅ 正确做法 |
|------|-----------|-----------|
| 多重 H1 | 一个页面多个 `<h1>` | 每个页面**唯一一个** `<h1>` |
| DIV 滥用 | 能用 DIV 就不用语义标签 | 优先用 `<header>/<nav>/<main>/<article>` |
| 忽略 alt | `<img src="photo.jpg">` | `<img src="photo.jpg" alt="描述文字">` |
| 内联样式 | 所有样式写 style 属性里 | CSS 写单独文件，HTML 只负责结构 |
| script 放 head | `<script>` 在 `<head>` 里 | `<script>` 在 `</body>` 前面 |
| 忘了 DOCTYPE | 不写 `<!DOCTYPE html>` | 必须写，否则触发怪异模式 |
| 标签不闭合 | `<p>文字` | `<p>文字</p>`（虽然浏览器会补，但不要依赖） |
**`alt` 属性尤其重要：**
```html
<!-- 不加 alt -->
<img src="cat.jpg">
<!-- 加 alt -->
<img src="cat.jpg" alt="一只橘猫趴在键盘上睡着了">
```
`alt` 的作用：
1. 图片加载失败时，显示替代文字（用户知道这里本来是什么）
2. 屏幕阅读器朗读给盲人用户听
3. 搜索引擎理解图片内容（SEO）
**你不应该有任何一张图片没有 `alt` 属性。** `alt=""` 是可以的（装饰性图片不需要描述），但不能不写。
七、⚠️ 常见坑
**meta viewport 不设 = 手机上看网页像蚂蚁**
```html
<!-- ❌ 不设 viewport -->
<!-- 手机浏览器会缩放到 980px 宽来显示，文字小到看不见 -->
<!-- ✅ 必须设 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
这是移动端网页开发的"第一行代码"——没有它其他响应式设计全是白搭。
**编码声明要放 head 最前面**
```html
<head>
<meta charset="UTF-8"> <!-- ✅ 这是 head 里的第一行 -->
<title>我的网站</title>
</head>
<!-- 浏览器解析 HTML 时，看到 <meta charset> 之前如果已经解析了中文字符，
且不知道编码，可能会显示乱码。所以 charset 声明要放在 head 最前面。 -->
```
**Script 放 head 会阻塞渲染**
```html
<head>
<script src="big.js"></script> <!-- ❌ 下载并执行完 big.js 之前，页面什么都看不到 -->
</head>
```
两种正确做法：
```html
<!-- 方案一：放到 body 末尾（推荐） -->
<body>
...HTML 内容...
<script src="big.js"></script>
</body>
<!-- 方案二：用 defer 或 async（还是放 head，但不阻塞） -->
<head>
<script src="big.js" defer></script> <!-- 下载不阻塞，HTML 解析完再执行 -->
</head>
```
**标签嵌套不能跨类型**
```html
<!-- ❌ 错误：行内元素不能嵌套块级元素 -->
<a href="#">
<div>点击这里</div> <!-- a 是行内，div 是块级，不能这样嵌套 -->
</a>
<!-- ✅ 在 HTML5 里，a 标签可以包裹块级元素 -->
<a href="#">
<div>点击这里</div> <!-- HTML5 放宽了 a 标签的规则，这是允许的 -->
</a>
<!-- 但其他行内元素不行 -->
<span>
<p>文字</p> <!-- ❌ span 不能包 p -->
</span>
```
**表格布局（2025 年还有人这么写）**
```html
<!-- ❌ 用表格布局——2005 年的做法，不是不会用，是真不推荐 -->
<table>
<tr>
<td>左侧栏</td>
<td>右侧栏</td>
</tr>
</table>
<!-- ✅ 现代布局用 flexbox 或 grid -->
<div style="display: flex;">
<div>左侧栏</div>
<div>右侧栏</div>
</div>
```
表格只用来展示表格数据（财务报表、成绩单、对比表），不要用来做页面布局。
写在最后
HTML 是所有 Web 技术中最不起眼、但最重要的一个。
它没有 CSS 那种"画出一张漂亮页面"的快感，没有 JavaScript 那种"让页面活起来"的魔力，也没有后端语言那种"处理复杂逻辑"的成就感。它只是安静地站在最底层，默默支撑起一切。
但如果你 HTML 写得不好，上层的一切都会出问题：
- CSS 布局怎么调都调不对 → 检查 HTML 结构
- SEO 排名上不去 → 检查语义化
- 无障碍审核不过 → 检查 alt 和标签语义
- 页面加载慢 → 检查 script 放哪了
**HTML 是 Web 开发里投入产出比最高的东西**——花一周学完所有常用标签，之后每一天写代码都能用上。
而且你不用担心它过时。HTML5 是 2014 年的标准，直到今天（2025 年）仍然是所有新特性的基础。你 2015 年学的 HTML 知识，现在照样能用。这在技术圈里是一种奢侈。
本文由 AI 生成，内容仅供参考。HTML 标准和标签的详细用法请以 MDN 文档（developer.mozilla.org/zh-CN/docs/Web/HTML）为准。
—— 全文完 ——�� HTML —— 互联网的砖块，每一个网站都是从这玩意儿开始的
一、先说两句
不管你用多先进的框架、多酷炫的技术，最终浏览器里渲染的东西，本质上就是三个东西：
```
HTML → 结构（房子的框架和房间）
CSS → 样式（墙的颜色、家具的摆放）
JavaScript → 行为（开关灯、按门铃）
```
**HTML 是三个里面最重要的一个**——没有它，CSS 和 JS 没有容器可放。
HTML 的全称是 **HyperText Markup Language（超文本标记语言）**。注意它不是编程语言——它没有变量、没有逻辑判断、没有循环、没有函数。它只是一套"标记"，告诉浏览器"这是一级标题"、"这是一个段落"、"这是一张图片"。
世界上第一份 HTML 文档是 Tim Berners-Lee 在 1991 年写的。那时候 HTML 只有十几个标签。三十多年过去了，现在的 HTML 已经有 **100 多个标签**，从简单的 `<p>` 到复杂的 `<canvas>`、`<video>`、`<svg>`。
但最神奇的是：**1991 年写的那份 HTML 文档，放到今天的浏览器上仍然能正确显示。** 没有哪种技术有这种级别的向后兼容性。
二、HTML 是怎么工作的？
你写了一段 HTML，浏览器是怎么把它变成你看到的页面的？
```
你写的 HTML：
<h1>Hello World</h1>
<p>这是一段文字。</p>
浏览器做的事：
1. 下载 .html 文件（从服务器到本地）
2. 解析 HTML 字符串 → 生成 DOM 树（Document Object Model）
3. 解析 CSS → 生成 CSSOM 树
4. DOM + CSSOM → 生成渲染树
5. 计算每个元素的位置和大小（Layout）
6. 绘制到屏幕上（Paint）
整个过程叫"关键渲染路径"（Critical Rendering Path），
从收到 HTML 到用户看到画面，浏览器都在干这些事。
```
**HTML 是最宽容的语言**
写错了不会报错，浏览器会尽力"猜"你想表达什么：
```html
<!-- ❌ 忘了闭合标签 -->
<p>这是一段文字
<p>这是另一段文字
<!-- 浏览器会自己补上 </p>，把它理解成两个段落 -->
```
这在其他语言里是无法想象的。Python 缩进错了直接报错，JavaScript 少了个分号在某些情况下也会出问题。HTML 几乎永远不报错——这也是为什么有些网页在 Chrome 里正常，在 Safari 里崩了：**浏览器们"猜"的方式不一样。**
三、HTML 必知必会的核心概念
**1. 标签、元素、属性**
```html
<!-- 一个完整的 HTML 元素 -->
<a href="https://example.com" class="link">点击这里</a>
↑ ↑ ↑ ↑
标签名 属性 内容 闭合标签
<!-- 自闭合标签（没有内容的） -->
<img src="photo.jpg" alt="一张照片">
<br>
<hr>
<input type="text">
```
**2. 块级元素 vs 行内元素**
这是 HTML 最重要的概念，CSS 一切布局都基于这个：
```html
<!-- 块级元素（Block）：
- 独占一行
- 默认宽度 100%
- 可以设宽高
-->
<div>这是一个块</div>
<p>这也是一个块</p>
<h1>标题也是块</h1>
<!-- 行内元素（Inline）：
- 在一行内排列
- 宽度由内容决定
- 不能设宽高（除了一些特殊行内块）
-->
<span>这是一个行内元素</span>
<a href="#">链接也是行内</a>
<strong>加粗也是</strong>
```
**布局就是这么开始的——** 你想让几个元素横着排？用行内元素或者用 CSS 的 `display: flex` 或 `display: grid`。你想让它们竖着堆？用块级元素就行。
**3. HTML 文档的基本骨架**
```html
<!DOCTYPE html> <!-- 告诉浏览器：这是 HTML5 文档 -->
<html lang="zh-CN"> <!-- 根元素，lang 属性很重要（SEO + 屏幕阅读器） -->
<head> <!-- 头部：元数据，不在页面上显示 -->
<meta charset="UTF-8"> <!-- 字符编码：一定要设，不然中文可能乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 响应式设计的关键：让页面适配手机屏幕 -->
<title>我的网站</title> <!-- 浏览器标签页上显示的文字 -->
<meta name="description" content="网站描述"> <!-- SEO 用的 -->
<link rel="stylesheet" href="style.css"> <!-- 引入 CSS -->
</head>
<body> <!-- 身体：页面上所有可见内容 -->
<header>网站头部</header>
<main>主要内容</main>
<footer>网站底部</footer>
<script src="script.js"></script> <!-- 引入 JS（通常放 body 末尾） -->
</body>
</html>
```
**每个标签存在的意义：**
| 标签 | 意义 | 为什么重要 |
|------|------|-----------|
| `<!DOCTYPE html>` | 声明文档类型 | 没有它浏览器会进入"怪异模式"，排版全乱 |
| `<meta charset="UTF-8">` | 字符编码 | 不设的话中文大概率变乱码 |
| `<title>` | 页面标题 | 浏览器标签页 + 搜索引擎结果标题 |
| `<meta name="description">` | 页面描述 | 在搜索结果里显示的那段话 |
| `<link>` | 引入外部资源 | CSS、图标、字体 |
| `<script>` | 引入 JavaScript | 放 body 底部避免阻塞渲染 |
四、HTML5 —— 2014 年的革命
2014 年，HTML5 正式成为 W3C 推荐标准。这是 HTML 历史上最大的一次升级，带来的东西彻底改变了 Web：
```bash
HTML5 带来的新东西：
语义化标签：
<header> → 头部区域
<nav> → 导航栏
<main> → 主要内容（一个页面只能有一个）
<article> → 独立的内容块（一篇文章、一条评论）
<section> → 内容的章节
<aside> → 侧边栏
<footer> → 底部区域
<figure> → 配图区域
以前：
<div class="header">
<div class="nav">
<div class="main">
<div class="footer">
现在：
<header>
<nav>
<main>
<footer>
```
语义化标签的好处：
- **SEO 更好** —— 搜索引擎能看懂哪里是导航、哪里是正文
- **无障碍更好** —— 屏幕阅读器可以正确跳转
- **代码更可读** —— 看标签名就知道是什么区域
**多媒体标签（直接干掉 Flash）：**
```html
<!-- 以前：视频要 Flash 插件 -->
<object data="video.swf" type="application/x-shockwave-flash"></object>
<!-- HTML5：浏览器原生播放 -->
<video controls width="640">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
你的浏览器不支持视频播放。
</video>
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
```
**Canvas —— 在网页上画图：**
```html
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100); // 画一个红色方块
</script>
```
Canvas 让浏览器可以做游戏、数据可视化、图片编辑——**不需要任何插件。**
**表单增强：**
```html
<!-- HTML4 的输入类型：text、password、checkbox、radio -->
<!-- HTML5 新增的输入类型：-->
<input type="email"> <!-- 自动校验邮箱格式 -->
<input type="url"> <!-- 自动校验 URL 格式 -->
<input type="tel"> <!-- 手机端弹出数字键盘 -->
<input type="number"> <!-- 带上下箭头 -->
<input type="date"> <!-- 日期选择器 -->
<input type="color"> <!-- 颜色选择器 -->
<input type="range"> <!-- 滑块 -->
<input type="search"> <!-- 搜索框（手机端键盘带搜索按钮） -->
<!-- 表单校验（不需要 JavaScript） -->
<input type="email" required placeholder="请输入邮箱">
<!-- 必填字段为空 → 浏览器自动提示"请填写此字段" -->
<!-- 邮箱格式不对 → 浏览器自动提示"请与所要求的格式保持一致" -->
```
五、HTML 的核心思想：语义化
"语义化"是 HTML 最重要的设计理念。**选择合适的标签来表达内容的含义，而不是只关心它长什么样。**
```html
<!-- ❌ 非语义化：只关心外观 -->
<div style="font-size: 32px; font-weight: bold;">这是一级标题</div>
<div style="color: gray; font-size: 14px;">这是副标题</div>
<!-- ✅ 语义化：用正确的标签 -->
<h1>这是一级标题</h1>
<p class="subtitle">这是副标题</p>
```
**语义化的好处：**
```
1. 搜索引擎能理解内容结构
→ <h1> 是最重要的，<h2> 是次重要的……
→ 搜索引擎把 <h1> 的内容当作页面主题
2. 屏幕阅读器能正确朗读
→ 盲人用户可以通过快捷键跳转到 <nav>、<main>、<article>
→ 读屏软件会以不同方式朗读 <h1>、<p>、<ul>
3. 代码更容易维护
→ 看到 <footer> 知道是底部，不用去看 class 名
```
**语义化五条铁律：**
```bash
1. 标题用 <h1>~<h6>，不要用 <div> 改字号冒充标题
2. 段落用 <p>，不要用 <div>
3. 列表用 <ul>/<ol> + <li>，不要用 <div> + <br>
4. 强调用 <strong> 或 <em>，不要用 <b> 或 <i>（也可以用，但语义不同）
5. 导航用 <nav>，不用 <div class="nav">
```
**是的，就算你只用一个 `<div>` + CSS 也能做出跟语义化一模一样的视觉效果。但搜索引擎和辅助工具看不到 CSS——它们只看 HTML 结构。** 这就是语义化的价值。
六、写 HTML 的常见误区
| 误区 | ❌ 错误做法 | ✅ 正确做法 |
|------|-----------|-----------|
| 多重 H1 | 一个页面多个 `<h1>` | 每个页面**唯一一个** `<h1>` |
| DIV 滥用 | 能用 DIV 就不用语义标签 | 优先用 `<header>/<nav>/<main>/<article>` |
| 忽略 alt | `<img src="photo.jpg">` | `<img src="photo.jpg" alt="描述文字">` |
| 内联样式 | 所有样式写 style 属性里 | CSS 写单独文件，HTML 只负责结构 |
| script 放 head | `<script>` 在 `<head>` 里 | `<script>` 在 `</body>` 前面 |
| 忘了 DOCTYPE | 不写 `<!DOCTYPE html>` | 必须写，否则触发怪异模式 |
| 标签不闭合 | `<p>文字` | `<p>文字</p>`（虽然浏览器会补，但不要依赖） |
**`alt` 属性尤其重要：**
```html
<!-- 不加 alt -->
<img src="cat.jpg">
<!-- 加 alt -->
<img src="cat.jpg" alt="一只橘猫趴在键盘上睡着了">
```
`alt` 的作用：
1. 图片加载失败时，显示替代文字（用户知道这里本来是什么）
2. 屏幕阅读器朗读给盲人用户听
3. 搜索引擎理解图片内容（SEO）
**你不应该有任何一张图片没有 `alt` 属性。** `alt=""` 是可以的（装饰性图片不需要描述），但不能不写。
七、⚠️ 常见坑
**meta viewport 不设 = 手机上看网页像蚂蚁**
```html
<!-- ❌ 不设 viewport -->
<!-- 手机浏览器会缩放到 980px 宽来显示，文字小到看不见 -->
<!-- ✅ 必须设 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
这是移动端网页开发的"第一行代码"——没有它其他响应式设计全是白搭。
**编码声明要放 head 最前面**
```html
<head>
<meta charset="UTF-8"> <!-- ✅ 这是 head 里的第一行 -->
<title>我的网站</title>
</head>
<!-- 浏览器解析 HTML 时，看到 <meta charset> 之前如果已经解析了中文字符，
且不知道编码，可能会显示乱码。所以 charset 声明要放在 head 最前面。 -->
```
**Script 放 head 会阻塞渲染**
```html
<head>
<script src="big.js"></script> <!-- ❌ 下载并执行完 big.js 之前，页面什么都看不到 -->
</head>
```
两种正确做法：
```html
<!-- 方案一：放到 body 末尾（推荐） -->
<body>
...HTML 内容...
<script src="big.js"></script>
</body>
<!-- 方案二：用 defer 或 async（还是放 head，但不阻塞） -->
<head>
<script src="big.js" defer></script> <!-- 下载不阻塞，HTML 解析完再执行 -->
</head>
```
**标签嵌套不能跨类型**
```html
<!-- ❌ 错误：行内元素不能嵌套块级元素 -->
<a href="#">
<div>点击这里</div> <!-- a 是行内，div 是块级，不能这样嵌套 -->
</a>
<!-- ✅ 在 HTML5 里，a 标签可以包裹块级元素 -->
<a href="#">
<div>点击这里</div> <!-- HTML5 放宽了 a 标签的规则，这是允许的 -->
</a>
<!-- 但其他行内元素不行 -->
<span>
<p>文字</p> <!-- ❌ span 不能包 p -->
</span>
```
**表格布局（2025 年还有人这么写）**
```html
<!-- ❌ 用表格布局——2005 年的做法，不是不会用，是真不推荐 -->
<table>
<tr>
<td>左侧栏</td>
<td>右侧栏</td>
</tr>
</table>
<!-- ✅ 现代布局用 flexbox 或 grid -->
<div style="display: flex;">
<div>左侧栏</div>
<div>右侧栏</div>
</div>
```
表格只用来展示表格数据（财务报表、成绩单、对比表），不要用来做页面布局。
写在最后
HTML 是所有 Web 技术中最不起眼、但最重要的一个。
它没有 CSS 那种"画出一张漂亮页面"的快感，没有 JavaScript 那种"让页面活起来"的魔力，也没有后端语言那种"处理复杂逻辑"的成就感。它只是安静地站在最底层，默默支撑起一切。
但如果你 HTML 写得不好，上层的一切都会出问题：
- CSS 布局怎么调都调不对 → 检查 HTML 结构
- SEO 排名上不去 → 检查语义化
- 无障碍审核不过 → 检查 alt 和标签语义
- 页面加载慢 → 检查 script 放哪了
**HTML 是 Web 开发里投入产出比最高的东西**——花一周学完所有常用标签，之后每一天写代码都能用上。
而且你不用担心它过时。HTML5 是 2014 年的标准，直到今天（2025 年）仍然是所有新特性的基础。你 2015 年学的 HTML 知识，现在照样能用。这在技术圈里是一种奢侈。
本文由 AI 生成，内容仅供参考。HTML 标准和标签的详细用法请以 MDN 文档（developer.mozilla.org/zh-CN/docs/Web/HTML）为准。
—— 全文完 ——
�� HTML —— 互联网的砖块，每一个网站都是从这玩意儿开始的
一、先说两句
不管你用多先进的框架、多酷炫的技术，最终浏览器里渲染的东西，本质上就是三个东西：
```
HTML → 结构（房子的框架和房间）
CSS → 样式（墙的颜色、家具的摆放）
JavaScript → 行为（开关灯、按门铃）
```
**HTML 是三个里面最重要的一个**——没有它，CSS 和 JS 没有容器可放。
HTML 的全称是 **HyperText Markup Language（超文本标记语言）**。注意它不是编程语言——它没有变量、没有逻辑判断、没有循环、没有函数。它只是一套"标记"，告诉浏览器"这是一级标题"、"这是一个段落"、"这是一张图片"。
世界上第一份 HTML 文档是 Tim Berners-Lee 在 1991 年写的。那时候 HTML 只有十几个标签。三十多年过去了，现在的 HTML 已经有 **100 多个标签**，从简单的 `<p>` 到复杂的 `<canvas>`、`<video>`、`<svg>`。
但最神奇的是：**1991 年写的那份 HTML 文档，放到今天的浏览器上仍然能正确显示。** 没有哪种技术有这种级别的向后兼容性。
二、HTML 是怎么工作的？
你写了一段 HTML，浏览器是怎么把它变成你看到的页面的？
```
你写的 HTML：
<h1>Hello World</h1>
<p>这是一段文字。</p>
浏览器做的事：
1. 下载 .html 文件（从服务器到本地）
2. 解析 HTML 字符串 → 生成 DOM 树（Document Object Model）
3. 解析 CSS → 生成 CSSOM 树
4. DOM + CSSOM → 生成渲染树
5. 计算每个元素的位置和大小（Layout）
6. 绘制到屏幕上（Paint）
整个过程叫"关键渲染路径"（Critical Rendering Path），
从收到 HTML 到用户看到画面，浏览器都在干这些事。
```
**HTML 是最宽容的语言**
写错了不会报错，浏览器会尽力"猜"你想表达什么：
```html
<!-- ❌ 忘了闭合标签 -->
<p>这是一段文字
<p>这是另一段文字
<!-- 浏览器会自己补上 </p>，把它理解成两个段落 -->
```
这在其他语言里是无法想象的。Python 缩进错了直接报错，JavaScript 少了个分号在某些情况下也会出问题。HTML 几乎永远不报错——这也是为什么有些网页在 Chrome 里正常，在 Safari 里崩了：**浏览器们"猜"的方式不一样。**
三、HTML 必知必会的核心概念
**1. 标签、元素、属性**
```html
<!-- 一个完整的 HTML 元素 -->
<a href="https://example.com" class="link">点击这里</a>
↑ ↑ ↑ ↑
标签名 属性 内容 闭合标签
<!-- 自闭合标签（没有内容的） -->
<img src="photo.jpg" alt="一张照片">
<br>
<hr>
<input type="text">
```
**2. 块级元素 vs 行内元素**
这是 HTML 最重要的概念，CSS 一切布局都基于这个：
```html
<!-- 块级元素（Block）：
- 独占一行
- 默认宽度 100%
- 可以设宽高
-->
<div>这是一个块</div>
<p>这也是一个块</p>
<h1>标题也是块</h1>
<!-- 行内元素（Inline）：
- 在一行内排列
- 宽度由内容决定
- 不能设宽高（除了一些特殊行内块）
-->
<span>这是一个行内元素</span>
<a href="#">链接也是行内</a>
<strong>加粗也是</strong>
```
**布局就是这么开始的——** 你想让几个元素横着排？用行内元素或者用 CSS 的 `display: flex` 或 `display: grid`。你想让它们竖着堆？用块级元素就行。
**3. HTML 文档的基本骨架**
```html
<!DOCTYPE html> <!-- 告诉浏览器：这是 HTML5 文档 -->
<html lang="zh-CN"> <!-- 根元素，lang 属性很重要（SEO + 屏幕阅读器） -->
<head> <!-- 头部：元数据，不在页面上显示 -->
<meta charset="UTF-8"> <!-- 字符编码：一定要设，不然中文可能乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 响应式设计的关键：让页面适配手机屏幕 -->
<title>我的网站</title> <!-- 浏览器标签页上显示的文字 -->
<meta name="description" content="网站描述"> <!-- SEO 用的 -->
<link rel="stylesheet" href="style.css"> <!-- 引入 CSS -->
</head>
<body> <!-- 身体：页面上所有可见内容 -->
<header>网站头部</header>
<main>主要内容</main>
<footer>网站底部</footer>
<script src="script.js"></script> <!-- 引入 JS（通常放 body 末尾） -->
</body>
</html>
```
**每个标签存在的意义：**
| 标签 | 意义 | 为什么重要 |
|------|------|-----------|
| `<!DOCTYPE html>` | 声明文档类型 | 没有它浏览器会进入"怪异模式"，排版全乱 |
| `<meta charset="UTF-8">` | 字符编码 | 不设的话中文大概率变乱码 |
| `<title>` | 页面标题 | 浏览器标签页 + 搜索引擎结果标题 |
| `<meta name="description">` | 页面描述 | 在搜索结果里显示的那段话 |
| `<link>` | 引入外部资源 | CSS、图标、字体 |
| `<script>` | 引入 JavaScript | 放 body 底部避免阻塞渲染 |
四、HTML5 —— 2014 年的革命
2014 年，HTML5 正式成为 W3C 推荐标准。这是 HTML 历史上最大的一次升级，带来的东西彻底改变了 Web：
```bash
HTML5 带来的新东西：
语义化标签：
<header> → 头部区域
<nav> → 导航栏
<main> → 主要内容（一个页面只能有一个）
<article> → 独立的内容块（一篇文章、一条评论）
<section> → 内容的章节
<aside> → 侧边栏
<footer> → 底部区域
<figure> → 配图区域
以前：
<div class="header">
<div class="nav">
<div class="main">
<div class="footer">
现在：
<header>
<nav>
<main>
<footer>
```
语义化标签的好处：
- **SEO 更好** —— 搜索引擎能看懂哪里是导航、哪里是正文
- **无障碍更好** —— 屏幕阅读器可以正确跳转
- **代码更可读** —— 看标签名就知道是什么区域
**多媒体标签（直接干掉 Flash）：**
```html
<!-- 以前：视频要 Flash 插件 -->
<object data="video.swf" type="application/x-shockwave-flash"></object>
<!-- HTML5：浏览器原生播放 -->
<video controls width="640">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
你的浏览器不支持视频播放。
</video>
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
```
**Canvas —— 在网页上画图：**
```html
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100); // 画一个红色方块
</script>
```
Canvas 让浏览器可以做游戏、数据可视化、图片编辑——**不需要任何插件。**
**表单增强：**
```html
<!-- HTML4 的输入类型：text、password、checkbox、radio -->
<!-- HTML5 新增的输入类型：-->
<input type="email"> <!-- 自动校验邮箱格式 -->
<input type="url"> <!-- 自动校验 URL 格式 -->
<input type="tel"> <!-- 手机端弹出数字键盘 -->
<input type="number"> <!-- 带上下箭头 -->
<input type="date"> <!-- 日期选择器 -->
<input type="color"> <!-- 颜色选择器 -->
<input type="range"> <!-- 滑块 -->
<input type="search"> <!-- 搜索框（手机端键盘带搜索按钮） -->
<!-- 表单校验（不需要 JavaScript） -->
<input type="email" required placeholder="请输入邮箱">
<!-- 必填字段为空 → 浏览器自动提示"请填写此字段" -->
<!-- 邮箱格式不对 → 浏览器自动提示"请与所要求的格式保持一致" -->
```
五、HTML 的核心思想：语义化
"语义化"是 HTML 最重要的设计理念。**选择合适的标签来表达内容的含义，而不是只关心它长什么样。**
```html
<!-- ❌ 非语义化：只关心外观 -->
<div style="font-size: 32px; font-weight: bold;">这是一级标题</div>
<div style="color: gray; font-size: 14px;">这是副标题</div>
<!-- ✅ 语义化：用正确的标签 -->
<h1>这是一级标题</h1>
<p class="subtitle">这是副标题</p>
```
**语义化的好处：**
```
1. 搜索引擎能理解内容结构
→ <h1> 是最重要的，<h2> 是次重要的……
→ 搜索引擎把 <h1> 的内容当作页面主题
2. 屏幕阅读器能正确朗读
→ 盲人用户可以通过快捷键跳转到 <nav>、<main>、<article>
→ 读屏软件会以不同方式朗读 <h1>、<p>、<ul>
3. 代码更容易维护
→ 看到 <footer> 知道是底部，不用去看 class 名
```
**语义化五条铁律：**
```bash
1. 标题用 <h1>~<h6>，不要用 <div> 改字号冒充标题
2. 段落用 <p>，不要用 <div>
3. 列表用 <ul>/<ol> + <li>，不要用 <div> + <br>
4. 强调用 <strong> 或 <em>，不要用 <b> 或 <i>（也可以用，但语义不同）
5. 导航用 <nav>，不用 <div class="nav">
```
**是的，就算你只用一个 `<div>` + CSS 也能做出跟语义化一模一样的视觉效果。但搜索引擎和辅助工具看不到 CSS——它们只看 HTML 结构。** 这就是语义化的价值。
六、写 HTML 的常见误区
| 误区 | ❌ 错误做法 | ✅ 正确做法 |
|------|-----------|-----------|
| 多重 H1 | 一个页面多个 `<h1>` | 每个页面**唯一一个** `<h1>` |
| DIV 滥用 | 能用 DIV 就不用语义标签 | 优先用 `<header>/<nav>/<main>/<article>` |
| 忽略 alt | `<img src="photo.jpg">` | `<img src="photo.jpg" alt="描述文字">` |
| 内联样式 | 所有样式写 style 属性里 | CSS 写单独文件，HTML 只负责结构 |
| script 放 head | `<script>` 在 `<head>` 里 | `<script>` 在 `</body>` 前面 |
| 忘了 DOCTYPE | 不写 `<!DOCTYPE html>` | 必须写，否则触发怪异模式 |
| 标签不闭合 | `<p>文字` | `<p>文字</p>`（虽然浏览器会补，但不要依赖） |
**`alt` 属性尤其重要：**
```html
<!-- 不加 alt -->
<img src="cat.jpg">
<!-- 加 alt -->
<img src="cat.jpg" alt="一只橘猫趴在键盘上睡着了">
```
`alt` 的作用：
1. 图片加载失败时，显示替代文字（用户知道这里本来是什么）
2. 屏幕阅读器朗读给盲人用户听
3. 搜索引擎理解图片内容（SEO）
**你不应该有任何一张图片没有 `alt` 属性。** `alt=""` 是可以的（装饰性图片不需要描述），但不能不写。
七、⚠️ 常见坑
**meta viewport 不设 = 手机上看网页像蚂蚁**
```html
<!-- ❌ 不设 viewport -->
<!-- 手机浏览器会缩放到 980px 宽来显示，文字小到看不见 -->
<!-- ✅ 必须设 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
这是移动端网页开发的"第一行代码"——没有它其他响应式设计全是白搭。
**编码声明要放 head 最前面**
```html
<head>
<meta charset="UTF-8"> <!-- ✅ 这是 head 里的第一行 -->
<title>我的网站</title>
</head>
<!-- 浏览器解析 HTML 时，看到 <meta charset> 之前如果已经解析了中文字符，
且不知道编码，可能会显示乱码。所以 charset 声明要放在 head 最前面。 -->
```
**Script 放 head 会阻塞渲染**
```html
<head>
<script src="big.js"></script> <!-- ❌ 下载并执行完 big.js 之前，页面什么都看不到 -->
</head>
```
两种正确做法：
```html
<!-- 方案一：放到 body 末尾（推荐） -->
<body>
...HTML 内容...
<script src="big.js"></script>
</body>
<!-- 方案二：用 defer 或 async（还是放 head，但不阻塞） -->
<head>
<script src="big.js" defer></script> <!-- 下载不阻塞，HTML 解析完再执行 -->
</head>
```
**标签嵌套不能跨类型**
```html
<!-- ❌ 错误：行内元素不能嵌套块级元素 -->
<a href="#">
<div>点击这里</div> <!-- a 是行内，div 是块级，不能这样嵌套 -->
</a>
<!-- ✅ 在 HTML5 里，a 标签可以包裹块级元素 -->
<a href="#">
<div>点击这里</div> <!-- HTML5 放宽了 a 标签的规则，这是允许的 -->
</a>
<!-- 但其他行内元素不行 -->
<span>
<p>文字</p> <!-- ❌ span 不能包 p -->
</span>
```
**表格布局（2025 年还有人这么写）**
```html
<!-- ❌ 用表格布局——2005 年的做法，不是不会用，是真不推荐 -->
<table>
<tr>
<td>左侧栏</td>
<td>右侧栏</td>
</tr>
</table>
<!-- ✅ 现代布局用 flexbox 或 grid -->
<div style="display: flex;">
<div>左侧栏</div>
<div>右侧栏</div>
</div>
```
表格只用来展示表格数据（财务报表、成绩单、对比表），不要用来做页面布局。
写在最后
HTML 是所有 Web 技术中最不起眼、但最重要的一个。
它没有 CSS 那种"画出一张漂亮页面"的快感，没有 JavaScript 那种"让页面活起来"的魔力，也没有后端语言那种"处理复杂逻辑"的成就感。它只是安静地站在最底层，默默支撑起一切。
但如果你 HTML 写得不好，上层的一切都会出问题：
- CSS 布局怎么调都调不对 → 检查 HTML 结构
- SEO 排名上不去 → 检查语义化
- 无障碍审核不过 → 检查 alt 和标签语义
- 页面加载慢 → 检查 script 放哪了
**HTML 是 Web 开发里投入产出比最高的东西**——花一周学完所有常用标签，之后每一天写代码都能用上。
而且你不用担心它过时。HTML5 是 2014 年的标准，直到今天（2025 年）仍然是所有新特性的基础。你 2015 年学的 HTML 知识，现在照样能用。这在技术圈里是一种奢侈。
本文由 AI 生成，内容仅供参考。HTML 标准和标签的详细用法请以 MDN 文档（developer.mozilla.org/zh-CN/docs/Web/HTML）为准。
—— 全文完 ——�� HTML —— 互联网的砖块，每一个网站都是从这玩意儿开始的
一、先说两句
不管你用多先进的框架、多酷炫的技术，最终浏览器里渲染的东西，本质上就是三个东西：
```
HTML → 结构（房子的框架和房间）
CSS → 样式（墙的颜色、家具的摆放）
JavaScript → 行为（开关灯、按门铃）
```
**HTML 是三个里面最重要的一个**——没有它，CSS 和 JS 没有容器可放。
HTML 的全称是 **HyperText Markup Language（超文本标记语言）**。注意它不是编程语言——它没有变量、没有逻辑判断、没有循环、没有函数。它只是一套"标记"，告诉浏览器"这是一级标题"、"这是一个段落"、"这是一张图片"。
世界上第一份 HTML 文档是 Tim Berners-Lee 在 1991 年写的。那时候 HTML 只有十几个标签。三十多年过去了，现在的 HTML 已经有 **100 多个标签**，从简单的 `<p>` 到复杂的 `<canvas>`、`<video>`、`<svg>`。
但最神奇的是：**1991 年写的那份 HTML 文档，放到今天的浏览器上仍然能正确显示。** 没有哪种技术有这种级别的向后兼容性。
二、HTML 是怎么工作的？
你写了一段 HTML，浏览器是怎么把它变成你看到的页面的？
```
你写的 HTML：
<h1>Hello World</h1>
<p>这是一段文字。</p>
浏览器做的事：
1. 下载 .html 文件（从服务器到本地）
2. 解析 HTML 字符串 → 生成 DOM 树（Document Object Model）
3. 解析 CSS → 生成 CSSOM 树
4. DOM + CSSOM → 生成渲染树
5. 计算每个元素的位置和大小（Layout）
6. 绘制到屏幕上（Paint）
整个过程叫"关键渲染路径"（Critical Rendering Path），
从收到 HTML 到用户看到画面，浏览器都在干这些事。
```
**HTML 是最宽容的语言**
写错了不会报错，浏览器会尽力"猜"你想表达什么：
```html
<!-- ❌ 忘了闭合标签 -->
<p>这是一段文字
<p>这是另一段文字
<!-- 浏览器会自己补上 </p>，把它理解成两个段落 -->
```
这在其他语言里是无法想象的。Python 缩进错了直接报错，JavaScript 少了个分号在某些情况下也会出问题。HTML 几乎永远不报错——这也是为什么有些网页在 Chrome 里正常，在 Safari 里崩了：**浏览器们"猜"的方式不一样。**
三、HTML 必知必会的核心概念
**1. 标签、元素、属性**
```html
<!-- 一个完整的 HTML 元素 -->
<a href="https://example.com" class="link">点击这里</a>
↑ ↑ ↑ ↑
标签名 属性 内容 闭合标签
<!-- 自闭合标签（没有内容的） -->
<img src="photo.jpg" alt="一张照片">
<br>
<hr>
<input type="text">
```
**2. 块级元素 vs 行内元素**
这是 HTML 最重要的概念，CSS 一切布局都基于这个：
```html
<!-- 块级元素（Block）：
- 独占一行
- 默认宽度 100%
- 可以设宽高
-->
<div>这是一个块</div>
<p>这也是一个块</p>
<h1>标题也是块</h1>
<!-- 行内元素（Inline）：
- 在一行内排列
- 宽度由内容决定
- 不能设宽高（除了一些特殊行内块）
-->
<span>这是一个行内元素</span>
<a href="#">链接也是行内</a>
<strong>加粗也是</strong>
```
**布局就是这么开始的——** 你想让几个元素横着排？用行内元素或者用 CSS 的 `display: flex` 或 `display: grid`。你想让它们竖着堆？用块级元素就行。
**3. HTML 文档的基本骨架**
```html
<!DOCTYPE html> <!-- 告诉浏览器：这是 HTML5 文档 -->
<html lang="zh-CN"> <!-- 根元素，lang 属性很重要（SEO + 屏幕阅读器） -->
<head> <!-- 头部：元数据，不在页面上显示 -->
<meta charset="UTF-8"> <!-- 字符编码：一定要设，不然中文可能乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 响应式设计的关键：让页面适配手机屏幕 -->
<title>我的网站</title> <!-- 浏览器标签页上显示的文字 -->
<meta name="description" content="网站描述"> <!-- SEO 用的 -->
<link rel="stylesheet" href="style.css"> <!-- 引入 CSS -->
</head>
<body> <!-- 身体：页面上所有可见内容 -->
<header>网站头部</header>
<main>主要内容</main>
<footer>网站底部</footer>
<script src="script.js"></script> <!-- 引入 JS（通常放 body 末尾） -->
</body>
</html>
```
**每个标签存在的意义：**
| 标签 | 意义 | 为什么重要 |
|------|------|-----------|
| `<!DOCTYPE html>` | 声明文档类型 | 没有它浏览器会进入"怪异模式"，排版全乱 |
| `<meta charset="UTF-8">` | 字符编码 | 不设的话中文大概率变乱码 |
| `<title>` | 页面标题 | 浏览器标签页 + 搜索引擎结果标题 |
| `<meta name="description">` | 页面描述 | 在搜索结果里显示的那段话 |
| `<link>` | 引入外部资源 | CSS、图标、字体 |
| `<script>` | 引入 JavaScript | 放 body 底部避免阻塞渲染 |
四、HTML5 —— 2014 年的革命
2014 年，HTML5 正式成为 W3C 推荐标准。这是 HTML 历史上最大的一次升级，带来的东西彻底改变了 Web：
```bash
HTML5 带来的新东西：
语义化标签：
<header> → 头部区域
<nav> → 导航栏
<main> → 主要内容（一个页面只能有一个）
<article> → 独立的内容块（一篇文章、一条评论）
<section> → 内容的章节
<aside> → 侧边栏
<footer> → 底部区域
<figure> → 配图区域
以前：
<div class="header">
<div class="nav">
<div class="main">
<div class="footer">
现在：
<header>
<nav>
<main>
<footer>
```
语义化标签的好处：
- **SEO 更好** —— 搜索引擎能看懂哪里是导航、哪里是正文
- **无障碍更好** —— 屏幕阅读器可以正确跳转
- **代码更可读** —— 看标签名就知道是什么区域
**多媒体标签（直接干掉 Flash）：**
```html
<!-- 以前：视频要 Flash 插件 -->
<object data="video.swf" type="application/x-shockwave-flash"></object>
<!-- HTML5：浏览器原生播放 -->
<video controls width="640">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
你的浏览器不支持视频播放。
</video>
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
```
**Canvas —— 在网页上画图：**
```html
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100); // 画一个红色方块
</script>
```
Canvas 让浏览器可以做游戏、数据可视化、图片编辑——**不需要任何插件。**
**表单增强：**
```html
<!-- HTML4 的输入类型：text、password、checkbox、radio -->
<!-- HTML5 新增的输入类型：-->
<input type="email"> <!-- 自动校验邮箱格式 -->
<input type="url"> <!-- 自动校验 URL 格式 -->
<input type="tel"> <!-- 手机端弹出数字键盘 -->
<input type="number"> <!-- 带上下箭头 -->
<input type="date"> <!-- 日期选择器 -->
<input type="color"> <!-- 颜色选择器 -->
<input type="range"> <!-- 滑块 -->
<input type="search"> <!-- 搜索框（手机端键盘带搜索按钮） -->
<!-- 表单校验（不需要 JavaScript） -->
<input type="email" required placeholder="请输入邮箱">
<!-- 必填字段为空 → 浏览器自动提示"请填写此字段" -->
<!-- 邮箱格式不对 → 浏览器自动提示"请与所要求的格式保持一致" -->
```
五、HTML 的核心思想：语义化
"语义化"是 HTML 最重要的设计理念。**选择合适的标签来表达内容的含义，而不是只关心它长什么样。**
```html
<!-- ❌ 非语义化：只关心外观 -->
<div style="font-size: 32px; font-weight: bold;">这是一级标题</div>
<div style="color: gray; font-size: 14px;">这是副标题</div>
<!-- ✅ 语义化：用正确的标签 -->
<h1>这是一级标题</h1>
<p class="subtitle">这是副标题</p>
```
**语义化的好处：**
```
1. 搜索引擎能理解内容结构
→ <h1> 是最重要的，<h2> 是次重要的……
→ 搜索引擎把 <h1> 的内容当作页面主题
2. 屏幕阅读器能正确朗读
→ 盲人用户可以通过快捷键跳转到 <nav>、<main>、<article>
→ 读屏软件会以不同方式朗读 <h1>、<p>、<ul>
3. 代码更容易维护
→ 看到 <footer> 知道是底部，不用去看 class 名
```
**语义化五条铁律：**
```bash
1. 标题用 <h1>~<h6>，不要用 <div> 改字号冒充标题
2. 段落用 <p>，不要用 <div>
3. 列表用 <ul>/<ol> + <li>，不要用 <div> + <br>
4. 强调用 <strong> 或 <em>，不要用 <b> 或 <i>（也可以用，但语义不同）
5. 导航用 <nav>，不用 <div class="nav">
```
**是的，就算你只用一个 `<div>` + CSS 也能做出跟语义化一模一样的视觉效果。但搜索引擎和辅助工具看不到 CSS——它们只看 HTML 结构。** 这就是语义化的价值。
六、写 HTML 的常见误区
| 误区 | ❌ 错误做法 | ✅ 正确做法 |
|------|-----------|-----------|
| 多重 H1 | 一个页面多个 `<h1>` | 每个页面**唯一一个** `<h1>` |
| DIV 滥用 | 能用 DIV 就不用语义标签 | 优先用 `<header>/<nav>/<main>/<article>` |
| 忽略 alt | `<img src="photo.jpg">` | `<img src="photo.jpg" alt="描述文字">` |
| 内联样式 | 所有样式写 style 属性里 | CSS 写单独文件，HTML 只负责结构 |
| script 放 head | `<script>` 在 `<head>` 里 | `<script>` 在 `</body>` 前面 |
| 忘了 DOCTYPE | 不写 `<!DOCTYPE html>` | 必须写，否则触发怪异模式 |
| 标签不闭合 | `<p>文字` | `<p>文字</p>`（虽然浏览器会补，但不要依赖） |
**`alt` 属性尤其重要：**
```html
<!-- 不加 alt -->
<img src="cat.jpg">
<!-- 加 alt -->
<img src="cat.jpg" alt="一只橘猫趴在键盘上睡着了">
```
`alt` 的作用：
1. 图片加载失败时，显示替代文字（用户知道这里本来是什么）
2. 屏幕阅读器朗读给盲人用户听
3. 搜索引擎理解图片内容（SEO）
**你不应该有任何一张图片没有 `alt` 属性。** `alt=""` 是可以的（装饰性图片不需要描述），但不能不写。
七、⚠️ 常见坑
**meta viewport 不设 = 手机上看网页像蚂蚁**
```html
<!-- ❌ 不设 viewport -->
<!-- 手机浏览器会缩放到 980px 宽来显示，文字小到看不见 -->
<!-- ✅ 必须设 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
这是移动端网页开发的"第一行代码"——没有它其他响应式设计全是白搭。
**编码声明要放 head 最前面**
```html
<head>
<meta charset="UTF-8"> <!-- ✅ 这是 head 里的第一行 -->
<title>我的网站</title>
</head>
<!-- 浏览器解析 HTML 时，看到 <meta charset> 之前如果已经解析了中文字符，
且不知道编码，可能会显示乱码。所以 charset 声明要放在 head 最前面。 -->
```
**Script 放 head 会阻塞渲染**
```html
<head>
<script src="big.js"></script> <!-- ❌ 下载并执行完 big.js 之前，页面什么都看不到 -->
</head>
```
两种正确做法：
```html
<!-- 方案一：放到 body 末尾（推荐） -->
<body>
...HTML 内容...
<script src="big.js"></script>
</body>
<!-- 方案二：用 defer 或 async（还是放 head，但不阻塞） -->
<head>
<script src="big.js" defer></script> <!-- 下载不阻塞，HTML 解析完再执行 -->
</head>
```
**标签嵌套不能跨类型**
```html
<!-- ❌ 错误：行内元素不能嵌套块级元素 -->
<a href="#">
<div>点击这里</div> <!-- a 是行内，div 是块级，不能这样嵌套 -->
</a>
<!-- ✅ 在 HTML5 里，a 标签可以包裹块级元素 -->
<a href="#">
<div>点击这里</div> <!-- HTML5 放宽了 a 标签的规则，这是允许的 -->
</a>
<!-- 但其他行内元素不行 -->
<span>
<p>文字</p> <!-- ❌ span 不能包 p -->
</span>
```
**表格布局（2025 年还有人这么写）**
```html
<!-- ❌ 用表格布局——2005 年的做法，不是不会用，是真不推荐 -->
<table>
<tr>
<td>左侧栏</td>
<td>右侧栏</td>
</tr>
</table>
<!-- ✅ 现代布局用 flexbox 或 grid -->
<div style="display: flex;">
<div>左侧栏</div>
<div>右侧栏</div>
</div>
```
表格只用来展示表格数据（财务报表、成绩单、对比表），不要用来做页面布局。
写在最后
HTML 是所有 Web 技术中最不起眼、但最重要的一个。
它没有 CSS 那种"画出一张漂亮页面"的快感，没有 JavaScript 那种"让页面活起来"的魔力，也没有后端语言那种"处理复杂逻辑"的成就感。它只是安静地站在最底层，默默支撑起一切。
但如果你 HTML 写得不好，上层的一切都会出问题：
- CSS 布局怎么调都调不对 → 检查 HTML 结构
- SEO 排名上不去 → 检查语义化
- 无障碍审核不过 → 检查 alt 和标签语义
- 页面加载慢 → 检查 script 放哪了
**HTML 是 Web 开发里投入产出比最高的东西**——花一周学完所有常用标签，之后每一天写代码都能用上。
而且你不用担心它过时。HTML5 是 2014 年的标准，直到今天（2025 年）仍然是所有新特性的基础。你 2015 年学的 HTML 知识，现在照样能用。这在技术圈里是一种奢侈。
本文由 AI 生成，内容仅供参考。HTML 标准和标签的详细用法请以 MDN 文档（developer.mozilla.org/zh-CN/docs/Web/HTML）为准。
—— 全文完 ——�� HTML —— 互联网的砖块，每一个网站都是从这玩意儿开始的
一、先说两句
不管你用多先进的框架、多酷炫的技术，最终浏览器里渲染的东西，本质上就是三个东西：
```
HTML → 结构（房子的框架和房间）
CSS → 样式（墙的颜色、家具的摆放）
JavaScript → 行为（开关灯、按门铃）
```
**HTML 是三个里面最重要的一个**——没有它，CSS 和 JS 没有容器可放。
HTML 的全称是 **HyperText Markup Language（超文本标记语言）**。注意它不是编程语言——它没有变量、没有逻辑判断、没有循环、没有函数。它只是一套"标记"，告诉浏览器"这是一级标题"、"这是一个段落"、"这是一张图片"。
世界上第一份 HTML 文档是 Tim Berners-Lee 在 1991 年写的。那时候 HTML 只有十几个标签。三十多年过去了，现在的 HTML 已经有 **100 多个标签**，从简单的 `<p>` 到复杂的 `<canvas>`、`<video>`、`<svg>`。
但最神奇的是：**1991 年写的那份 HTML 文档，放到今天的浏览器上仍然能正确显示。** 没有哪种技术有这种级别的向后兼容性。
二、HTML 是怎么工作的？
你写了一段 HTML，浏览器是怎么把它变成你看到的页面的？
```
你写的 HTML：
<h1>Hello World</h1>
<p>这是一段文字。</p>
浏览器做的事：
1. 下载 .html 文件（从服务器到本地）
2. 解析 HTML 字符串 → 生成 DOM 树（Document Object Model）
3. 解析 CSS → 生成 CSSOM 树
4. DOM + CSSOM → 生成渲染树
5. 计算每个元素的位置和大小（Layout）
6. 绘制到屏幕上（Paint）
整个过程叫"关键渲染路径"（Critical Rendering Path），
从收到 HTML 到用户看到画面，浏览器都在干这些事。
```
**HTML 是最宽容的语言**
写错了不会报错，浏览器会尽力"猜"你想表达什么：
```html
<!-- ❌ 忘了闭合标签 -->
<p>这是一段文字
<p>这是另一段文字
<!-- 浏览器会自己补上 </p>，把它理解成两个段落 -->
```
这在其他语言里是无法想象的。Python 缩进错了直接报错，JavaScript 少了个分号在某些情况下也会出问题。HTML 几乎永远不报错——这也是为什么有些网页在 Chrome 里正常，在 Safari 里崩了：**浏览器们"猜"的方式不一样。**
三、HTML 必知必会的核心概念
**1. 标签、元素、属性**
```html
<!-- 一个完整的 HTML 元素 -->
<a href="https://example.com" class="link">点击这里</a>
↑ ↑ ↑ ↑
标签名 属性 内容 闭合标签
<!-- 自闭合标签（没有内容的） -->
<img src="photo.jpg" alt="一张照片">
<br>
<hr>
<input type="text">
```
**2. 块级元素 vs 行内元素**
这是 HTML 最重要的概念，CSS 一切布局都基于这个：
```html
<!-- 块级元素（Block）：
- 独占一行
- 默认宽度 100%
- 可以设宽高
-->
<div>这是一个块</div>
<p>这也是一个块</p>
<h1>标题也是块</h1>
<!-- 行内元素（Inline）：
- 在一行内排列
- 宽度由内容决定
- 不能设宽高（除了一些特殊行内块）
-->
<span>这是一个行内元素</span>
<a href="#">链接也是行内</a>
<strong>加粗也是</strong>
```
**布局就是这么开始的——** 你想让几个元素横着排？用行内元素或者用 CSS 的 `display: flex` 或 `display: grid`。你想让它们竖着堆？用块级元素就行。
**3. HTML 文档的基本骨架**
```html
<!DOCTYPE html> <!-- 告诉浏览器：这是 HTML5 文档 -->
<html lang="zh-CN"> <!-- 根元素，lang 属性很重要（SEO + 屏幕阅读器） -->
<head> <!-- 头部：元数据，不在页面上显示 -->
<meta charset="UTF-8"> <!-- 字符编码：一定要设，不然中文可能乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 响应式设计的关键：让页面适配手机屏幕 -->
<title>我的网站</title> <!-- 浏览器标签页上显示的文字 -->
<meta name="description" content="网站描述"> <!-- SEO 用的 -->
<link rel="stylesheet" href="style.css"> <!-- 引入 CSS -->
</head>
<body> <!-- 身体：页面上所有可见内容 -->
<header>网站头部</header>
<main>主要内容</main>
<footer>网站底部</footer>
<script src="script.js"></script> <!-- 引入 JS（通常放 body 末尾） -->
</body>
</html>
```
**每个标签存在的意义：**
| 标签 | 意义 | 为什么重要 |
|------|------|-----------|
| `<!DOCTYPE html>` | 声明文档类型 | 没有它浏览器会进入"怪异模式"，排版全乱 |
| `<meta charset="UTF-8">` | 字符编码 | 不设的话中文大概率变乱码 |
| `<title>` | 页面标题 | 浏览器标签页 + 搜索引擎结果标题 |
| `<meta name="description">` | 页面描述 | 在搜索结果里显示的那段话 |
| `<link>` | 引入外部资源 | CSS、图标、字体 |
| `<script>` | 引入 JavaScript | 放 body 底部避免阻塞渲染 |
四、HTML5 —— 2014 年的革命
2014 年，HTML5 正式成为 W3C 推荐标准。这是 HTML 历史上最大的一次升级，带来的东西彻底改变了 Web：
```bash
HTML5 带来的新东西：
语义化标签：
<header> → 头部区域
<nav> → 导航栏
<main> → 主要内容（一个页面只能有一个）
<article> → 独立的内容块（一篇文章、一条评论）
<section> → 内容的章节
<aside> → 侧边栏
<footer> → 底部区域
<figure> → 配图区域
以前：
<div class="header">
<div class="nav">
<div class="main">
<div class="footer">
现在：
<header>
<nav>
<main>
<footer>
```
语义化标签的好处：
- **SEO 更好** —— 搜索引擎能看懂哪里是导航、哪里是正文
- **无障碍更好** —— 屏幕阅读器可以正确跳转
- **代码更可读** —— 看标签名就知道是什么区域
**多媒体标签（直接干掉 Flash）：**
```html
<!-- 以前：视频要 Flash 插件 -->
<object data="video.swf" type="application/x-shockwave-flash"></object>
<!-- HTML5：浏览器原生播放 -->
<video controls width="640">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
你的浏览器不支持视频播放。
</video>
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
```
**Canvas —— 在网页上画图：**
```html
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100); // 画一个红色方块
</script>
```
Canvas 让浏览器可以做游戏、数据可视化、图片编辑——**不需要任何插件。**
**表单增强：**
```html
<!-- HTML4 的输入类型：text、password、checkbox、radio -->
<!-- HTML5 新增的输入类型：-->
<input type="email"> <!-- 自动校验邮箱格式 -->
<input type="url"> <!-- 自动校验 URL 格式 -->
<input type="tel"> <!-- 手机端弹出数字键盘 -->
<input type="number"> <!-- 带上下箭头 -->
<input type="date"> <!-- 日期选择器 -->
<input type="color"> <!-- 颜色选择器 -->
<input type="range"> <!-- 滑块 -->
<input type="search"> <!-- 搜索框（手机端键盘带搜索按钮） -->
<!-- 表单校验（不需要 JavaScript） -->
<input type="email" required placeholder="请输入邮箱">
<!-- 必填字段为空 → 浏览器自动提示"请填写此字段" -->
<!-- 邮箱格式不对 → 浏览器自动提示"请与所要求的格式保持一致" -->
```
五、HTML 的核心思想：语义化
"语义化"是 HTML 最重要的设计理念。**选择合适的标签来表达内容的含义，而不是只关心它长什么样。**
```html
<!-- ❌ 非语义化：只关心外观 -->
<div style="font-size: 32px; font-weight: bold;">这是一级标题</div>
<div style="color: gray; font-size: 14px;">这是副标题</div>
<!-- ✅ 语义化：用正确的标签 -->
<h1>这是一级标题</h1>
<p class="subtitle">这是副标题</p>
```
**语义化的好处：**
```
1. 搜索引擎能理解内容结构
→ <h1> 是最重要的，<h2> 是次重要的……
→ 搜索引擎把 <h1> 的内容当作页面主题
2. 屏幕阅读器能正确朗读
→ 盲人用户可以通过快捷键跳转到 <nav>、<main>、<article>
→ 读屏软件会以不同方式朗读 <h1>、<p>、<ul>
3. 代码更容易维护
→ 看到 <footer> 知道是底部，不用去看 class 名
```
**语义化五条铁律：**
```bash
1. 标题用 <h1>~<h6>，不要用 <div> 改字号冒充标题
2. 段落用 <p>，不要用 <div>
3. 列表用 <ul>/<ol> + <li>，不要用 <div> + <br>
4. 强调用 <strong> 或 <em>，不要用 <b> 或 <i>（也可以用，但语义不同）
5. 导航用 <nav>，不用 <div class="nav">
```
**是的，就算你只用一个 `<div>` + CSS 也能做出跟语义化一模一样的视觉效果。但搜索引擎和辅助工具看不到 CSS——它们只看 HTML 结构。** 这就是语义化的价值。
六、写 HTML 的常见误区
| 误区 | ❌ 错误做法 | ✅ 正确做法 |
|------|-----------|-----------|
| 多重 H1 | 一个页面多个 `<h1>` | 每个页面**唯一一个** `<h1>` |
| DIV 滥用 | 能用 DIV 就不用语义标签 | 优先用 `<header>/<nav>/<main>/<article>` |
| 忽略 alt | `<img src="photo.jpg">` | `<img src="photo.jpg" alt="描述文字">` |
| 内联样式 | 所有样式写 style 属性里 | CSS 写单独文件，HTML 只负责结构 |
| script 放 head | `<script>` 在 `<head>` 里 | `<script>` 在 `</body>` 前面 |
| 忘了 DOCTYPE | 不写 `<!DOCTYPE html>` | 必须写，否则触发怪异模式 |
| 标签不闭合 | `<p>文字` | `<p>文字</p>`（虽然浏览器会补，但不要依赖） |
**`alt` 属性尤其重要：**
```html
<!-- 不加 alt -->
<img src="cat.jpg">
<!-- 加 alt -->
<img src="cat.jpg" alt="一只橘猫趴在键盘上睡着了">
```
`alt` 的作用：
1. 图片加载失败时，显示替代文字（用户知道这里本来是什么）
2. 屏幕阅读器朗读给盲人用户听
3. 搜索引擎理解图片内容（SEO）
**你不应该有任何一张图片没有 `alt` 属性。** `alt=""` 是可以的（装饰性图片不需要描述），但不能不写。
七、⚠️ 常见坑
**meta viewport 不设 = 手机上看网页像蚂蚁**
```html
<!-- ❌ 不设 viewport -->
<!-- 手机浏览器会缩放到 980px 宽来显示，文字小到看不见 -->
<!-- ✅ 必须设 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
这是移动端网页开发的"第一行代码"——没有它其他响应式设计全是白搭。
**编码声明要放 head 最前面**
```html
<head>
<meta charset="UTF-8"> <!-- ✅ 这是 head 里的第一行 -->
<title>我的网站</title>
</head>
<!-- 浏览器解析 HTML 时，看到 <meta charset> 之前如果已经解析了中文字符，
且不知道编码，可能会显示乱码。所以 charset 声明要放在 head 最前面。 -->
```
**Script 放 head 会阻塞渲染**
```html
<head>
<script src="big.js"></script> <!-- ❌ 下载并执行完 big.js 之前，页面什么都看不到 -->
</head>
```
两种正确做法：
```html
<!-- 方案一：放到 body 末尾（推荐） -->
<body>
...HTML 内容...
<script src="big.js"></script>
</body>
<!-- 方案二：用 defer 或 async（还是放 head，但不阻塞） -->
<head>
<script src="big.js" defer></script> <!-- 下载不阻塞，HTML 解析完再执行 -->
</head>
```
**标签嵌套不能跨类型**
```html
<!-- ❌ 错误：行内元素不能嵌套块级元素 -->
<a href="#">
<div>点击这里</div> <!-- a 是行内，div 是块级，不能这样嵌套 -->
</a>
<!-- ✅ 在 HTML5 里，a 标签可以包裹块级元素 -->
<a href="#">
<div>点击这里</div> <!-- HTML5 放宽了 a 标签的规则，这是允许的 -->
</a>
<!-- 但其他行内元素不行 -->
<span>
<p>文字</p> <!-- ❌ span 不能包 p -->
</span>
```
**表格布局（2025 年还有人这么写）**
```html
<!-- ❌ 用表格布局——2005 年的做法，不是不会用，是真不推荐 -->
<table>
<tr>
<td>左侧栏</td>
<td>右侧栏</td>
</tr>
</table>
<!-- ✅ 现代布局用 flexbox 或 grid -->
<div style="display: flex;">
<div>左侧栏</div>
<div>右侧栏</div>
</div>
```
表格只用来展示表格数据（财务报表、成绩单、对比表），不要用来做页面布局。
写在最后
HTML 是所有 Web 技术中最不起眼、但最重要的一个。
它没有 CSS 那种"画出一张漂亮页面"的快感，没有 JavaScript 那种"让页面活起来"的魔力，也没有后端语言那种"处理复杂逻辑"的成就感。它只是安静地站在最底层，默默支撑起一切。
但如果你 HTML 写得不好，上层的一切都会出问题：
- CSS 布局怎么调都调不对 → 检查 HTML 结构
- SEO 排名上不去 → 检查语义化
- 无障碍审核不过 → 检查 alt 和标签语义
- 页面加载慢 → 检查 script 放哪了
**HTML 是 Web 开发里投入产出比最高的东西**——花一周学完所有常用标签，之后每一天写代码都能用上。
而且你不用担心它过时。HTML5 是 2014 年的标准，直到今天（2025 年）仍然是所有新特性的基础。你 2015 年学的 HTML 知识，现在照样能用。这在技术圈里是一种奢侈。
本文由 AI 生成，内容仅供参考。HTML 标准和标签的详细用法请以 MDN 文档（developer.mozilla.org/zh-CN/docs/Web/HTML）为准。
—— 全文完 ——
HTML —— 互联网的砖块
相关推荐
文章评论 0 条
U
👍
👎
@
K
Kevin
2 小时前
Rust 的 async 生态终于要完善了！Async Iterator 和 async closure 这两块一直是我觉得最欠缺的。期待今年的进展！
👀 12
💬 回复
S
Sarah
5 小时前
编译速度优化这块太重要了，我们项目从 5 分钟降到 2 分钟就是巨大的效率提升。期待并行前端解析的上线。
👀 8
💬 回复
查看更多评论 →