01 · NOTES / WebGIS 开发

第 01 节 · HTML 文档结构

2026 年 9 月 7 日

第 01 节 · HTML 文档结构

📌 版本信息：基于 HTML Living Standard（WHATWG 维护，HTML 无版本号、持续演化；2026-09-06 核对） 📚 来源：WHATWG HTML 规范｜ MDN HTML 基础｜ MDN 元素参考

从一份简历页说起

环境装好之后，一个很自然的想法是：做一张自己的页面，把自己的经历、技能清单、GitHub 主页和学习记录放上去。哪怕开始时只有几行字，也要先解决一个问题：怎么告诉浏览器“这一行是标题、这段是正文、这里是一份列表”。

HTML 就是回答这个问题的工具。它不管颜色和动画，也不处理点击，只负责把页面里的内容块“命名”清楚。这一节从一份简历页切入，把 HTML 文件从头到尾拆开看一遍。

这一节讲什么

本节讲 HTML 在网页中的角色、一份完整文档的固定骨架、标签与元素的基本语法，以及 head 和 body 的分工。学完这一节可以做到：

从零新建一个 .html 文件，写出标准文档结构，而不是只依赖 IDE 模板
逐行说明 DOCTYPE、html、head、body 各管什么事
分清页面里哪些是用户看到的内容，哪些是给浏览器和搜索引擎看的信息
用标题、段落、列表、注释搭出一份简历或学习页的骨架

HTML 在网页里的角色

HTML 全称 HyperText Markup Language，超文本标记语言。“标记”的意思是往文字上贴标签，声明“这一块是什么”：

<h1>我是标题</h1>
<p>我是段落</p>

浏览器解析这些标签后，会生成一棵文档树，也就是 DOM（Document Object Model）：html 是根节点，下面分别长着 head 和 body 两个分支，body 再往下挂标题、段落、列表这些内容节点。后续学 CSS 和 JavaScript 时，操作对象基本都是这棵树上的节点——CSS 找节点改外观，JS 找节点改内容。现在先在心里留一个印象：HTML 不只是文本，它是一棵有层级关系的树。

网页技术通常按三个角色分工：

技术	负责什么	类比
HTML	结构：哪里是标题、哪里是正文、哪里是列表	毛坯房的墙、门洞和房间划分
CSS	外观：颜色、大小、间距、布局	装修
JavaScript	行为：点击、计算、请求数据、更新页面	水电和智能设备

HTML 不是编程语言，它不描述“如果……就……”的运算逻辑，只描述内容结构。但结构是一切的基础：结构乱了，后面的样式和行为都很难稳定。

一个完整文档的骨架

每个 .html 文件都长下面这样。这是所有页面的起点模板，每一行都值得记住：

<!DOCTYPE html>
<!-- 文档类型声明：必须是文件第一行。
     告诉浏览器按现代标准模式解析；缺了它可能进入混杂模式。 -->

<html lang="zh-CN">
<!-- 根元素，包住整个页面。
     lang="zh-CN" 声明页面语言，屏幕阅读器和搜索引擎会用到。 -->

  <head>
    <!-- head：给浏览器和搜索引擎看的后台信息，不直接显示在页面里。 -->

    <meta charset="UTF-8" />
    <!-- 字符编码声明，写在 head 最前面。
         缺了它，中文可能被按错误编码解码成乱码。 -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 移动端视口：让页面宽度跟随设备宽度，而不是按桌面宽度缩小。 -->

    <title>我的第一个页面</title>
    <!-- 页面标题：显示在浏览器标签页，也是搜索引擎结果中的标题。 -->
  </head>

  <body>
    <!-- body：用户真正能看到的所有内容都放这里。 -->

    <h1>你好，WebGIS</h1>
    <p>这是我写的第一个页面。</p>
  </body>
</html>

四个部分的关系可以压缩成一句话：DOCTYPE 在最前，html 包一切，head 管配置，body 管内容。

再说说容易忽略的两个点：

<!DOCTYPE html> 不是标签，更像一份声明。它让浏览器了解“这是现代 HTML”，从而走标准模式解析。缺了这一行，不同浏览器会按各自兼容模式渲染，页面可能各处都不对劲，而且很难归因。
lang="zh-CN" 平时看不出区别，但它会影响屏幕阅读器的发音和搜索引擎对语言的理解。写上它成本极低，属于文档里最值得“顺手做好”的事。

标签、元素与属性

页面里的内容块由元素构成。一个元素可以拆成这种形状：

<p class="note">这一段是正文</p>
 └┬┘  └────┬────┘ └────┬────┘
 标签名   属性      内容

几个基本规则：

元素 = 开始标签 + 内容 + 结束标签。<p> 单独写只是标签，<p>文字</p> 才是一个完整元素。
属性写在开始标签里，格式是 名="值"。例如 <a href="https://leafletjs.com/"> 中的 href 决定链接地址。
没有内容的元素不写结束标签，如 <img />、<br />、<hr />、<meta />、<input />。它们要么本身是一个“物件”，要么代表一次断行、一条分隔。
嵌套要像洋葱一样一层包一层。<p><strong>加粗</strong></p> 正确；<p><strong>加粗</p></strong> 交叉嵌套，浏览器虽然能硬着头皮渲染，但树结构已经乱了。
注释给维护的人看：。浏览器不会渲染它，注释也不能嵌套。

💡 标签名不区分大小写，但行业规范统一小写；属性值用双引号包裹，这也是社区默认写法。保持一致，后面用选择器把元素找出来时才会省心。

head 和 body 的分工

head 和 body 是 HTML 树的左右手，一个管“后台信息”，一个管“前台内容”：

区域	典型成员	负责的事
`head`	`<meta charset>`、`<meta name="viewport">`、`<title>`	编码、视口、标题、样式与脚本的引入
`body`	标题、段落、图片、列表、表格、表单	用户看到的页面主体

一个常见直觉错误是把页面标题直接写进 body。浏览器标签页上显示的文字来自 <head> 里的 <title>，它和页面正文里的标题是两回事；正文里的大标题用 <h1> 承担。

浏览器容错是双刃剑

浏览器解析 HTML 时非常宽容：结束标签漏了它会猜着补，标签写错了它也会尽量渲染。这个特性带来的麻烦在于：页面“看起来正常”不代表代码结构正确。

举一个隐蔽的例子：一个 <section> 忘了闭合，页面肉眼看着没变化，后来加 CSS 时子元素全部继承了不属于自己的样式，排查了很久才发现是树结构已经歪了。从第一行开始写规范代码，是在给后面的调查省时间。

易错点

⚠️ 浏览器容错不是免死金牌：它会把错误修好，也会把错误藏起来。排查结构问题时，先怀疑树有没有歪。

DOCTYPE 不在第一行：它前面哪怕多一个注释或空行，都可能让浏览器退回混杂模式。规范做法是把声明放在文件最顶端。
中文乱码：<meta charset="UTF-8"> 缺了或放得太靠后，浏览器在拿到编码声明前可能已经用猜的编码读了文件。编码声明放 head 最前面，成本最低、收益最稳。
交叉嵌套：结束标签的顺序和开始标签相反。可以用洋葱比喻自检：先开的最后合。
把“能显示”当“正确”：浏览器会兜底，可结构错误会在 CSS 和 JS 阶段变成难查的隐性问题。写完顺手用验证器或 DevTools 的 Elements 面板看一眼树。

动手练习：01 简历骨架

配套文件：02-web-basics/examples/01-简历骨架.html。这个例子用到的结构本节能看懂九成：头部信息、几个章节、技能清单、经历时间线和页脚。

没有任何依赖，不需要 npm install。用模块 01 里配置好的 Live Server 打开即可；单独双击文件也能看到效果，但后续页面会互相链接，养成用本地服务器的习惯更省事。

先整读一遍，做到能对着每一行说出它属于 head 还是 body、是内容还是配置。文件里还有三处 TODO，它们的答案如下，改完之后这页就变成自己的简历了：

<!-- TODO 1：加一行 GitHub 或 Gitee 主页链接。第 02 节会系统讲 <a>，先照抄也能用。 -->
<p>主页：<a href="https://github.com/你的用户名">GitHub</a> ·
  <a href="https://gitee.com/你的用户名">Gitee</a></p>

<!-- TODO 2：在技能清单里加两条。 -->
<li>HTML / CSS 页面基础</li>
<li>Leaflet 地图标记与弹窗</li>

<!-- TODO 3：在时间线里补一条未来目标。 -->
<li>2026 完成 WebGIS 个人作品集</li>

如果暂时没有 GitHub 账号，也可以先只保留一行学习计划，不必为了练习而注册外部服务。TODO 1 是“提前用一下”第二个知识点，写完再看第 02 节会有一种“噢，原来如此”的落实感。

通关标准：

页面能正常显示自己的信息
随口能说出 <meta charset> 为什么几乎总是 head 里第一个成员
修改 <title> 后，浏览器标签页文字跟着变化
能指着任意一行，说出它是配置信息、内容还是注释

自测题

HTML、CSS、JS 分别管网页的什么？该用什么比喻向不懂技术的人解释？
删除 <!DOCTYPE html> 会发生什么？为什么它必须待在文件开头？
<meta charset="UTF-8"> 不写，最可能看到什么现象？
下面哪些是自闭合元素：<p> <img> <br> <div> <input>
<p><b>文字</p></b> 错在哪？

参考答案

HTML 管结构、CSS 管外观、JS 管行为；可以拿房子比喻：HTML 是毛坯房划分，CSS 是装修，JS 是水电和智能设备。
浏览器可能进入混杂模式，按旧兼容规则解析页面，样式和布局变得不可预期。它必须在第一行，才能让解析一开始就确定走标准模式。
中文乱码。文件本身是 UTF-8 字节，浏览器却按别的编码解读，显示出一堆“锟斤拷”式的文字。
<img> <br> <input> 是自闭合元素；<p> 和 <div> 需要结束标签。
交叉嵌套。正确写法是 <p><b>文字</b></p>，结束顺序要像洋葱一样逆序收口。

下一步

骨架有了，但页面里还缺“材料”。下一节把文字、列表、图片、表格和超链接这些常用标签认全，简历页就能从骨架长成一张真正能看的页面。

TAGSweb