head 里的元信息

head 不负责放页面正文，它描述浏览器、搜索引擎和其他消费者应该怎样解释文档。元信息不是“可有可无的配置集合”：字符编码会影响字节如何变成文本，viewport 会影响移动设备的布局视口，标题会影响标签页和历史记录。

从字符编码开始

<head>
  <meta charset="utf-8">
  <title>元信息实验</title>
</head>

charset 告诉浏览器如何把文档字节解码为字符。实际部署时，服务器的 Content-Type 响应头也参与编码判断；只修改 HTML 不能修复服务器发送了错误字符集的情况。声明应尽早出现在 head 中，避免浏览器已经按错误编码开始解析后才发现修正。

viewport 解决的是哪一个问题

<meta name="viewport" content="width=device-width, initial-scale=1">

这条声明让移动浏览器按设备宽度建立布局视口，并以 1 倍初始缩放开始。它不会自动让页面响应式，也不会替代媒体查询、弹性尺寸和可读排版；它只是让后续 CSS 的视口判断建立在合理起点上。

不要把 user-scalable=no 或极小的 maximum-scale 当作默认模板，它们可能阻止用户放大页面。可访问性要求和视觉控制之间发生冲突时，应优先保留用户调整文字和页面的能力。

title、description 与资源链接

<title>产品文档 · 入门</title>
<meta name="description" content="介绍产品文档的基本结构。">
<link rel="stylesheet" href="./styles.css">

title 是页面身份的一部分，浏览器标签页、书签和历史记录都可能使用它。description 不是保证搜索结果摘要的命令。link rel="stylesheet" 声明外部样式表关系，资源是否加载成功还取决于 URL、响应类型、CSP 和网络状态。

运行实验

1. 用 UTF-8 保存含有中文的页面，打开并确认字符正常显示。
2. 将 charset 改成错误编码，比较页面文字和开发者工具中响应头的差异。
3. 在设备模拟器中分别保留和删除 viewport 声明，观察布局视口宽度，再用 window.innerWidth 记录结果。
4. 修改 title，观察标签页、刷新和历史记录中的页面身份如何变化。

边界与常见错误

• 只设置 HTML charset，却忽略服务器响应头。
• 把 viewport 当成响应式布局本身。
• 用空的或重复的 title，使标签页和辅助技术难以识别页面。
• 为了禁止缩放而限制用户操作。
• 用 link 引入资源，却没有验证相对路径和最终响应类型。

练习

给一个包含中文、移动布局和外部 CSS 的页面补全 head。写出你选择每条元信息的理由，并用开发者工具记录：文档编码、viewport 宽度、页面标题和样式表响应状态。至少制造一次错误路径，说明它影响的是解码、布局、身份还是资源加载。

继续阅读

有了文档骨架和元信息，下一篇开始区分 header、nav、main、article 等语义元素：语义化标签家族。

查看本节答案