您现在的位置是：网站首页 > <head>-文档头部容器文章详情

<head>-文档头部容器

陈川【 HTML 】 38537人已围观 6281字

<head> 标签是 HTML 文档的头部容器，用于存放元数据、引用的外部资源以及文档的配置信息。它不会直接显示在页面中，但定义了文档与浏览器、搜索引擎之间的关系。

`<head>` 标签的基本结构

<head> 标签必须作为 <html> 的直接子元素出现，且位于 <body> 标签之前。一个典型的 HTML 文档结构如下：

<!DOCTYPE html>
<html>
  <head>
    <!-- 元数据和资源引用放在这里 -->
  </head>
  <body>
    <!-- 页面内容放在这里 -->
  </body>
</html>

`<head>` 标签内的常见子元素

`<title>` 标签

<title> 标签定义了文档的标题，显示在浏览器的标题栏或标签页上。它是 SEO 和用户体验的重要元素。

<head>
  <title>我的第一个网页</title>
</head>

`<meta>` 标签

<meta> 标签提供了关于 HTML 文档的元数据。常见的 meta 标签包括：

字符编码声明：

<meta charset="UTF-8">

视口设置（针对移动设备优化）：

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

页面描述：

<meta name="description" content="这是一个关于HTML学习的网站">

关键词（对SEO的影响已减弱）：

<meta name="keywords" content="HTML, CSS, JavaScript">

作者信息：

<meta name="author" content="张三">

`<link>` 标签

<link> 标签用于链接外部资源，最常见的是链接CSS样式表：

<link rel="stylesheet" href="styles.css">

其他用途包括：

链接网站图标：

<link rel="icon" href="favicon.ico" type="image/x-icon">

预加载资源：

<link rel="preload" href="important.js" as="script">

`<style>` 标签

<style> 标签用于在文档内部嵌入CSS样式：

<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
</style>

`<script>` 标签

虽然<script>通常放在<body>底部，但有时也会出现在<head>中。使用async或defer属性可以控制脚本加载行为：

<script src="app.js" defer></script>

`<base>` 标签

<base> 标签指定了页面中所有相对URL的基准URL：

<base href="https://example.com/" target="_blank">

高级用法和最佳实践

多语言支持

通过lang属性和hreflang链接，可以支持多语言网站：

<head>
  <meta http-equiv="Content-Language" content="zh-CN">
  <link rel="alternate" hreflang="en" href="https://example.com/en/">
</head>

社交媒体元数据

为社交媒体分享优化：

<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/">
<meta name="twitter:card" content="summary_large_image">

性能优化技巧

预连接重要第三方域名：

<link rel="preconnect" href="https://fonts.googleapis.com">

预加载关键资源：

<link rel="preload" href="critical.css" as="style">

使用资源提示：

<link rel="dns-prefetch" href="//cdn.example.com">

实际应用示例

一个完整的<head>部分可能如下所示：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="专业的网页设计服务">
  <meta name="keywords" content="网页设计, UI设计, 前端开发">
  <meta name="author" content="李四设计工作室">
  
  <title>李四设计 - 专业网页设计服务</title>
  
  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://lisi-design.com/">
  <meta property="og:title" content="李四设计 - 专业网页设计服务">
  <meta property="og:description" content="我们提供专业的网页设计和开发服务">
  <meta property="og:image" content="https://lisi-design.com/images/social-preview.jpg">
  
  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="https://lisi-design.com/">
  <meta property="twitter:title" content="李四设计 - 专业网页设计服务">
  <meta property="twitter:description" content="我们提供专业的网页设计和开发服务">
  <meta property="twitter:image" content="https://lisi-design.com/images/social-preview.jpg">
  
  <!-- 图标 -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  
  <!-- CSS -->
  <link rel="stylesheet" href="/css/main.css">
  <link rel="stylesheet" href="/css/responsive.css" media="screen and (max-width: 768px)">
  
  <!-- 预加载 -->
  <link rel="preload" href="/fonts/custom.woff2" as="font" type="font/woff2" crossorigin>
  
  <!-- 预连接 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  
  <!-- 基础URL -->
  <base href="https://lisi-design.com/">
</head>

`<head>` 中的其他有用元素

`<noscript>` 标签

为禁用JavaScript的用户提供备用内容：

<noscript>
  <style>
    .js-only { display: none !important; }
  </style>
  <p>您的浏览器禁用了JavaScript，某些功能可能无法正常使用。</p>
</noscript>

条件注释（针对旧版IE）

虽然现代开发中已很少使用，但在维护旧系统时可能遇到：

<!--[if IE 9]>
  <link rel="stylesheet" href="ie9.css">
<![endif]-->

主题颜色

为浏览器地址栏设置主题颜色：

<meta name="theme-color" content="#4285f4">

移动端特有的`<head>`配置

Web App配置

<!-- 添加到主屏幕时隐藏浏览器UI -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 状态栏样式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 启动画面 -->
<link rel="apple-touch-startup-image" href="/launch.png">

防止电话号码自动识别

<meta name="format-detection" content="telephone=no">

SEO优化相关元素

规范链接

防止重复内容问题：

<link rel="canonical" href="https://example.com/preferred-url">

结构化数据

虽然通常放在<body>中，但也可以通过<link>引用：

<link rel="alternate" type="application/ld+json" href="https://example.com/data.json">

安全相关的`<head>`配置

CSP (内容安全策略)

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.cdn.com">

X-UA-Compatible

确保IE使用最新渲染引擎：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Referrer策略

控制Referrer信息的发送：

<meta name="referrer" content="no-referrer-when-downgrade">

现代Web应用的`<head>`配置

Web Manifest

PWA应用清单：

<link rel="manifest" href="/manifest.webmanifest">

主题颜色

<meta name="theme-color" content="#ffffff">

颜色方案

支持深色/浅色模式：

<meta name="color-scheme" content="light dark">

`<head>` 中的动态内容

虽然<head>通常包含静态内容，但也可以通过JavaScript动态修改：

// 动态修改页面标题
document.title = "新标题 - " + originalTitle;

// 添加新的meta标签
const meta = document.createElement('meta');
meta.name = "description";
meta.content = "动态生成的描述";
document.head.appendChild(meta);