为何学 HTML

老板让你改个网页上的文字。你打开浏览器按 F12，看到一堆代码——完全看不懂

<div class="container">
  <header>
    <nav>...</nav>
  </header>
  <main>
    <article>...</article>
  </main>
</div>

Part 1: 文档结构

每个 HTML 页面都从同一个基本骨架开始——就像建房子先画图纸。

基本骨架

这段代码是所有网页的起点，每个 HTML 文件都是这个结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
</head>
<body>
  <!-- 页面可见内容 -->
</body>
</html>

文档骨架是一棵树

<!DOCTYPE html>
└── <html>
    ├── <head>  ← 元数据区（用户看不到）
    │   ├── <meta charset>
    │   ├── <meta viewport>
    │   └── <title>
    └── <body>  ← 内容区（显示在浏览器）
        ├── <h1>
        ├── <p>
        ├── <img>
        └── <a>

Part 2: 文本与链接

段落、标题、强调、链接——这些是网页上最常见的文本元素。

文本标签

六种最常用的文本标签，覆盖 90% 的文本需求

<h1>欢迎来到我的网站</h1>
<p>这是一个段落，<strong>这部分很重要</strong>，
而<em>这个词需要强调</em>。</p>
<hr>
<p>第二段内容<br>换行显示。</p>

链接用法

<a> 标签是互联网的灵魂——点击跳转到其他页面

<a href="目标地址" target="打开方式">链接文字</a>

Part 3: 图片与列表

图片让页面有视觉内容，列表让信息有条理。

图片标签

<img> 是空元素——没有结束标签，属性写在开始标签里

<img src="图片路径" alt="替代文本" width="200">

<img src="images/photo.jpg"
     alt="风景照">

<img src="https://example.com/p.jpg"
     alt="网络图片">

列表类型

无序列表（ul）用于没有顺序的项目，有序列表（ol）用于有步骤的流程

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

<ol>
  <li>准备材料</li>
  <li>开始制作</li>
  <li>完成</li>
</ol>

Part 4: 表格与表单

表格展示结构化数据，表单收集用户输入。

表格结构

用 thead/tbody/tfoot 语义化地组织表格数据

<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>

<table>
  <thead><tr>
    <th>姓名</th>
  </tr></thead>
  <tbody><tr>
    <td>小明</td>
  </tr></tbody>
</table>

┌──────┐
│ 姓名 │ ← th（加粗表头）
├──────┤
│ 小明 │ ← td（普通单元格）
└──────┘
 ↑ thead     ↑ tbody

表单基础

表单是用户与网页交互的入口——登录、注册、搜索都靠它

<form action="/submit" method="post">
  <label>
    用户名：
    <input type="text" name="username"
           placeholder="请输入用户名">
  </label>
  <label>
    密码：
    <input type="password" name="password">
  </label>
  <label>
    <input type="checkbox" name="remember">
    记住我
  </label>
  <button type="submit">登录</button>
</form>

输入类型

HTML5 提供了丰富的 input 类型，每种都有特定的验证和输入方式

表单扩展

除了 input，表单还有下拉选择、多行文本和按钮

<!-- 下拉选择 -->
<select name="city">
  <option value="bj">北京</option>
  <option value="sh">上海</option>
</select>

<!-- 多行文本 -->
<textarea name="message" rows="4"></textarea>

<!-- 按钮 -->
<button type="submit">提交</button>
<button type="reset">重置</button>

Part 5: 语义化

用有意义的标签代替万能的 div——让代码自己说话。

语义化标签

现代网页的标准结构——用标签名称就能理解每个区域的作用

<header>    <!-- 页眉：logo、导航 -->
  <h1>网站标题</h1>
  <nav>导航链接...</nav>
</header>
<main>      <!-- 主要内容（整个页面只有一个）-->
  <article> <!-- 独立内容，如一篇文章 -->
    <h2>文章标题</h2>
    <p>文章内容...</p>
  </article>
  <aside>   <!-- 侧边栏、相关推荐 -->
    <h3>推荐阅读</h3>
  </aside>
</main>
<footer>    <!-- 页脚：版权信息 -->
  <p>&copy; 2025 版权信息</p>
</footer>

语义化标签拼出一个页面

┌─────────────────────────────────────┐
│ <header>  页眉（logo + <nav> 导航）       │
├──────────────────────────┬──────────┤
│ <main> 主内容             │ <aside>  │
│ ┌──────────────────────┐ │ 侧边栏   │
│ │ <article> 独立文章    │ │          │
│ ├──────────────────────┤ │          │
│ │ <section> 内容分块    │ │          │
│ └──────────────────────┘ │          │
├──────────────────────────┴──────────┤
│ <footer> 页脚（版权、联系方式）            │
└─────────────────────────────────────┘

内嵌内容

<iframe> 可以在页面中嵌入另一个完整的网页——地图、视频、第三方页面

<iframe src="https://example.com"
        width="600" height="400"
        title="嵌入页面">
</iframe>

阅读技巧

拿到一个 HTML 页面，按这个顺序快速理解它的结构

元素速查