前言
当你新建一个 HTML 文件时，编辑器通常会自动生成这样的结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>这几行代码里的<head>标签，很多人直接跳过，觉得“不就是放标题和样式的地方吗？”——实际上，<head> 是网页的“大脑”，它决定了页面如何被浏览器解析、被搜索引擎收录、被社交网络分享、被移动设备适配，甚至影响加载速度和安全性。
在这篇教程中，我会带你从头到尾理解<head>中可以放置的所有内容，从最基础的元数据到高级的性能优化和安全策略。每一部分都配有可直接运行的代码示例，你可以复制到自己的项目里试验。
一、HTML5 头部的基础结构
<head>位于<html>标签内，<body>之前。它的使命是描述文档的属性，而不是展示内容。所有写在<head>里的东西，用户通常不会在网页上直接看到，但它们至关重要。
一个最小的、符合现代标准的<head>长这样：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>这三行是目前网页开发的“黄金三件套”，后面会详细解释。
二、核心元数据：给浏览器和搜索引擎的“身份证”
2.1 <title> – 页面的名字
<title>是必须的，它定义浏览器标签页上显示的文字，也是搜索引擎结果中点击的标题。
<title>Hitoofm - HTML5 教程</title>– 长度建议 30~60 个字符，过长会被截断。
– 应该准确概括页面内容，不要堆砌关键词。
2.2 <meta charset> – 字符编码
告诉浏览器用什么编码来解读你的 HTML 文件。这里建议永远使用 UTF-8，它支持几乎所有语言和 Emoji。
<meta charset="UTF-8">⚠️这一行必须放在<head>的最前面（在<title>之前），否则浏览器可能误读非英文字符，导致乱码。
2.3 <meta name=”viewport”> – 移动端适配
没有这个标签，手机浏览器会按照 980px 宽度渲染页面，文字会变得非常小。加上它，页面才能响应式缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">– width=device-width：页面宽度等于设备的屏幕宽度
– initial-scale=1.0：初始缩放比例为 1（不放大也不缩小）
– 可选参数：maximum-scale, user-scalable（不建议禁用缩放，会影响无障碍访问）
2.4 <base> – 相对路径的根地址
如果你的页面中所有相对链接都想指向同一个基础 URL，可以用<base>。
<base href="https://hitoofm.com/images/" target="_blank">之后如何请求<img src="logo.png">实际会请求https://hitoofm.com/images/logo.png，并且所有链接默认在新标签页打开。
> 注意：<base>一旦设置，全局生效，可能引起意料之外的路径问题，谨慎使用。
三、描述性元标签（SEO 必备）
搜索引擎通过<meta name="...">来了解你的网页。虽然有些标签的权重降低了，但依然推荐写上。
3.1 页面描述（description）
<meta name="description" content="一篇由hitoofm团队编写的详细介绍 HTML5 头部标签的教程，包含元数据、资源加载、SEO 优化和安全策略。">搜索引擎经常把这段文字显示在结果标题下方。字数建议 120~160 个字符。
3.2 关键词（keywords）
<meta name="keywords" content="HTML, head, meta, SEO, 教程">过去很重要，现在大多数搜索引擎（包括 Google）已忽略，但写一下也无害。
3.3 作者与版权
<meta name="author" content="hitoofm团队">
<meta name="copyright" content="hitoofm">3.4 爬虫控制（robots）
告诉搜索引擎哪些页面可以抓取、哪些链接可以跟踪。
<meta name="robots" content="index, follow">常用值：
– index/noindex – 是否收录该页面
– follow/nofollow – 是否跟踪页面上的链接
– noarchive – 不显示“网页快照”
3.5 引用来源控制（referrer）
控制从你的页面发出请求时，是否携带来源地址（Referer）。
<meta name="referrer" content="strict-origin-when-cross-origin">常用值：
– no-referrer – 完全不发送
– origin – 只发送域名（不含路径）
– strict-origin-when-cross-origin – 同源发送完整 URL，跨域只发送域名（推荐）
3.6 移动端主题色（theme-color）
改变浏览器地址栏/状态栏的背景色（Chrome、Safari、Firefox 等支持）。
<meta name="theme-color" content="#4285f4">四、HTTP 等效元数据（http-equiv）
这些标签模拟 HTTP 响应头的行为，在 HTML 内部控制浏览器行为。
4.1 刷新与跳转
<meta http-equiv="refresh" content="5; url=https://hitoofm.com">5 秒后自动跳转到https://hitoofm.com。如果省略url，则仅刷新当前页。谨慎使用，滥用会被搜索引擎惩罚，而且用户体验差。
4.2 强制 IE 使用最新引擎（x-ua-compatible）
<meta http-equiv="x-ua-compatible" content="IE=edge">让 IE 浏览器用最高版本的内核渲染页面，避免进入“兼容模式”。
4.3 内容安全策略（Content-Security-Policy）
防止 XSS 攻击，限制页面可以加载哪些来源的资源。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.cdn.com">上面例子表示：只允许加载同源资源，脚本只能从同源或trusted.cdn.com加载。这是现代 Web 安全的重要防线。
> 注意：如果服务器已经发送了 CSP 响应头，那么这个<meta>会被忽略。
五、链接资源（<link>）：样式、图标、预加载
<link>是<head>中最强大的元素之一，负责引入外部资源。
5.1 外部 CSS 样式表
<link rel="stylesheet" href="/css/main.css">5.2 网站图标（favicon）
<!-- 传统 ico 格式 -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- 现代推荐（支持多尺寸） -->
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<!-- Apple Touch Icon（iOS 主屏幕图标） -->
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">5.3 预加载（preload）– 提升性能
告诉浏览器：这个资源很重要，现在就去下载，不要等到解析到相关标签时再下载。
<link rel="preload" href="/fonts/OpenSans.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/images/hero.jpg" as="image">
<link rel="preload" href="/js/app.js" as="script">5.4 预连接（preconnect）– 提前建立连接
提前与第三方域名建立 TCP+TLS 连接，减少后续请求延迟。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://analytics.google.com" crossorigin>5.5 DNS 预解析（dns-prefetch）
比 preconnect 更轻量，只做 DNS 查询。
<link rel="dns-prefetch" href="//api.example.com">5.6 规范网址（canonical）
告诉搜索引擎：这个页面的标准 URL 是什么，避免重复内容问题。
<link rel="canonical" href="https://www.hitoofm.com/products/phone">5.7 资源清单（manifest）– PWA 必备
<link rel="manifest" href="/site.webmanifest">配合 JSON 文件，让网站可以像原生应用一样被安装到手机桌面。
5.8 RSS/Atom 订阅
<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml">六、内嵌样式与脚本
6.1 <style> – 内嵌 CSS
适合首页首屏关键样式（Critical CSS），避免外部样式阻塞渲染。
<style>
body { margin: 0; background: #f5f5f5; }
.header { background: #fff; padding: 1rem; }
</style>6.2 <script> – JavaScript
放在<head>中的脚本会阻塞 HTML 解析，直到脚本下载并执行完毕。为了不影响首屏速度，推荐使用defer或async。
<!-- 延迟执行，等 DOM 解析完再执行，按顺序执行 -->
<script src="main.js" defer></script>
<!-- 异步下载，下载完立即执行，不保证顺序 -->
<script src="analytics.js" async></script>
<!-- 内嵌脚本，放在底部 body 之前更好，但也可用 defer -->
<script defer>
console.log('DOM 解析完成后执行');
</script>> 小技巧：一般把不依赖 DOM 的第三方统计脚本用async，依赖 DOM 的业务逻辑用defer，并且把脚本放在<head>中可以更早开始下载。
七、其他头部元素
7.1 <noscript>
当用户浏览器禁用了 JavaScript 时，显示备选内容。
<noscript>
<div class="alert">您的浏览器未启用 JavaScript，部分功能无法使用。</div>
</noscript>7.2 <template>
虽然通常放在<body>里，但在技术上可以放在<head>中，用于声明一个不会被渲染的 HTML 片段，留待后续用 JavaScript 实例化。
<template id="card-template">
<div class="card">
<h3></h3>
<p></p>
</div>
</template>7.3 注释与条件注释（已废弃）
老 IE 支持的条件注释已经废除，不要在 HTML5 中使用了。
八、综合实战：构建一个现代化的头部
下面是一个真实项目中可能会用到的完整<head>，融合了 SEO、性能、安全和移动端最佳实践。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 基础必备 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Hitoofm教程 | HTML5 头部完全指南</title>
<!-- SEO 相关 -->
<meta name="description" content="全面解析 HTML5 文档头部的所有标签，从基础元数据到高级性能优化，附带完整示例。">
<meta name="keywords" content="HTML5, head标签, meta, SEO, 前端优化">
<meta name="author" content="hitoofm">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://www.hitoogm.com/tutorials/html5-head">
<!-- 移动端与外观 -->
<meta name="theme-color" content="#0a3d62">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 图标 -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- 样式表 -->
<link rel="stylesheet" href="/css/main.css">
<!-- 关键内嵌样式（首屏优化） -->
<style>
/* 关键 CSS 放在这里，其余写在外部样式表 */
body { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.loading-indicator { ... }
</style>
<!-- 性能预加载 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://analytics.google.com" crossorigin>
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/images/hero-banner.webp" as="image" fetchpriority="high">
<!-- PWA 清单 -->
<link rel="manifest" href="/site.webmanifest">
<!-- 安全策略（CSP） -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://www.googletagmanager.com; style-src 'self' 'unsafe-inline'; font-src 'self' https://fonts.gstatic.com;">
<!-- 脚本（异步加载） -->
<script src="/js/analytics.js" async></script>
<script src="/js/main.js" defer></script>
<!-- 降级方案 -->
<noscript>
<style>.no-js-show { display: block; }</style>
</noscript>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>希望这篇教程能帮你彻底掌握 HTML5 头部的每一个角落。现在你可以打开你的项目，看看<head>里还能加入哪些新东西了。
暂无评论内容