打开任意网页，右键”查看源代码”，你会看到一堆尖括号包裹的文本。这就是 HTML——网页的骨架和灵魂。
🎯 HTML 是什么
HTML（HyperText Markup Language，超文本标记语言）是构建网页的标准语言。它不是编程语言，而是一种标记语言，用来描述网页的结构和内容。
┌─────────────────────────────────────────┐│ 浏览器 ││ ┌───────────────────────────────────┐ ││ │ HTML（结构） │ ││ │ ┌─────────────────────────┐ │ ││ │ │ CSS（样式） │ │ ││ │ │ ┌─────────────────┐ │ │ ││ │ │ │ JavaScript │ │ │ ││ │ │ │ （行为） │ │ │ ││ │ │ └─────────────────┘ │ │ ││ │ └─────────────────────────┘ │ ││ └───────────────────────────────────┘ │└─────────────────────────────────────────┘三者分工明确：
- HTML：定义内容是什么（标题、段落、图片、链接）
- CSS：定义内容长什么样（颜色、大小、布局）
- JavaScript：定义内容如何交互（点击、滚动、动画）
文档基本结构
每个 HTML 文档都遵循相同的基本结构：
<!doctype html><html lang="zh-Hans"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>我的第一个网页</title> </head> <body> <h1>你好，世界！</h1> <p>这是我的第一个网页。</p> </body></html>逐行解析：
| 代码 | 作用 |
|---|---|
<!DOCTYPE html> | 声明文档类型为 HTML5 |
<html lang="zh-Hans"> | 根元素，lang 指定语言为简体中文 |
<head> | 头部区域，包含元数据（不显示在页面上） |
<meta charset="UTF-8"> | 字符编码，支持中文等多语言字符 |
<meta name="viewport"> | 视口设置，确保移动端正确显示 |
<title> | 页面标题，显示在浏览器标签页 |
<body> | 主体区域，页面可见内容都放在这里 |
🔶 注意：<!DOCTYPE html> 不是 HTML 标签，而是告诉浏览器使用 HTML5 标准解析文档。虽然现代浏览器通常能容错，但始终应该包含它。
元素与标签
HTML 由元素（Element）组成，元素通过标签（Tag）来定义：
<p>这是一个段落</p><!-- ↑ ↑ --><!-- 开始标签 结束标签 -->元素的完整结构：
┌─────────── 元素 ───────────┐│ ││ <p class="intro">内容</p> ││ │ └────┬────┘ │ │ ││ │ 属性 内容 │ ││ └── 开始标签 ───┘ │ ││ 结束标签 │└────────────────────────────┘自闭合标签
某些元素没有内容，使用自闭合标签：
<br /><!-- 换行 --><hr /><!-- 水平线 --><img src="photo.jpg" alt="照片" /><!-- 图片 --><input type="text" /><!-- 输入框 -->标签嵌套
标签可以嵌套，但必须正确闭合：
<!-- ✅ 正确嵌套 --><p>这是<strong>重要的</strong>内容</p>
<!-- ❌ 错误嵌套 --><p>这是<strong>重要的</p></strong>常用标签速览
标题与段落
HTML 提供 6 级标题，<h1> 最大，<h6> 最小：
<h1>一级标题（页面主标题，通常只用一次）</h1><h2>二级标题</h2><h3>三级标题</h3>
<p>这是一个段落。段落之间会自动产生间距。</p><p>这是另一个段落。</p>🔶 SEO 提示：每个页面应只有一个 <h1>，标题层级应按顺序使用，不要跳级（如从 h1 直接到 h3）。
文本格式化
<strong>重要文本（语义上强调）</strong><em>斜体文本（语义上强调）</em><mark>高亮文本</mark><del>删除线</del><ins>下划线（插入内容）</ins><code>行内代码</code><pre>预格式化文本（保留空格和换行）</pre>链接
<!-- 基础链接 --><a href="https://example.com">访问示例网站</a>
<!-- 新窗口打开 --><a href="https://example.com" target="_blank" rel="noopener noreferrer"> 新窗口打开</a>
<!-- 页内锚点 --><a href="#section2">跳转到第二节</a><h2 id="section2">第二节</h2>
<!-- 邮箱链接 --><a href="mailto:hello@example.com">发送邮件</a>
<!-- 电话链接 --><a href="tel:+8613800138000">拨打电话</a>🔶 安全提示：使用 target="_blank" 时，始终添加 rel="noopener noreferrer" 防止安全漏洞（新页面可通过 window.opener 访问原页面）。
图片
<img src="photo.jpg" alt="一张风景照片" width="800" height="600" />| 属性 | 必需 | 说明 |
|---|---|---|
src | ✅ | 图片路径（相对或绝对） |
alt | ✅ | 替代文本（图片无法显示时展示，SEO 重要） |
width | 推荐 | 图片宽度（避免布局抖动） |
height | 推荐 | 图片高度（避免布局抖动） |
列表
<!-- 无序列表 --><ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li></ul>
<!-- 有序列表 --><ol> <li>第一步：准备材料</li> <li>第二步：开始制作</li> <li>第三步：完成</li></ol>
<!-- 描述列表 --><dl> <dt>HTML</dt> <dd>超文本标记语言</dd> <dt>CSS</dt> <dd>层叠样式表</dd></dl>表格
<table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>北京</td> </tr> <tr> <td>李四</td> <td>30</td> <td>上海</td> </tr> </tbody></table>容器元素
<!-- 块级容器 --><div class="container"> <p>div 是通用的块级容器</p></div>
<!-- 行内容器 --><p>这是一段文字，<span class="highlight">这部分被高亮</span>显示。</p>注释
HTML 注释不会显示在页面上，用于代码说明：
<!-- 这是单行注释 -->
<!-- 这是多行注释 可以写很多内容-->
<!-- TODO: 后续需要添加导航栏 -->开发环境
编辑器推荐
| 编辑器 | 特点 |
|---|---|
| VS Code | 免费、插件丰富、最流行 |
| WebStorm | 功能强大、付费 |
| Sublime Text | 轻量快速 |
VS Code 推荐插件：
- Live Server：实时预览，保存自动刷新
- Prettier：代码格式化
- Auto Rename Tag：自动重命名配对标签
浏览器开发者工具
按 F12 或右键”检查”打开开发者工具：
- Elements：查看和修改 DOM 结构
- Console：查看错误和日志
- Network：检查网络请求
┌────────────────────────────────────────┐│ Elements │ Console │ Network │ ... │├────────────────────────────────────────┤│ <html> ││ <head>...</head> ││ <body> ││ <h1>标题</h1> ← 点击可高亮 ││ <p>段落</p> 页面元素 ││ </body> ││ </html> │└────────────────────────────────────────┘🎯 实战：个人简介页面
综合运用所学知识，创建一个个人简介页面：
<!doctype html><html lang="zh-Hans"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>张三的个人主页</title> </head> <body> <h1>👋 你好，我是张三</h1> <p>一名热爱技术的前端开发者，专注于构建优秀的用户体验。</p>
<h2>🛠️ 技术栈</h2> <ul> <li>HTML / CSS / JavaScript</li> <li>React / Vue</li> <li>Node.js</li> </ul>
<h2>💼 工作经历</h2> <table> <thead> <tr> <th>公司</th> <th>职位</th> <th>时间</th> </tr> </thead> <tbody> <tr> <td>ABC 科技</td> <td>高级前端工程师</td> <td>2022 - 至今</td> </tr> <tr> <td>XYZ 互联网</td> <td>前端工程师</td> <td>2019 - 2022</td> </tr> </tbody> </table>
<h2>📬 联系方式</h2> <p> 邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a><br /> GitHub：<a href="https://github.com/zhangsan" target="_blank" rel="noopener noreferrer" > github.com/zhangsan </a> </p>
<hr /> <p><small>© 2025 张三. All rights reserved.</small></p> </body></html>将以上代码保存为 index.html，用浏览器打开即可查看效果。
常见问题
🤔 HTML 对大小写敏感吗？
HTML 标签不区分大小写，<P> 和 <p> 等效。但推荐使用小写，这是行业规范。
🤔 空格和换行会显示吗？
HTML 会将多个连续空格和换行合并为一个空格。如需保留格式，使用 <pre> 标签或 CSS。
<!-- 这三行实际显示为一行 --><p>你好 世界</p><!-- 输出：你好 世界 -->🤔 什么时候用 <div> vs 语义标签？
优先使用语义标签（<header>、<nav>、<main> 等），只有在没有合适语义标签时才用 <div>。这对 SEO 和无障碍访问都有帮助。
参考资料
- MDN HTML 教程
- HTML Living Standard
- Can I Use - 浏览器兼容性查询