HTML 入门：构建 Web 的基石

打开任意网页，右键”查看源代码”，你会看到一堆尖括号包裹的文本。这就是 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 - 浏览器兼容性查询