HTML head 元素实战：标题、元数据、资源与脚本加载

head 是文档级元数据与资源引用的容器，不是页面可见内容的替代区。选择元素时先确认它改变的是文档标题、搜索摘要、资源加载、脚本执行时机还是 URL 解析；这些职责彼此不同。浏览器对错误 markup 的恢复不能作为省略必需信息的理由。

title、h1 与 meta 各有职责

title 是浏览器标签、历史记录和搜索结果可能使用的文档标题；h1 是页面正文面向读者的主题标题，两者可以相近但不是同一个元素。每个可独立访问的页面应给出有区分度的 title。description 可作为搜索摘要候选，但搜索引擎可能根据查询改写，不保证排名或固定展示。keywords 元数据不应作为现代 SEO 的主要手段。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML head 实战 | 开发手册</title>
  <meta name="description" content="认识文档标题、元数据、资源和脚本加载边界。">
  <link rel="canonical" href="https://example.com/guides/html-head/">
  <link rel="icon" href="/favicon.ico" sizes="any">
</head>

charset 应尽量位于 head 前部，并与响应头 charset 一致。viewport 是移动布局的基线，不是固定宽度适配方案。Open Graph 等分享元信息应使用绝对 URL；canonical 需要由页面路由和内容规范决定，不能无脑指向首页。

base 会改变整个文档的相对 URL

base 最多一个，指定 href 后，文档中未写绝对地址的链接、图片、脚本、表单等都可能相对于它解析；片段链接也会随之改变。把示例站点地址放进 base 会让本站资源和链接整体跳走。除非确实要统一改变解析基准，否则不要使用它；使用时把它放在依赖 URL 的元素之前，并通过 CSP 的 base-uri 限制允许值。

<meta http-equiv="Content-Security-Policy" content="base-uri 'self'">
<base href="https://example.com/docs/">

base target="_blank" 会让未显式声明 target 的链接和表单默认打开新上下文，通常不适合作为全站默认。外链逐个表达导航意图；不要让隐藏的全局默认改变每个表单的提交位置。

link：声明外部资源关系

stylesheet 用于样式表，icon 用于站点图标，preconnect 可提前建立确有必要的跨源连接。preload 会提高资源优先级，只有已确认首屏关键且稍后确实会使用的资源才值得预加载；错误的 as、跨源凭据模式或重复 URL 可能造成浪费。资源提示不是缓存策略，也不能代替响应头、版本化 URL 和性能测量。

script：按依赖关系选执行时机

经典脚本不带 async/defer 时会在解析到它的位置执行，可能暂停 HTML 解析。外部经典脚本使用 defer 时在解析完成后执行，并按文档顺序运行；async 在下载完成后尽快执行，彼此没有执行顺序保证。type="module" 默认延后执行、拥有模块作用域，并遵循模块加载的 CORS 规则；给 module 再加 defer 没有额外作用。内联经典脚本上的 defer 不会实现延迟。

<script defer src="/assets/vendor.js"></script>
<script defer src="/assets/app.js"></script>
<script type="module" src="/assets/entry.js"></script>
<script async src="https://analytics.example.test/independent.js"></script>

vendor 和 app 有顺序依赖时，defer 保留文档顺序；独立分析脚本可以考虑 async。不要为了避免 DOM 未就绪而随意改成 async。把脚本执行时机、依赖顺序、失败回退和 CSP 一起检查。服务器返回正确 MIME、缓存头和内容安全策略，比堆叠加载属性更重要。

发布前核对

1. title 是否唯一、准确，正文 h1 是否清楚表达内容？
2. charset、viewport、description、分享图绝对 URL 是否与当前页面匹配？
3. 是否无意引入 base，或让相对链接、片段和表单目标发生变化？
4. async/defer/module 是否按脚本依赖选择，加载失败时页面是否可恢复？
5. preload/preconnect 是否由真实性能数据支持，CSP 是否限制 base 与脚本来源？

参考：MDN 页面元数据、MDN meta、MDN base、MDN script、MDN script loading、MDN CSP base-uri。