第一个网页 — HTML 文档的骨架与浏览器开发者工具¶

这一章讲三件事: 一个最小的 HTML 文件由哪几行构成、每一行在跟浏览器说什么; 怎么往里放标题和段落;以及怎么打开浏览器自带的「X 光机」——开发者工具——亲眼看到页面的内部结构。 不需要任何编程基础——这是全书第一次真正动手写代码,遇到的生词都在当场解释。

1. 先看现象:一个空文件和一个「能打开的页面」之间,隔着五行¶

在 VS Code 里新建一个叫 index.html 的文件,什么都不写,用 Live Server 打开——浏览器给你一个白页。然后敲一个感叹号 !、按一下 Tab,编辑器自动替你补出十来行代码;存盘,浏览器里还是一个白页。

页面没变,但你手里这个文件已经从「一个空文本」变成了「一份浏览器认得的文档」。 这一章就是把那十来行逐行拆开,告诉你每一行在跟浏览器说什么——这是全书 HTML 部分的地基。

2. 顶层全景:文档的骨架¶

一份合法的 HTML 文档,结构是固定的,像填表一样,每一格有每一格的位置:

  <!DOCTYPE html>          ← 第 1 行:告诉浏览器「这是 HTML5 文档,按新版规则来」
  <html lang="en">         ← 第 2 行:整个文档的根;lang 说这份内容是哪种语言
      <head>               ← 给浏览器看的「档案页」:编码、标题、外部文件的引用
          <meta charset="UTF-8">
          <meta name="viewport" ...>
          <title>...</title>
      </head>
      <body>               ← 给人看的「正文」:页面上可见的一切都在这里
          <h1>...</h1>
          <p>...</p>
      </body>
  </html>

  图说:head 的内容不显示在页面上,但浏览器第一个读它;body 的内容才决定用户看到什么。

注意这棵缩进树——HTML 的结构天然是嵌套的:html 套 head 和 body,head 套 meta 和 title, body 套 h1 和 p。第 01 章说过的 DOM 树,就是把这个嵌套关系原样画出来; 第 12 章你会用 JavaScript 在这棵树上爬上爬下。

3. 骨架逐行拆:每一行解决什么问题¶

第 1 行:文档类型声明 `<!DOCTYPE html>`¶

这不是一个标签,是一条「声明」:告诉浏览器接下来这份文档是什么类型——这里是 HTML5¹。历史上有过好几个 HTML 版本,声明不同,浏览器进入的解析模式就不同。今天统一写 <!DOCTYPE html> 这一个就行了,但它的位置必须是全文件第一行,前面连空行都不该有。

第 2 行:根元素 `<html lang="en">`¶

<html> 是整个文档的根元素,所有其他标签都装在里面²。 lang="en" 是一个属性(attribute)——写在开始标签里、给这个标签补充信息的键值对—— 它声明这份文档用的是英语³。

为什么一行属性值得专门讲?因为它服务的对象不是浏览器,而是「辅助技术」: 屏幕阅读器(给视障用户读页面的软件)拿到 lang 才知道该用哪套语音规则来读。 这是全书第一次碰到「无障碍」这个主题:HTML 里很多看似多余的属性,都是写给机器而不是写给人的。

head:给浏览器的档案页¶

<head> 里装的是元信息(meta-information,描述文档自身的信息),不显示在页面上⁴。书里点了三样,每一一样都不能省:

head 里的东西	干什么用	少了会怎样
`<meta charset="UTF-8">`	规定字符编码——中文、emoji 等字符按什么规则解码⁵	中文变乱码(经典的「锟斤拷」)
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`	告诉手机浏览器:把页面宽度对齐设备宽度、初始缩放为 1⁵	手机打开时页面缩成微观世界,要手动放大——响应式设计(第 09 章)从这一行才开始成立
`<title>…</title>`	浏览器标签页上显示的名字⁴	标签页显示文件名,丑且不利于收藏

body:给人看的正文¶

<body> 里装的是所有可见内容——文字、图片、视频、链接⁶。这一章往里放两种最基础的:

标题 <h1> 到 <h6>。六级,从最大的 <h1>(页面主标题)到最小的 <h6>⁷。书里强调的用法是按层级用,不按大小用:<h1> 是全页一个的主标题,<h2> 分节,<h3> 是节中节⁸。为什么要这么死板?因为标题层级是这张页面的目录结构——搜索引擎和屏幕阅读器都靠它理解页面。想调字号,后面有 CSS;在 HTML 里挑 <h4> 还是 <h5> 只看结构层级,不看视觉大小。

段落 <p>。每段文字包一对 <p>...</p> 里⁹。浏览器默认在每段之间留白—— 你看到的「段落间距」不是 HTML 里的空行给的,是浏览器给 <p> 配的默认样式(第 07 章盒模型会拆穿它)。

存盘与预览¶

骨架填完,Ctrl+S(Mac 是 Cmd+S)存盘,右键文件选 Open with Live Server, 浏览器里就能看到标题和段落¹⁰。页面现在还是「浏览器默认样式」的样子——朴素,但结构全对。 全书前半程的节奏就是这样:先把结构写对,再把样子改漂亮。

4. 一个小杠杆:Emmet¶

书里在这一章介绍了 VS Code 内置的一个叫 Emmet 的功能:输 ! 再按 Tab, 骨架自动生成;类似地,输 h1 按 Tab 变 <h1></h1>,输 ul>li*3 能一次生成带三个列表项的列表¹¹。

Emmet 是「缩写展开」——你写简写,它替你补全。它不是本书要教的内容,但它是前端编辑器的行业标准配置, 出门见人都会用;记住 ! + Tab 这一条,骨架再也不用背。

判断(我们的,不是书里的): 这一章真正的知识点只有两个:骨架的五层结构,和「结构归 HTML、样子归 CSS」的分工纪律。标题层级那段最值得反复咀嚼——初学者最常见的坏习惯就是拿 <h1>–<h6> 当字号调节器,这个习惯到做真实项目时会变成无障碍和搜索引擎双重债务。 如果错,会错在: 某些设计稿确实只需要「看起来大」的文字而不管层级(比如营销页的大字报), 那种场合用 CSS 调 <p> 的字号反而更诚实——「按层级用标题」是默认纪律,不是宗教。

5. 主线例子:把一个标题从代码变成画面¶

这一章的主线例子,就是「<h1>Welcome to Anna's Kitchen</h1> 这一行在浏览器里经历了什么」:

  代码:   <h1>Welcome to Anna's Kitchen</h1>
            │  浏览器读到 <h1>:「一个一级标题开始了」
            │  浏览器读到文字:内容收进这个元素
            │  浏览器读到 </h1>:「它结束了」
            ▼
  DOM 树:  body → h1 → "Welcome to Anna's Kitchen"(文本节点)
            │
            ▼
  渲染:   浏览器给 h1 配默认样式(大字、粗体、上下留白)→ 画在页面顶部

  图说:你写的是标签,浏览器建的是节点,用户看的是样式——一层对一层。

每一步旁边的「具体状态」:DOM 树里多了一个 h1 元素节点、它下面挂一个文本节点; 渲染时浏览器给 h1 的默认样式大约是「字号 2em、粗体、上下各约 0.67em 外边距」 (具体像素值各家浏览器略有差异,这是 ④ 类通用知识补充,不在书里)。 这三个层次——代码、树、画面——的对应关系,是理解第 12 章 DOM 编程的前提。

6. 浏览器开发者工具:页面的 X 光机¶

这一章的第二个重头戏是 开发者工具(developer tools):现代浏览器都内置的一块面板, 按 F12 打开¹²。书里列了它能做的事,一次看全:

能力	对应本书的哪一章
查看和修改 DOM 树、临时改 HTML/CSS	第 12 章的主战场
分析网络请求	第 01 章那条「要文件」的接力,在这里逐条可见
调试 JavaScript	第 11、13 章
优化性能	超出本书范围

对初学者,先记住一个用法:Elements(元素)面板。它把当前页面的 DOM 树整个摆在你眼前, 你点任何一行,页面上对应的部分就高亮——这是你第一次能「看到」第 01 章说的那棵树。更妙的是,你可以在面板里临时改文字、改样式,页面立刻变样——但刷新后一切还原, 因为改动只发生在你的浏览器里,没碰源文件。「先在这里试,满意了再回编辑器里写」是前端的标准工作流。

7. 作者的判断与证据¶

这一章以操作为主,判断集中在两处:

书内作为事实给出的: 骨架五行的结构与含义¹²⁴⁵、标题六级的层级用法⁷⁸——这些与 HTML 现行标准一致,可以放心照用。

作为作者习惯给出的: 「Dark Modern 护眼」一类建议(上一章)和本章「Emmet 提速」¹¹,都是工具使用层面的经验,没有对错,只有顺不顺手。

一处值得标出的取舍: 书里对 <meta viewport> 只说「对响应式设计至关重要」⁵, 没有解释为什么——我们把原因补上了:没有它,手机浏览器会假装自己是 980 像素宽的桌面屏幕, 把整个页面缩小塞进去(这是 ④ 类通用知识,不在书里)。这个坑的深浅,第 09 章会彻底展开。

8. 边界与局限¶

骨架教学版够用,但不是 HTML 头的全集。 <link>(引 CSS)、<script>(引 JS)也是 head 的常客,本书到第 07 章才让它们登场——这个顺序合理,但读者要知道 head 不止三样东西。
默认样式因浏览器而异。 h1 的默认大小、段距,Chrome 和 Safari 略有不同——这正是第 07 章 CSS 存在的原因(把所有浏览器的默认值统一接管)。
开发者工具只讲了一句「按 F12」。 它的深度远超本书所需,但这个「按一下 F12 就能看到页面内部」的意识,比任何单点功能都值钱。

9. 可带走的¶

全章主线例子,一行写完: <h1>Welcome to Anna's Kitchen</h1> → 浏览器解析成 DOM 树里的一个元素节点 + 一个文本节点 → 套上浏览器默认样式 → 画在页面顶部。

文档骨架固定五层:<!DOCTYPE html> → <html> → <head>(给浏览器) + <body>(给人);
<meta charset="UTF-8"> 防中文乱码;<meta viewport> 是手机端正常显示的前提;
标题按层级用(<h1> 一个主标题 → <h2> 分节),不按想要多大字来挑;
标签成对出现,内容在中间;属性在开始标签里补充信息(lang、charset 都是);
Emmet:输 ! 按 Tab 出骨架——这是行业标准,必会;
F12 打开开发者工具,Elements 面板能看到页面的 DOM 树,还能临时改样式试效果,刷新即还原;
「先开发者工具里试,再回编辑器里写」是前端的标准工作流。

10. 原文地图¶

主题	原书章	原文位置
doctype 的作用	Creating Your First Web Page	`text/09-fm-introduction.txt:37`(搜「document type declaration」)
head 装什么(title、viewport、字符集)	Creating Your First Web Page	`text/09-fm-introduction.txt:41`(搜「viewport」)
body 装可见内容	Creating Your First Web Page	`text/09-fm-introduction.txt:43`(搜「visible content」)
html 根元素与 lang	Creating Your First Web Page	`text/09-fm-introduction.txt:71`(搜「root element」)
meta charset 与 viewport	Creating Your First Web Page	`text/09-fm-introduction.txt:73`(搜「charset」)
标题的层级用法	Creating Your First Web Page	`text/09-fm-introduction.txt:91`(搜「headings of different sizes」) · `text/09-fm-introduction.txt:133`(搜「highest level」)
Emmet 生成骨架	Creating Your First Web Page	`text/09-fm-introduction.txt:59`(搜「Emmet」)
开发者工具与 F12	Creating Your First Web Page	`text/09-fm-introduction.txt:111`(搜「F12」)

出处:「Creating Your First Web Page」第 37 段(text/09-fm-introduction.txt:37,搜「document type declaration」)。原文:「This tells the browser what type of document to expect.」 ↩↩
出处:「Creating Your First Web Page」第 127 段(text/09-fm-introduction.txt:127,搜「root element」)。 ↩↩
出处:「Creating Your First Web Page」第 71 段(text/09-fm-introduction.txt:71,搜「root element」)。原文点名了屏幕阅读器等辅助技术靠 lang 决定用什么语音规则读页面。 ↩
出处:「Creating Your First Web Page」第 41 段(text/09-fm-introduction.txt:41,搜「viewport」)。原文说明 <title> 出现在浏览器标签页,head 里还可以放视口、字符集、外部 CSS/JS 的链接。 ↩↩↩
出处:「Creating Your First Web Page」第 73 段(text/09-fm-introduction.txt:73,搜「charset」)。原文:「<meta name="viewport" content="width=device-width, initial-scale=1.0">, which controls how the web page is displayed on different devices, particularly mobile devices, which is crucial for responsive web design.」补充(不在书里,来自通用知识):没有 viewport 声明时,手机浏览器默认按约 980 像素的虚拟宽度渲染再整体缩放,这是移动端体验崩坏的常见根源。 ↩↩↩↩
出处:「Creating Your First Web Page」第 43、75、131 段(text/09-fm-introduction.txt:43,搜「visible content」;:75,搜「displayed on the web page」;:131,搜「visible content displayed」)。 ↩
出处:「Creating Your First Web Page」第 133 段(text/09-fm-introduction.txt:133,搜「highest level」)。 ↩↩
出处:「Creating Your First Web Page」第 91 段(text/09-fm-introduction.txt:91,搜「headings of different sizes」)。原文:「Headings often follow a hierarchy to provide a clear structure to the content.」 ↩↩
出处:「Creating Your First Web Page」第 105 段(text/09-fm-introduction.txt:105,搜「paragraph of text」)。 ↩
出处:「Creating Your First Web Page」第 77–83 段(text/09-fm-introduction.txt:77,搜「Ctrl+S」;:79,搜「Open with Live Server」)。 ↩
出处:「Creating Your First Web Page」第 59 段(text/09-fm-introduction.txt:59,搜「Emmet」)。 ↩↩
出处:「Creating Your First Web Page」第 111 段(text/09-fm-introduction.txt:111,搜「F12」)。原文列出开发者工具的四项能力:查看修改 DOM 树、临时改 HTML/CSS、分析网络请求、调试 JavaScript。 ↩