HTML 文档骨架

任何一份标准 HTML 页面,骨架几乎都是固定的几行。这一章逐行拆解每一部分的作用——看懂这十几行,你就掌握了一切 HTML 文档的"地基"。

1. 完整骨架长这样

把下面代码存为 index.html,浏览器打开就能看到一个最基础的页面:

<!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>
</body>
</html>

2. DOCTYPE 声明

第一行 <!DOCTYPE html> 是文档类型声明,告诉浏览器这是 HTML5 文档,请用标准模式渲染。固定写法,字母大小写不敏感,但通常全大写以示郑重。

历史小知识:HTML 4 和 XHTML 1.0 时代的 DOCTYPE 写法极其冗长(常常 100 多字符),开发者根本记不住只能复制。HTML5 简化到这一行,大快人心。

千万别省略!省了 DOCTYPE,浏览器会进入"怪异模式"(quirks mode),很多盒模型、表格行为会变得不一致,调试时让你怀疑人生。

3. html 根标签

<html> 是整个文档的根标签,所有其他标签都必须包在它里面。一个 HTML 文档只有一个 html 元素。

它通常带一个 lang 属性,声明页面主要语言:

lang="zh-CN":简体中文。
lang="en":英文。
lang="ja":日文。

lang 看似不起眼,但作用很大:搜索引擎用它判断页面语言、浏览器用它决定是否翻译、读屏软件用它选语音引擎。所以必写。

4. head 头部

<head> 里放看不见的元信息——浏览器不会把它渲染到页面上,但这些信息至关重要:

<head>
  <!-- 字符编码:必放第一行,防乱码 -->
  <meta charset="UTF-8">

  <!-- 视口:让移动端自适应屏幕 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 页面标题:浏览器标签上显示的字 -->
  <title>我的网站 - 首页</title>

  <!-- 描述:搜索引擎可能用作摘要 -->
  <meta name="description" content="这是一个示例网站">

  <!-- 引入外部 CSS -->
  <link rel="stylesheet" href="style.css">

  <!-- 页面内的小图标(浏览器标签上的图标) -->
  <link rel="icon" href="favicon.ico">

  <!-- 引入 JS(defer 表示解析完 HTML 再执行) -->
  <script src="app.js" defer></script>
</head>

关键元素:

meta:元信息标签,通过属性配置字符集、视口、描述、关键词等。
title:页面标题,显示在浏览器标签上,也是搜索引擎结果中最大的字。SEO 中最重要的一项。
link:引入外部资源,最常用是 CSS 样式表和网站小图标(favicon)。
script:引入 JavaScript 文件或写内联脚本。
style:页面内嵌的 CSS(不推荐大量使用,建议外联)。

5. body 主体

<body> 里放看得见的内容——所有要显示在页面上的东西都写在这里。一个文档只有一个 body。

<body>
  <!-- 页面顶部 -->
  <header>
    <h1>我的博客</h1>
    <nav>导航菜单</nav>
  </header>

  <!-- 主体内容 -->
  <main>
    <article>
      <h2>第一篇文章</h2>
      <p>正文段落……</p>
    </article>
  </main>

  <!-- 页脚 -->
  <footer>© 2026 我的博客</footer>

  <!-- 脚本放 body 末尾,不阻塞渲染 -->
  <script src="app.js"></script>
</body>

注意最后一行:script 标签通常放在 body 末尾。因为浏览器从上到下解析 HTML,遇到 script 会停下来先下载执行,如果在 head 里放大量 JS,页面会"白屏"很久。放末尾可以让 HTML 先渲染出来,体验更好。

6. 属性 — 标签的"配置项"

属性写在开始标签里,格式是 名="值",用来给元素附加额外信息。一个元素可以有多个属性,顺序无所谓,用空格分隔:

<!-- 属性写在开始标签里,格式: 名="值" -->
<a href="https://example.com" target="_blank">链接</a>
<!-- href 和 target 都是属性 -->

<!-- 一个元素可以有多个属性,顺序无所谓,用空格分隔 -->
<img src="cat.jpg" alt="一只猫" width="200" height="150">

<!-- 布尔属性:只写名字就生效,不需要赋值 -->
<input type="text" disabled>
<option selected>默认选中</option>

<!-- 自定义数据属性 data-* -->
<div id="user" data-user-id="42" data-role="admin">张三</div>

常用全局属性(任何标签都能用):

id:页面内唯一标识,不能重复。JS/CSS 用它精确选中元素。
class:样式分类,可以多个元素共用,也允许一个元素有多个类(空格分隔)。
style:行内样式,优先级最高(不推荐大量使用)。
title:鼠标悬停时的提示文字。
lang / dir:声明语言 / 文字方向(左到右、右到左)。
data-*:自定义数据属性,JS 里通过 dataset 读取。

7. 自闭合标签

大多数标签成对出现(如 div、p),但少数标签没有内容也没有结束标签,称为"自闭合标签"或"空元素":

meta:文档元信息。
link:外部资源。
img:图片。
input:表单输入。
br:换行。
hr:水平分割线。

HTML5 中可以写 <br> 或 <br />,两者等价。XHTML 时代强制要求后者,现在不再强制。

8. 字符编码

页面"乱码"几乎都是字符编码没声明或声明错。在 head 第一行加 <meta charset="UTF-8"> 就能解决 99% 的问题:

UTF-8:统一码,支持世界上几乎所有文字(中、英、日、阿拉伯、emoji……),永远的首选。
GBK / GB2312:中文旧编码,只在维护老网站时会遇到,新项目不要用。

同时,你的 HTML 文件保存时也要选 UTF-8 编码(VS Code 默认就是)。

9. 字符实体

如果想在页面上直接显示 <、>、空格等字符,会和 HTML 标签语法冲突。这时用"字符实体":以 & 开头、; 结尾。

<p>HTML 中用 &lt; 表示小于号,因为 &lt; 会被当成标签</p>
<p>大于号 &gt;  和号 &amp;  引号 &quot;</p>
<p>不换行空格 &nbsp;&nbsp;&nbsp; 连续多个也能保留</p>
<p>版权符号 &copy; 2026  人民币 &yen;99  注册商标 &reg;</p>

最常用的几个:&(显示 &)、<(显示 <)、>(显示 >)、 (不换行空格,连续多个也能保留)。写技术博客展示代码时这几个一定要会用。

10. 一个完整的最小页面

把所有概念串起来,这是一个语义完整、能直接上线的小页面骨架:

<!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>
</body>
</html>

记住这个结构——你接下来无论写多复杂的页面,根上都是这一套。

小结

这一章你了解了 HTML 文档的整体骨架:DOCTYPE → html → head/body;知道了 head 里放看不见的元信息、body 里放看得见的内容;记住了属性、自闭合标签、字符编码、字符实体的用法。下一篇我们进入 body 内部,学最基础的内容标签——标题、段落与文本。

← 上一篇编辑器与浏览器

下一篇标题、段落与文本 →

✈️💬