HTML与CSS基础第二课—初识HTML

最简单的完整 HTML 长什么样

一个最简单的HTML片段

这里的「最简单」是指每一层只留必不可少的一行，但整份文件的结构是齐的。还用上一篇的 index.html，整份换成下面的内容。文件用 UTF-8 保存，Cursor 和 VS Code 右下角会标着 UTF-8。保存后刷新：Mac 用 Cmd + R，Windows 用 F5。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>前端从零到架构师</title>
</head>
<body>
  <h1>前端从零到架构师</h1>
  <p>这是一门给零基础的人准备的课程。</p>
</body>
</html>

打开后看两个地方。页面中央是一行标题加一段话，它们在 body 里。浏览器标签页上的字是「前端从零到架构师」，它来自 title。地址栏以 file:/// 开头，说明这是本地文件。

用 Chrome 或 Edge 打开，在页面空白处右键选「检查」，再点「控制台」。Mac 也可以按 Option + Command + J，Windows 按 Ctrl + Shift + J。逐行输入下面四句，每句回车一次：

js 复制代码

document.compatMode
document.characterSet
document.documentElement.lang
document.title

四次结果依次是 CSS1Compat、UTF-8、zh-CN、前端从零到架构师。这四句后面会用来核对每一层有没有写对。

HTML每个片段的说明和介绍

这份文件从上到下是这些层：

text 复制代码

index.html
├─ <!DOCTYPE html>          按现代 HTML 的标准来读
└─ html lang="zh-CN"        整页，并标明是简体中文
   ├─ head                  文档信息，不铺在页面正文里
   │  ├─ meta charset       按 UTF-8 把字节认成字
   │  └─ title              标签页、收藏夹上的名字
   └─ body                  读者在页面上看到的内容
      ├─ h1                 页面上的标题
      └─ p                  页面上的一段话

除了第一行的 DOCTYPE 和 meta，其余都是成对标签：开始写成 <名字>，结束写成 </名字>，名字相同，斜杠在结束标签里。meta 没有结束标签，不要写 </meta>。

`<!DOCTYPE html>`

放在文件第一行。它是文档类型声明，不是元素，没有结束标签，页面上也不占一块地方。它要求浏览器按现代 HTML 的标准模式解析。

有这一行时，document.compatMode 是 CSS1Compat。删掉这一行，保存再刷新，值变成 BackCompat，正文和标签页上的字都还在。浏览器会补上你没写的 html、head、body，不会补 DOCTYPE。BackCompat 表示沿用一批旧的排版规则，写 CSS 时才会看出来。把第一行加回去，值回到 CSS1Compat。有哪些旧规则，以 WHATWG 的 Quirks Mode 标准为准。

`html`

根元素，一页只有一个，包住 head 和 body。lang="zh-CN" 写在开始标签里，这种 名字="值" 叫属性。lang 是语言标签，遵循 BCP 47。zh-CN 表示中国大陆使用的简体中文，中间是连字符。

它不翻译页面，也不改变字号和颜色。读屏软件按它决定怎么朗读，浏览器判断要不要提示翻译时会参考它。写成 zh_CN 或 cn，页面不报错，这句语言标签是无效的。核对方式是 document.documentElement.lang，结果应为 zh-CN。

`head`

文档信息区。这里的内容不铺在页面正文里。这一篇的 head 里只放两样：编码，和标签页标题。

网页图标、给搜索结果准备的描述、样式表，也都放在 head，各有后面的篇，这里不写。

不要把正文放进 head。在 title 下面单独加一行「这行字写在 head 里」，不包进任何标签，刷新后它会出现在页面顶部。浏览器一遇到 head 里的普通文字，就结束 head、开始 body，把这行字挪进去。看完把这行字删掉。

`meta charset`

<meta charset="UTF-8"> 告诉浏览器：文件里的字节按 UTF-8 解码成字符。它是空元素。文件本身也要用 UTF-8 保存，两边是同一个名字。

浏览器只在文件开头这一小段里寻找这条声明，规范里的预扫描上限是 1024 字节，所以把它放在 head 的第一行。

现在的 HTML 规范约定，猜不到编码时回退到 UTF-8。删掉这行、文件仍是 UTF-8 时，Chrome 里 document.characterSet 往往还是 UTF-8，中文照样正常。那是猜对了。文件编码和声明不一致时，中文会变成另一串字。

可以当场看一次。第一行保持不动，把 charset 改成 GBK，把 title 和 h1 里的字暂时改成「你好」。不要把文件另存成 GBK，右下角仍应是 UTF-8。保存，刷新。标签页和页面上的「你好」都会变成「浣犲ソ」。字节没变，浏览器用 GBK 的码表去认 UTF-8 的字节，就认成了别的字。改回 UTF-8，文字改回「前端从零到架构师」，刷新后恢复。

页面若由服务器发出，响应头里的编码优先于这个 meta。本地双击打开没有响应头，这行就是文件里能写上的依据。

`title`

文档标题。显示在浏览器标签页上，也用作收藏夹里的名称。它不出现在页面正文里。

页面上那行大字是 body 里的 h1。两边可以写成同一句话，但是两个元素：改 h1 不会改标签页。没写 title 时，document.title 是空字符串，标签页上没有文档标题，只能看到文件名或地址。搜索结果里怎么采用 title，是后面「标签页标题，和一段简介」那一篇的事。

`body`

读者在页面上看到的内容放在这里。这一份里有两块：h1 是页面上的标题，p 是一段话。h1 到 h6 的数字表示哪一级、一页写几个 h1、段与段之间的空隙从哪来，下一篇再讲。

验收标准

能写出这份文件：第一行是 <!DOCTYPE html>，html 包住 head 和 body，head 里有 charset 和 title，给人看的字在 body 里。
打开后能指出两处字：页面中央来自 h1 和 p，标签页来自 title。
控制台里 document.compatMode 是 CSS1Compat，document.characterSet 是 UTF-8，document.documentElement.lang 是 zh-CN。

下一篇：页面上那行更大的字，到底是「一级标题」还是「大号字」？一页写两个 h1，浏览器会怎么理解？