跳到主要内容

HTML 头部信息

HTML 文档的 <head> 部分包含网页的元数据，虽然不会直接显示在页面上，但对网页的正确加载、显示和功能至关重要。

head 元素概述​

<head> 元素位于 <html> 和 <body> 之间，用于存放：

  • 页面标题
  • 字符编码声明
  • 视口设置
  • 外部资源链接（CSS、JavaScript）
  • 元信息
  • 网站图标
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 元数据在这里 -->
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 可见内容 -->
</body>
</html>

基础元数据​

字符编码 charset​

字符编码声明告诉浏览器使用哪种字符编码来解析页面：

<!-- 推荐：UTF-8，支持几乎所有语言字符 -->
<meta charset="UTF-8">

<!-- 旧写法，不推荐 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
为什么重要？

如果字符编码设置不正确，中文等非ASCII字符可能会显示为乱码。

视口 viewport​

视口设置控制页面在移动设备上的缩放和布局：

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

<!-- 详细设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">

viewport 属性说明：

属性说明示例值
width视口宽度device-width 或具体数值
height视口高度device-height 或具体数值
initial-scale初始缩放比例1.0
minimum-scale最小缩放比例1.0
maximum-scale最大缩放比例5.0
user-scalable是否允许用户缩放yes / no
<!-- 响应式网页必须设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

页面标题 title​

页面标题显示在浏览器标签页和搜索结果中：

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

<!-- 示例 -->
<title>JavaScript 基础教程 - 编程学习网</title>
最佳实践
  • 每个页面应有唯一的标题
  • 标题应简洁描述页面内容
  • 建议格式：「页面标题 - 网站名称」
  • 长度控制在 50-60 个字符以内

元信息 meta​

页面描述 description​

提供页面的简短描述，搜索引擎通常将其显示在搜索结果中：

<meta name="description" content="这是一个详细介绍HTML、CSS和JavaScript的编程学习网站，包含从入门到进阶的完整教程。">

<!-- 长度建议：150-160个字符 -->

效果预览（搜索引擎结果）：

HTML/CSS/JavaScript 编程教程 - 编程学习网
https://example.com
这是一个详细介绍HTML、CSS和JavaScript的编程学习网站，包含从入门到进阶的完整教程。

（在浏览器中打开搜索引擎即可看到类似效果）

关键词 keywords​

为搜索引擎提供页面关键词（现代搜索引擎已不太重视）：

<meta name="keywords" content="HTML教程, CSS教程, JavaScript教程, 编程入门, 前端开发">

作者 author​

声明页面作者：

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

robots​

控制搜索引擎爬虫的行为：

<!-- 允许所有爬虫索引和跟踪链接 -->
<meta name="robots" content="index, follow">

<!-- 禁止索引但允许跟踪链接 -->
<meta name="robots" content="noindex, follow">

<!-- 完全禁止 -->
<meta name="robots" content="noindex, nofollow">

主题颜色 theme-color​

为移动浏览器提供地址栏颜色：

<meta name="theme-color" content="#3498db">

链接外部资源​

CSS 样式表​

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

<!-- 带媒体查询的CSS -->
<link rel="stylesheet" href="print.css" media="print">

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

<!-- 引入Google字体 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

JavaScript 脚本​

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

<!-- 延迟加载（脚本在文档解析完成后执行） -->
<script src="main.js" defer></script>

<!-- 异步加载（下载完成后立即执行，可能阻塞解析） -->
<script src="analytics.js" async></script>

<!-- 推荐：defer - 按顺序执行 -->
<script src="main.js" defer></script>
defer vs async
  • defer：脚本在 HTML 解析完成后按顺序执行
  • async：脚本下载完成后立即执行，执行顺序不确定

图标 favicon​

<!-- 基本图标 -->
<link rel="icon" href="favicon.ico">

<!-- PNG图标（推荐32x32） -->
<link rel="icon" href="favicon.png" type="image/png">

<!-- Apple设备图标 -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">

<!-- Windows磁贴 -->
<meta name="msapplication-TileImage" content="tile.png">
<meta name="msapplication-TileColor" content="#3498db">

开放协议 Open Graph​

Open Graph 协议用于社交媒体分享时显示的内容：

<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/page">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="网站名称">
</head>

og:type 类型：

类型说明
website一般网页
article文章
book书籍
profile个人资料
video视频
music音乐

Twitter Cards​

Twitter 分享时显示的内容：

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

HTTP -equiv 属性​

模拟 HTTP 响应头：

<!-- 页面过期时间 -->
<meta http-equiv="expires" content="Wed, 21 Oct 2025 07:28:00 GMT">

<!-- 缓存控制 -->
<meta http-equiv="Cache-Control" content="no-cache">

<!-- 刷新/重定向 -->
<meta http-equiv="refresh" content="5;url=https://example.com">
<!-- 5秒后跳转到新页面 -->

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

完整 head 示例​

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 字符编码 -->
    <meta charset="UTF-8">
    
    <!-- 视口设置（响应式必需） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 页面标题 -->
    <title>JavaScript 教程 - 编程学习网</title>
    
    <!-- 元信息 -->
    <meta name="description" content="全面介绍JavaScript编程的教程网站，包含基础语法、DOM操作、异步编程等核心内容。">
    <meta name="keywords" content="JavaScript教程, JS入门, 前端开发, 编程学习">
    <meta name="author" content="张三">
    <meta name="robots" content="index, follow">
    
    <!-- 主题色 -->
    <meta name="theme-color" content="#f7df1e">
    
    <!-- 图标 -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    
    <!-- 预连接 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- Google字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
    
    <!-- 外部CSS -->
    <link rel="stylesheet" href="styles.css">
    
    <!-- Open Graph -->
    <meta property="og:title" content="JavaScript 教程 - 编程学习网">
    <meta property="og:description" content="全面介绍JavaScript编程的教程网站">
    <meta property="og:image" content="https://example.com/og-image.jpg">
    <meta property="og:url" content="https://example.com/javascript">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="编程学习网">
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="JavaScript 教程">
    <meta name="twitter:description" content="全面介绍JavaScript编程">
    <meta name="twitter:image" content="https://example.com/twitter-image.jpg">
    
    <!-- 样式（内部CSS） -->
    <style>
        body { font-family: 'Noto Sans SC', sans-serif; }
    </style>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

结构化数据 Schema.org​

添加结构化数据帮助搜索引擎理解页面内容：

<head>
    <!-- 文章类型 -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Article",
        "headline": "JavaScript 基础教程",
        "author": {
            "@type": "Person",
            "name": "张三"
        },
        "datePublished": "2024-01-15",
        "description": "JavaScript编程入门教程"
    }
    </script>
    
    <!-- 网站类型 -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "name": "编程学习网",
        "url": "https://example.com"
    }
    </script>
</head>

常用 head 元素速查​

元素/属性用途必需
<meta charset="UTF-8">字符编码是
<title>页面标题是
<meta name="viewport">视口设置是（响应式）
<meta name="description">页面描述推荐
<link rel="stylesheet">外部样式推荐
<link rel="icon">网站图标推荐
<meta property="og:*">Open Graph推荐（分享）

小结​

本章学习了：

  1. 基础元数据：charset、viewport、title
  2. meta 元素：description、keywords、robots、author
  3. 链接资源：CSS、JavaScript、图标
  4. Open Graph：社交媒体分享优化
  5. Twitter Cards：Twitter 分享优化
  6. 结构化数据：Schema.org JSON-LD

练习​

  1. 为你的网页添加完整的 head 信息
  2. 配置 Open Graph 元数据
  3. 添加网站图标 favicon
  4. 设置移动端视口
  5. 添加结构化数据标记