HTML 教程 / 设置页面标题、描述、语言与字符编码

HTML 文档的 head 包含信息，例如其浏览器标签页的 title、字符编码和页面描述。文档的默认语言应在 html lang 中设置。这些设置有助于浏览器和其他工具解释和描述页面，但不能替代 body 中的可读内容。

从完整的文档开始

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>小花园 | 植物养护指南</title>
  <meta name="description"
        content="通过《小花园》指南，探索适合初学者的植物及其基本养护方法。">
</head>
<body>
  <h1>小花园</h1>
  <p>学习如何照顾植物。</p>
</body>
</html>

将代码保存为 index.html 并在浏览器中打开。title 会出现在浏览器标签页上，而 h1 会显示在页面上。它们具有不同的功能，但应该一致地描述同一页面。例子中的 h1 位于示例文档中，而不是本教程帖子的第二个标题。首先在 HTML 文档的基础结构 中区分 head 和 body。

head 的大多数内容在页面上不会以普通文本显示。请在 body 中提供读者应看到的说明和解释。在多页网站上，请为每一页撰写一个唯一且准确的标题和描述，而不是到处复制相同的网站名称。

设置语言和字符编码

lang="zh-CN" 指明文档的默认语言为中文（中国）。这可以帮助辅助技术朗读和处理内容。请使用页面的实际语言；偶尔的一句外语不需要更改整个文档的 lang。较长的外语段落可以有自己的语言属性。语言和结构还支持 基本可访问性检查：标题、链接、图片和键盘 。

meta charset="utf-8" 指定字符编码。也请将文件本身保存为 UTF-8。如果字符显示错误，请检查保存时选用的编辑器编码，以及如果文件在线提供，还要检查服务器的响应头。仅更改标签不能修复以其他编码保存的文件。

理解描述和显示窗口

元数据 description 必须概括读者在此特定页面上可以找到的内容，并且不得列出关键字。搜索引擎可能会从页面的文本或元数据中生成结果摘要，因此所写的描述不一定会逐字显示。请参见 关于 Google 搜索中摘要的文档 。

参数 viewport 影响布局的视窗和移动设备上的初始缩放。它在配合响应式 CSS 时很有用，但单独使用该标签不能确保每个元素都适合手机屏幕。不要仅仅因为文字看起来很小就限制缩放；相反，应修正 CSS 和字体大小。请参阅 MDN meta 参考 和 标题参考。

在正确的位置检查设置

lang 不是 head 内的独立标签。将其设置在文档元素上，如 <html lang="zh-CN">，并在特定元素上使用语言属性来表示另一种语言的部分。

1. 如果字符无法读取，请打开原始的正确文档，并在保存时检查其实际编码。在保存可能已经被错误解码的文本之前，请保留一份副本。
2. 保存一个已知且正确的 UTF-8 编码文件，保持字符集声明接近开头位置，然后重新打开它。更改声明无法修复已经损坏的文本。
3. 如果本地文件是正确的，但服务器提供的页面不是，请检查网络中文档响应的 Content-Type 和字符集。使服务器声明与文件的实际编码保持一致。

MDN：lang 全局属性

在分享页面之前检查它

确保每个标签标题能区分各自的页面，确保可见标题描述相同的主题，并且字符显示正确。如果撰写了描述，请将其与当前文本主体进行比较，而不是与旧版本比较。在典型的手机宽度下打开页面，并测试缩放和横向滚动；元数据和布局必须协同工作。