HTML 头部标签 - <head>

什么是 <head> 标签？

<head> 标签包含HTML文档的元数据（metadata），这些信息不会直接显示在页面上，但对浏览器和搜索引擎非常重要。它位于 <html> 标签内，<body> 标签之前。

基本语法

html 
<html lang="zh-CN">
<head>
  <!-- 元数据内容 -->
</head>
<body>
  <!-- 可见内容 -->
</body>
</html>

常见子元素

<title>

定义文档的标题，显示在浏览器标签页上，是SEO的重要因素。

示例：

html 
<title>我的网站 - 首页</title>

<meta>

定义各种元数据，如字符集、视口设置、关键词等。

常见用途：

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

<!-- 视口设置（移动端适配） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 网页描述（SEO） -->
<meta name="description" content="这是一个关于HTML学习的网站">

<!-- 关键词（SEO） -->
<meta name="keywords" content="HTML, 前端, 学习">

<link>

用于链接外部资源，如CSS样式表、图标等。

常见用途：

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

<!-- 网站图标 -->
<link rel="icon" href="favicon.ico" type="image/x-icon">

<!-- 预加载资源 -->
<link rel="preload" href="critical.css" as="style">

<style>

用于嵌入CSS样式。

示例：

html 
<style>
  body {
    font-family: Arial, sans-serif;
    color: #333;
  }
</style>

<script>

用于嵌入或链接JavaScript代码。

示例：

html 
<!-- 内部脚本 -->
<script>
  console.log('Hello, World!');
</script>

<!-- 外部脚本 -->
<script src="script.js"></script>

<base>

定义页面中所有相对URL的基础URL。

示例：

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

最佳实践

  1. 始终包含字符集声明：确保文档以正确的字符编码显示

  2. 设置视口元标签：使网页在移动设备上正常显示

  3. 提供有意义的页面标题：有助于用户和搜索引擎理解页面内容

  4. 使用适当的元描述：提高搜索引擎结果的点击率

  5. 合理组织资源加载：优先加载关键资源，非关键资源延迟加载

完整示例

html 
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="HTML头部标签学习指南">
  <meta name="keywords" content="HTML, head, meta, title">
  <title>HTML Head标签学习</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico">
  <style>
    /* 内联样式 */
  </style>
  <script src="script.js"></script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

总结

<head> 标签是HTML文档的重要组成部分，它包含了浏览器和搜索引擎需要的关键信息。正确使用 <head> 标签及其子元素对于创建功能完整、SEO友好的网页至关重要。

最后更新：2026-02-06