A01 认识网页与 HTML

摘要：浏览器里看到的每一个网页，本质都是一份纯文本文件。本文从「输入网址到看见画面」的全过程出发，说明 HTML 在这条链路中的位置，并给出一份可直接运行、可自行修改的 HTML 文件。读完本文能够看懂任意网页的基础结构，并独立创建一个可运行的页面。
关键词：HTML，标签，元素，属性，DOM

所属：frontend/html / A-入门 ｜上一篇：A00-总结 ｜下一篇：A02-搭建编写环境

1 引言

在浏览器输入一个网址，屏幕出现排版整齐的图文。这个画面由三层文件共同决定：描述结构的 HTML、描述样式的 CSS、描述行为的 JavaScript。三者之中只有 HTML 不可省略——没有 HTML，另外两层没有作用对象，浏览器会拿到一张空白页。

常见的学习路径是从「标签清单」开始：先背 <div>、<span> 的写法，再逐条记忆属性。这条路径的缺口在于，学习者不知道标签在浏览器里经历了什么，于是遇到页面空白、中文乱码、修改不生效时，只能逐项试错。本文先补齐这条链路，再落到代码。

表 1-1 界定本文的覆盖范围。

项	本文覆盖	本文不覆盖
内容	HTML 文件结构、标签与元素的对应关系	CSS 样式规则、JavaScript 交互逻辑
浏览器行为	从请求到解析出页面的完整顺序	渲染引擎内部的布局与绘制算法
工具	系统自带记事本即可完成全部操作	编辑器插件、构建工具、框架脚手架
产出	一个可双击打开、可自行修改的 HTML 文件	可上线的站点（涉及服务器与域名）

2 预备知识

本文不需要安装任何开发工具，全部操作在一台能上网的电脑上完成。环境要求见表 2-1。

项	要求	核对方式
操作系统	Windows 10+ / macOS 12+ / 主流 Linux 发行版	任意
文本编辑器	Windows 记事本、macOS 文本编辑，或 VS Code	能新建 `.html` 后缀的纯文本文件
浏览器	Chrome 130+ / Edge 130+ / Firefox 132+	地址栏输入 `about:version` 查看
前置篇目	无	—

本篇涉及的核心术语（HTML、标签、元素、属性、DOM）只在 Z01 术语表定义一次，正文不再重复解释；遇到不认识的词先查该表。

3 原理与实现

3.1 从地址到画面

输入网址到看到画面，浏览器依次完成六件事，如图 3-1 所示。

flowchart TD
    A["地址栏输入网址"] --> B["DNS 解析：域名 → IP"]
    B --> C["建立连接并请求资源"]
    C --> D["服务器返回 HTML 文本"]
    D --> E["解析 HTML 生成 DOM 树"]
    E --> F["计算样式并布局"]
    F --> G["绘制到屏幕"]

图 3-1 从地址栏到画面的六步流程

图上可见：服务器交给浏览器的只是文本，画面是浏览器解析文本后的产物；同一份 HTML 在任何浏览器中解析出的结构一致，视觉呈现可能略有差异。

这一步的结论决定了后续所有排错思路：页面显示异常，先判断问题出在「文本内容」还是「浏览器解释」。文本内容可以直接打开文件核对，解释行为则要看浏览器的开发者工具。举例来说，中文显示成方块属于前者（文件编码与声明不匹配），元素位置错乱属于后者（样式与布局问题）。

3.2 写一个最小 HTML 文件

一个结构完整的 HTML 文件由文档类型声明、根元素、头部与主体四部分组成。完整代码见下，可直接复制使用。

<!-- 运行环境：任意文本编辑器 + Chrome 130+ -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>你好，网页</h1>
    <p>这是一段用 HTML 写出来的文字。</p>
  </body>
</html>

这份代码的层级关系如图 3-2 所示。

flowchart TD
    D["!DOCTYPE html<br/>声明文档类型"] --> H["html lang=zh-CN<br/>根元素"]
    H --> HEAD["head<br/>不给用户看的信息"]
    H --> BODY["body<br/>给用户看的内容"]
    HEAD --> M["meta charset=UTF-8<br/>声明编码"]
    HEAD --> T["title<br/>标签页标题"]
    BODY --> H1["h1<br/>一级标题"]
    BODY --> P["p<br/>段落"]

图 3-2 最小 HTML 文件的元素层级

图上可见：head 与 body 是根元素下的两个平级分支，页面上能看见的内容全部位于 body 之内。

各标签的作用与必须性见表 3-1。

标签 / 声明	作用	是否可省略	省略后果
`<!DOCTYPE html>`	声明本文件按 HTML5 标准解析	不建议	可能进入怪异模式，布局异常
`<html lang="zh-CN">`	根元素；`lang` 声明页面主要语言	不建议	朗读与翻译工具可能用错语言
`<head>`	容纳元信息	否	编码、标题等信息无处安放
`<meta charset="UTF-8">`	声明文件编码	否	中文大概率显示为乱码
`<title>`	浏览器标签页与收藏夹显示的文字	是	标签页显示文件路径
`<body>`	容纳页面可见内容	否	内容被浏览器自动归入 body
`<h1>`	一级标题，一个页面只用一个	是	页面缺少主标题
`<p>`	段落	是	文本仍显示，但失去段落语义

书写时有四条硬性习惯，与浏览器兼容性无关，只影响后续维护成本：标签成对出现、标签名统一小写、缩进两级空格、属性值用双引号包裹。

4 验证与讨论

按以下四步操作，逐步确认结果与表 4-1 一致。

新建一个纯文本文件，输入 3.2 节的代码，保存为 index.html，保存编码选择 UTF-8。注意后缀必须是 .html，不能是 .txt。
双击该文件，浏览器自动打开，地址栏显示 file:/// 开头的本地路径。
对照表 4-1 检查画面内容。
把 <h1> 中的文字改成任意内容，保存后回到浏览器按 F5 刷新，观察文字同步变化。

表 4-1 记录关键代码与画面表现的对应关系。

代码片段	画面表现	解释
`<title>我的第一个网页</title>`	标签页显示「我的第一个网页」	title 不进页面正文，只进浏览器外壳
`<h1>你好，网页</h1>`	页面显示一行加粗放大的「你好，网页」	h1 默认字号最大，且有上下留白
`<p>…</p>`	页面显示一行正常大小的文字	p 默认独占一行，段间距由浏览器默认样式给
`<meta charset="UTF-8">`	中文正常显示，无乱码	声明的编码必须与实际保存编码一致

表 4-2 用于自检，四项全部通过即达成本篇目标。

检查项	预期结果	不通过时先看
地址栏协议	以 `file:///` 开头	3.1 节流程第二步
页面主标题	显示「你好，网页」，字号最大	3.2 节代码块
中文显示	全部为正常汉字	表 5-1 第一行
修改后刷新	画面随文字变化	表 5-1 第三行

讨论与局限。 本篇只打开了 HTML 的结构层，因此有三处现象属于正常，不必排查：其一，页面没有任何排版设计，因为尚未引入 CSS；其二，点击文字没有反应，因为尚未引入 JavaScript；其三，以 file:/// 打开时，部分需要请求数据的脚本能力会被浏览器限制，这也是后续篇目改用本地服务器预览的原因。另外，h1 的默认字号在 Chrome 与 Firefox 中略有不同，这属于浏览器默认样式的差异，不属于代码错误。

5 常见问题

表 5-1 覆盖本篇操作中最常见的五种失败现象。

现象	原因	处理
中文显示成方块或乱码	文件实际保存编码不是 UTF-8，或缺少 charset 声明	用编辑器另存为 UTF-8，并确认 `meta charset` 为 `UTF-8`
浏览器直接显示一堆代码	文件后缀为 `.txt`，浏览器按纯文本打开	重命名为 `.html`（先在资源管理器打开「显示扩展名」）
改完内容刷新无变化	未保存文件，或浏览器缓存了旧文件	保存后在浏览器按 `Ctrl + F5` 强制刷新
页面完全空白	内容写在了 `head` 里，或 `body` 标签未闭合	检查可见内容是否位于 `body` 之内，检查成对标签是否遗漏
地址栏是 `file:///` 但图片不显示	图片路径写法错误（本篇未涉及，A05 详细展开）	直接看 A05 的路径规则

6 结论

本篇的结论可以压缩为四条，见表 6-1。

序号	结论	依据
1	网页是一份纯文本文件，画面是浏览器解析后的结果	图 3-1
2	HTML 负责结构，CSS 负责样式，JavaScript 负责行为	表 1-1
3	标签成对、编码声明、内容置于 body，是三个必查项	表 3-1、表 5-1
4	排错先分清「文本内容问题」与「浏览器解释问题」	表 4-1

在工具选择上，记事本与专业编辑器写出的 HTML 语法等价，前者省去安装成本，后者提供语法高亮与错误提示。入门阶段两者均可，长期写作使用编辑器更省排查时间，差异在下一篇具体说明。

下一篇：A02-搭建编写环境
返回：A00-总结｜科目 README

参考文献

[1] MDN Web Docs · HTML：超文本标记语言，Mozilla，https://developer.mozilla.org/zh-CN/docs/Web/HTML（访问于 2026-10-29）
[2] HTML Living Standard，WHATWG，https://html.spec.whatwg.org/（访问于 2026-10-29）
[3] 字符编码（Character encoding），MDN Web Docs，https://developer.mozilla.org/zh-CN/docs/Glossary/Character_encoding（访问于 2026-10-29）