讲解

<head> 里的内容不显示在页面上，却决定了页面如何被解析、被索引、被分享。其中两个 meta 标签必须最先写：<meta charset="UTF-8"> 声明字符编码，它必须出现在文档前 1024 字节内，所以习惯上紧跟 head 开头——少了它，中文在某些环境下会变乱码；<meta name="viewport" content="width=device-width, initial-scale=1.0"> 告诉手机浏览器按设备宽度布局，是移动端适配的总开关，没有它手机会把页面按桌面宽度缩小显示。

<title> 定义页面标题，显示在浏览器标签页上，也是搜索结果里那行蓝色大标题。标题要具体、唯一、控制在 30 个汉字以内：「关于我们 - 某某公司」远好于「页面1」。<meta name="description" content="..."> 是页面摘要，搜索引擎常把它显示在标题下方，一两句话概括页面价值即可。这两个字段是 SEO 的基石，SEO 章节还会展开。

head 里还常见三类引用：<link rel="stylesheet" href="css/style.css"> 引入外部样式表；<link rel="icon" href="favicon.ico"> 设置标签页小图标；<script src="main.js" defer></script> 引入脚本——defer 让脚本等文档解析完再执行，避免阻塞页面渲染。此外，分享到社交平台时显示的卡片图和标题由 Open Graph 元数据（og:title、og:image 等）控制，商业站点通常会配齐。

示例

<head>
  <!-- 编码声明永远放最前 -->
  <meta charset="UTF-8" />
  <!-- 移动端适配开关 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>HTML 教程 - 零基础系统入门 | ohmydocs</title>
  <meta name="description" content="从第一个页面到语义化与现代表单，零基础系统入门 HTML。" />

  <!-- 标签页图标与样式表 -->
  <link rel="icon" href="/favicon.ico" />
  <link rel="stylesheet" href="css/style.css" />

  <!-- 社交平台分享卡片 -->
  <meta property="og:title" content="HTML 教程 | ohmydocs" />
  <meta property="og:image" content="https://example.com/cover.png" />

  <!-- defer：等文档解析完再执行 -->
  <script src="js/main.js" defer></script>
</head>

常见坑

  • charset 写得太靠后：编码声明必须出现在文档最前面，放在大段注释或引用的后面可能失效，中文直接乱码。
  • 漏写 viewport：手机访问时页面被整体缩小、字号小得看不清，用户两指放大才能阅读——这就是没写 viewport 的典型症状。
  • 全站共用一个 title：每个页面的 title 应该独立且描述本页内容，「首页」两个字无法吸引搜索点击。
  • script 不加 defer 放在 head：脚本一加载就执行，此时 body 还没解析，操作 DOM 会拿到 null，还会阻塞渲染。要么 defer，要么把 script 挪到 body 末尾。

小结

head 的两大纪律：charset 最前、viewport 必备；title 和 description 是搜索曝光的门户；样式、图标、脚本（记得 defer）都在这里引用。下一章回到 body，学习标题与段落这两个最基础的文本元素。