前端Wiki/词条/head 头部信息

head 头部信息

定义页面元信息的容器，里面放的内容全部不显示，但决定页面怎么被加载和被搜索

head 里住着三类专业住户：一是文档描述，包括 title（标题）、meta description（搜索结果摘要）；二是资源指挥，charset 声明编码、viewport 控制移动端缩放、CSS 与 icon 的引入；三是脚本与预热，script、preconnect、prefetch 等。head 本身不渲染任何内容，但漏掉 viewport 移动端就会变成缩小版桌面页。

head 最容易被忽视的是 meta description：它不直接影响排名，却是搜索结果摘要的文字来源，写得好能显著提升点击率。charset 必须放在最前面，否则浏览器在解析到声明前可能已经按错误编码读了一段。性能优化的第一步也发生在 head：dns-prefetch、preconnect 提前建连，preload 预加载关键字体与 CSS。

head 不渲染内容，放标题、meta、样式、脚本等元信息
viewport 是移动端正常显示的前提，漏掉页面缩成一团
charset 必须在最前，dns-prefetch/preconnect 可提前建连

HTML

<style>
  .head-box { background: #f4f6f8; border-radius: 8px; padding: 12px;
              font-family: Consolas, monospace; font-size: 12.5px; }
</style>
<p>head 区域的内容示意（实际应放在文档 head 标签中）：</p>
<div class="head-box">&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport"
        content="width=device-width, initial-scale=1"&gt;
  &lt;title&gt;页面标题&lt;/title&gt;
  &lt;meta name="description" content="页面摘要文字"&gt;
  &lt;link rel="preconnect" href="https://cdn.example.com"&gt;
  &lt;link rel="stylesheet" href="style.css"&gt;
&lt;/head&gt;</div>

⚠ 常见误区

把正文文字写进 head，结果整段不显示
charset 放在 title 后面，前面的中文可能乱码
样式与脚本全堆在 head 不做任何优化，首屏白白等几秒

🔗 相关词条文档结构 title 与 meta 描述