PHP小码农

Appearance

head 元素 ​

<head> 元素是 HTML 文档的头部容器，用于存放文档的元信息、样式、脚本引用等不会直接显示在页面上的内容。它是连接文档信息与浏览器、搜索引擎之间的重要桥梁。

前置知识

阅读本节前，建议先了解：html 根元素

基础概念 ​

head 的作用 ​

<head> 元素包含关于文档的元信息（metadata），这些信息不会直接呈现在页面内容中，但对浏览器的行为、搜索引擎的理解、社交媒体的展示等方面起着至关重要的作用。

可以将 <head> 理解为文档的"身份证"和"配置文件"，它告诉浏览器和外部系统如何处理这个页面。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 所有元信息都在这里 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
  <link rel="stylesheet" href="style.css">
  <script src="app.js" defer></script>
</head>
<body>
  <!-- 用户可见的内容 -->
</body>
</html>

head 与 body 的区别 ​

特性<head><body>
内容类型元信息、资源引用用户可见的页面内容
是否可见不可见（meta、title 除外）可见
子元素类型title、meta、link、style、script、base、noscript语义化标签、文本、媒体等
作用范围全局（影响整个文档）具体内容区域

语法 ​

基本语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- head 内的子元素 -->
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

head 可包含的子元素清单 ​

<head> 元素可以包含以下七种子元素：

元素作用数量限制
<title>设置页面标题必须且只能有一个
<meta>定义元信息可有多个
<link>引入外部资源（CSS、图标等）可有多个
<style>定义内联 CSS 样式可有多个
<script>定义或引入 JavaScript可有多个
<base>设置基准 URL最多一个
<noscript>JS 禁用时的替代内容可有多个

详细说明 ​

子元素出现顺序规范 ​

虽然 HTML 规范对 <head> 内子元素的顺序要求较为宽松，但遵循推荐的顺序有助于代码可读性和维护性。

推荐顺序 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 1. 字符编码（应尽早声明） -->
  <meta charset="UTF-8">

  <!-- 2. 视口设置 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 3. 其他 meta 标签 -->
  <meta name="description" content="页面描述">
  <meta name="author" content="作者">
  <meta name="theme-color" content="#0066cc">

  <!-- 4. Open Graph 等第三方 meta -->
  <meta property="og:title" content="页面标题">
  <meta property="og:description" content="页面描述">
  <meta property="og:image" content="https://example.com/image.jpg">

  <!-- 5. title 标题 -->
  <title>页面标题</title>

  <!-- 6. base 基准 URL（如有） -->
  <base href="https://example.com/">

  <!-- 7. 外部 CSS 样式表 -->
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/print.css" media="print">

  <!-- 8. 预加载/预连接等资源提示 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

  <!-- 9. 内联 style 样式 -->
  <style>
    /* 关键 CSS */
  </style>

  <!-- 10. 外部 JavaScript -->
  <script src="js/app.js" defer></script>

  <!-- 11. noscript 降级内容 -->
  <noscript>
    <p>请启用 JavaScript 以获得最佳体验。</p>
  </noscript>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

顺序原则说明 ​

优先级元素类型原因
最高charset编码声明必须在文件前 1024 字节内
高viewport影响移动端渲染，需尽早加载
高description 等核心 metaSEO 相关，影响搜索引擎抓取
中titleSEO 和用户标签页显示
中base影响后续相对 URL 的解析
中CSS link样式应尽早加载以避免闪烁
中预加载提示提前建立连接或加载关键资源
低style 内联样式通常用于覆盖或补充外部样式
低script（defer/async）异步脚本不阻塞渲染
最低noscript仅在 JS 禁用时使用

各子元素概述 ​

1. title 元素 ​

html
<title>页面标题 - 网站名称</title>
  • <title> 是 <head> 中唯一必须的子元素
  • 显示在浏览器标签页、搜索引擎结果、书签中
  • 长度建议：60 个字符以内（搜索引擎通常截断过长的标题）

2. meta 元素 ​

html
<!-- 字符编码 -->
<meta charset="UTF-8">

<!-- 视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 描述 -->
<meta name="description" content="这是页面描述">

<!-- 兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 主题色 -->
<meta name="theme-color" content="#0066cc">

<meta> 是 <head> 中最灵活的元素，将在后续章节详细讲解。

3. link 元素 ​

html
<!-- 引入外部 CSS -->
<link rel="stylesheet" href="style.css">

<!-- 引入 favicon -->
<link rel="icon" href="favicon.ico">

<!-- 预连接 -->
<link rel="preconnect" href="https://fonts.googleapis.com">

4. style 元素 ​

html
<style>
  /* 内联 CSS 样式 */
  body {
    font-family: system-ui, sans-serif;
    margin: 0;
    padding: 20px;
  }
</style>

5. script 元素 ​

html
<!-- 外部脚本（推荐 defer） -->
<script src="app.js" defer></script>

<!-- 内联脚本 -->
<script>
  // JavaScript 代码
  console.log('Hello, World!');
</script>

6. base 元素 ​

html
<!-- 设置基准 URL 和默认打开方式 -->
<base href="https://example.com/app/">
<base target="_blank">

7. noscript 元素 ​

html
<noscript>
  <p>您的浏览器已禁用 JavaScript。</p>
  <p>请启用 JavaScript 以使用本网站的全部功能。</p>
</noscript>

head 元素可以省略吗 ​

根据 HTML 规范，<head> 的开始标签和结束标签在某些条件下可以省略。但强烈不推荐省略，原因如下：

html
<!-- 浏览器会自动推断 head 的范围，但不推荐省略 -->
<!DOCTYPE html>
<html lang="zh-CN">
<meta charset="UTF-8">
<title>省略 head 标签</title>
<body>
  <p>虽然可以工作，但不推荐。</p>
</body>
</html>

不推荐省略的原因：

  1. 代码意图不明确
  2. 可能导致解析歧义
  3. 团队协作中容易引起混淆
  4. 不利于代码审查和维护

实战示例 ​

一个完整的 head 配置 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- ===== 字符编码 ===== -->
  <meta charset="UTF-8">

  <!-- ===== 视口设置 ===== -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ===== 页面信息 meta ===== -->
  <meta name="description" content="一个关于 HTML 文档结构的完整教程，涵盖 head 元素的所有子元素。">
  <meta name="author" content="前端教程团队">
  <meta name="keywords" content="HTML, head, 教程, 前端">
  <meta name="robots" content="index, follow">
  <meta name="theme-color" content="#0066cc">

  <!-- ===== Open Graph（社交媒体分享） ===== -->
  <meta property="og:type" content="article">
  <meta property="og:title" content="head 元素详解 - HTML 教程">
  <meta property="og:description" content="学习 HTML head 元素的所有知识。">
  <meta property="og:image" content="https://example.com/images/og-image.png">
  <meta property="og:url" content="https://example.com/html/head-element">
  <meta property="og:site_name" content="HTML 教程">

  <!-- ===== Twitter Card ===== -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="head 元素详解">
  <meta name="twitter:description" content="学习 HTML head 元素的所有知识。">
  <meta name="twitter:image" content="https://example.com/images/twitter-card.png">

  <!-- ===== 页面标题 ===== -->
  <title>head 元素详解 - HTML 教程</title>

  <!-- ===== Favicon ===== -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">

  <!-- ===== 预连接（性能优化） ===== -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="dns-prefetch" href="https://cdn.example.com">

  <!-- ===== 外部 CSS ===== -->
  <link rel="stylesheet" href="/css/style.css">

  <!-- ===== 关键 CSS 内联（性能优化） ===== -->
  <style>
    /* 首屏关键样式，减少渲染阻塞 */
    body { margin: 0; font-family: system-ui, sans-serif; }
    .loading { display: flex; align-items: center; justify-content: center; height: 100vh; }
  </style>

  <!-- ===== 外部 JavaScript（defer 加载） ===== -->
  <script src="/js/app.js" defer></script>

  <!-- ===== Google Analytics ===== -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>

  <!-- ===== noscript 降级 ===== -->
  <noscript>
    <style>.no-js { display: none; }</style>
    <p style="text-align:center; padding: 20px;">
      请启用 JavaScript 以获得最佳浏览体验。
    </p>
  </noscript>
</head>
<body>
  <h1>head 元素详解</h1>
  <p>这是一个包含完整 head 配置的页面示例。</p>
</body>
</html>

使用 JavaScript 操作 head ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>操作 head</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 700px;
      margin: 40px auto;
      padding: 0 20px;
    }
    .output {
      background: #f5f5f5;
      padding: 15px;
      border-radius: 4px;
      font-family: monospace;
      white-space: pre-line;
      margin: 10px 0;
    }
    button {
      padding: 8px 16px;
      margin: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>JavaScript 操作 head</h1>
  <div>
    <button id="btn-count">统计 head 子元素</button>
    <button id="btn-meta">添加 meta 标签</button>
    <button id="btn-title">修改标题</button>
  </div>
  <div id="output" class="output"></div>

  <script>
    var output = document.getElementById('output');

    // 获取 head 元素
    var head = document.head;

    // 统计 head 子元素
    document.getElementById('btn-count').addEventListener('click', function() {
      var children = head.children;
      var result = 'head 子元素数量: ' + children.length + '\n\n';
      for (var i = 0; i < children.length; i++) {
        result += i + 1 + '. <' + children[i].tagName.toLowerCase() + '>';
        // 显示 title 内容
        if (children[i].tagName === 'TITLE') {
          result += ' → ' + children[i].textContent;
        }
        result += '\n';
      }
      output.textContent = result;
    });

    // 动态添加 meta 标签
    document.getElementById('btn-meta').addEventListener('click', function() {
      var meta = document.createElement('meta');
      meta.name = 'description';
      meta.content = '这是动态添加的描述';
      head.appendChild(meta);
      output.textContent = '已添加 meta description 标签。';
    });

    // 动态修改标题
    document.getElementById('btn-title').addEventListener('click', function() {
      document.title = '新标题 - ' + new Date().toLocaleTimeString();
      output.textContent = '标题已修改为: ' + document.title;
    });
  </script>
</body>
</html>

注意事项 ​

1. head 中不应放置可见内容 ​

html
<!-- 错误！head 中不应放置可见内容 -->
<head>
  <h1>这是标题</h1>  <!-- 不应在 head 中 -->
  <p>这是段落</p>     <!-- 不应在 head 中 -->
</head>

<!-- 浏览器会自动将 head 中的可见元素移到 body 中 -->

2. script 在 head 中的位置 ​

在 <head> 中放置 <script> 时要注意加载策略：

html
<!-- 不推荐：阻塞渲染的同步脚本 -->
<head>
  <script src="large-script.js"></script>
</head>

<!-- 推荐：使用 defer -->
<head>
  <script src="large-script.js" defer></script>
</head>

<!-- 推荐：使用 async -->
<head>
  <script src="analytics.js" async></script>
</head>

3. style 标签的数量 ​

虽然可以在 <head> 中放置多个 <style> 标签，但建议合并为一个或少数几个，以减少 HTTP 请求和 DOM 节点数。

4. title 不能为空 ​

html
<!-- 错误！title 不能为空 -->
<title></title>

<!-- 不推荐！无意义的标题 -->
<title>Untitled</title>
<title>无标题</title>

<!-- 推荐 -->
<title>页面标题 - 网站名称</title>

最佳实践 ​

1. 使用 HTML 模板 ​

为项目创建统一的 head 模板，确保每个页面都包含必要的 meta 标签。

2. 字符编码放在最前面 ​

<meta charset="UTF-8"> 应该是 <head> 中的第一个元素（紧随 <head> 开始标签之后），确保在文件的前 1024 字节内。

3. 关键 CSS 内联 ​

对于首屏渲染关键的 CSS，可以内联到 <style> 中，减少额外的网络请求。

4. 使用资源提示 ​

利用 <link rel="preconnect">、<link rel="preload"> 等资源提示优化加载性能。

5. 保持 head 简洁 ​

只包含必要的 meta 和资源引用，避免 <head> 过于臃肿。

下一节

继续学习：body 元素

参考链接 ​