A03 写出第一个页面

摘要：一个页面从空白文件到可见内容，只涉及三件事：声明文档类型、按 head 与 body 分工放置内容、用标签标注每段文字的角色。本文给出一个完整的个人介绍页，逐层说明每个标签的作用与省略后的后果，并给出四步验收方法。
关键词：文档结构，head，body，缩进，注释

所属：frontend/html / A-入门 ｜上一篇：A02-搭建编写环境 ｜下一篇：A04-文本与段落

1 引言

A01 的最小页面只验证了「能显示」，没有验证「结构对不对」。判断结构是否正确有三个标准：浏览器解析无纠正、标签层级不乱、内容分区明确。

本文给出一份可交付的个人介绍页，并解释每个标签的必要性。范围见表 1-1。

项	本文覆盖	本文不覆盖
结构	DOCTYPE、html、head、body 四层	完整的语义化布局（A08）
内容	标题、段落、分隔线、换行、注释	列表、表格、表单
样式	浏览器默认样式下的呈现	CSS 排版与主题

2 预备知识

项	要求	核对方式
环境	已完成 A02-搭建编写环境，本地服务器可访问	浏览器能打开 `localhost`
目录	`html-practice` 下新建 `profile.html`	文件后缀为 `.html`
浏览器	Chrome 130+，开发者工具可用	按 `F12` 能打开 Elements 面板

3 原理与实现

3.1 从源码到画面

浏览器看到 HTML 文本后，先按标签切分出树形结构，再按标签的默认样式渲染，如图 3-1 所示。

flowchart TD
    A["profile.html 文本"] --> B["词法切分<br/>识别标签与文本"]
    B --> C["构建元素树<br/>html → head/body"]
    C --> D["套用默认样式<br/>h1 放大加粗、p 独占一行"]
    D --> E["布局并绘制"]
    E --> F["页面可见"]
    F -->|"F12 查看"| G["Elements 面板<br/>即浏览器理解的树"]

图 3-1 文本到元素的解析过程

图上可见：Elements 面板展示的是浏览器纠正后的树，与手写源码不完全一致，标签漏闭合时会在此处暴露。

3.2 完整代码

<!-- 运行环境：任意编辑器 + Chrome 130+；保存为 profile.html，UTF-8 -->
<!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>
    <!-- 头部：姓名与一句话定位 -->
    <h1>李明</h1>
    <p>前端开发，关注可访问性与内容结构。</p>

    <hr />

    <!-- 正文：分两段介绍 -->
    <h2>在做什么</h2>
    <p>
      维护一个技术文档站点，负责页面结构与构建流程。
      日常使用 HTML、CSS 与少量 JavaScript。
    </p>

    <h2>联系方式</h2>
    <p>邮箱：liming@example.com<br />城市：杭州</p>
  </body>
</html>

各标签的作用与省略后果见表 3-1。

标签 / 声明	作用	省略后果
`<!DOCTYPE html>`	声明按标准模式解析	可能触发怪异模式，默认样式异常
`<html lang="zh-CN">`	根元素，声明页面语言	朗读与翻译工具可能误判语言
`<head>`	放元信息，不直接显示	编码与标题无处声明
`<meta charset="UTF-8">`	声明编码	中文乱码概率极高
`<meta name="viewport">`	声明移动端按设备宽度布局	手机上页面被缩成很小的一屏
`<title>`	标签页与收藏夹标题	标签页显示文件名
`<h1>`	页面主标题，全页唯一	缺少主标题，层级从 h2 起
`<h2>`	二级标题	内容失去分节
`<p>`	段落，独占一行	文本连成一片，可读性下降
`<hr />`	主题分隔线	分区不清
`<br />`	段内强制换行	换行被忽略，内容挤在一行
`<!-- 注释 -->`	源码说明，不进页面	维护时缺少意图记录

三条书写规则：h1 全页只出现一次；h2 直接从属于 h1，不跳级；br 只用于段内换行，段落之间用 p 而不是连续 br。

4 验证与讨论

保存文件，浏览器访问 http://localhost:3000/profile.html（端口按 A02 实际值）。
按 F12 打开 Elements 面板，展开 body，确认层级为 h1 → p → hr → h2 → p → h2 → p。
对照表 4-1 检查四项默认样式表现。
删除 <meta charset="UTF-8"> 后另存为 GBK 编码，刷新观察乱码，再改回 UTF-8，理解编码声明的作用。

检查项	预期结果	说明
主标题	「李明」字号最大、加粗	h1 默认样式
分隔线	一条横线贯穿内容区	hr 默认样式
联系方式行	邮箱与城市分成两行	br 段内换行生效
标签页标题	显示「李明 · 个人介绍」	title 生效

讨论与局限。 本篇页面在桌面端与手机端都用浏览器默认样式，没有响应式布局，窄屏下文字会换行拥挤，这属于样式问题，进入 CSS 阶段解决。另外 hr 与 br 在语义上并非分区手段，A08 会给出更合适的标签。

5 常见问题

现象	原因	处理
Elements 面板出现 `tbody`	浏览器自动补全表格结构	正常现象，表格在 A06 说明
页面文字全挤在一起	用 `br` 代替 `p`，或段落标签未闭合	段间改 `p`，检查 `</p>`
标题大小不符合预期	跳级使用 `h3`，或缺 `h1`	按 h1 → h2 顺序组织
手机上显示为缩小版	缺少 viewport 声明	补 `meta name="viewport"`
注释出现在页面上	注释符号写错，如 `<!- 注释 ->`	使用 `<!-- 注释 -->`

6 结论

序号	结论	依据
1	四层结构 html / head / body 是固定骨架	图 3-1、表 3-1
2	head 放不可见信息，body 放可见内容	表 3-1
3	标题层级连续，h1 全页唯一	3.2 节规则
4	Elements 面板是验证结构的第一现场	4 节步骤 2

参考文献

[1] MDN Web Docs · HTML 文档与网站架构，https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure（访问于 2026-10-29）
[2] HTML Living Standard · The document element，WHATWG，https://html.spec.whatwg.org/multipage/semantics.html（访问于 2026-10-29）