您现在的位置是：网站首页 > <head>-元信息容器文章详情
<head>-元信息容器
陈川
【
HTML
】
53087人已围观
4569字
<head> 是 HTML 文档中不可或缺的部分，它承载了文档的元信息，定义了文档与外部资源的关系，并为浏览器和搜索引擎提供关键数据。虽然用户不可见，但它的作用直接影响页面渲染、SEO 和功能实现。
<head> 的基本结构
<head> 标签必须位于 <html> 标签内且是 <body> 的兄弟节点。一个典型的 <head> 结构如下：
<!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="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
核心子标签及其作用
<title> - 定义文档标题
浏览器标签页显示的文本，也是搜索引擎结果中的主要标题。长度建议控制在 50-60 字符：
<title>GitHub: 全球最大的代码托管平台</title>
<meta> - 元数据定义
通过不同属性组合实现多种功能：
字符编码声明
必须放在 <head> 的最前面：
<meta charset="UTF-8">
视口控制
响应式设计的核心配置：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
SEO 相关元数据
<meta name="description" content="免费在线学习编程的网站">
<meta name="keywords" content="编程,HTML,CSS,JavaScript">
<meta name="author" content="李华">
HTTP 等效头
模拟 HTTP 头部的行为：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="refresh" content="30;url=https://example.com">
<link> - 资源关联
最常见的用途是引入 CSS 文件：
<link rel="stylesheet" href="print.css" media="print">
<link rel="icon" href="favicon.ico" type="image/x-icon">
支持多种关系类型：
preload：提前加载关键资源preconnect：预先建立连接dns-prefetch：DNS 预解析
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<style> - 内联样式
直接在文档中嵌入 CSS：
<style>
body {
margin: 0;
font-family: system-ui;
}
@media (prefers-color-scheme: dark) {
body { background: #333; color: white; }
}
</style>
<script> - 脚本控制
虽然通常放在 <body> 末尾，但某些情况需要在 <head> 中声明：
<script>
window.ga = window.ga || function(){(ga.q=ga.q||[]).push(arguments)};
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
使用 defer 或 async 控制加载行为：
<script src="analytics.js" defer></script>
<script src="interactive.js" async></script>
<base> - 基准 URL
设置所有相对 URL 的基准地址（慎用，可能破坏页面链接）：
<base href="https://example.com/assets/" target="_blank">
高级应用场景
移动端特定配置
<!-- 禁止电话号码自动识别 -->
<meta name="format-detection" content="telephone=no">
<!-- 禁止邮箱地址自动识别 -->
<meta name="format-detection" content="email=no">
<!-- iOS Safari 配置 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
社交媒体元数据
Open Graph 协议示例：
<meta property="og:title" content="页面标题">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="页面描述">
Twitter Cards 配置：
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
主题颜色控制
<!-- 浏览器地址栏颜色 -->
<meta name="theme-color" content="#4285f4" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
<!-- Windows 磁贴颜色 -->
<meta name="msapplication-TileColor" content="#2b5797">
性能优化技巧
资源预加载
<!-- 关键字体预加载 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<!-- 关键图片预加载 -->
<link rel="preload" href="hero-image.webp" as="image" type="image/webp">
缓存控制
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
特殊场景处理
多页面应用的基础路径
<base href="/app/">
语言标注
<html lang="zh-Hans">
<head>
<meta http-equiv="Content-Language" content="zh-cn">
</head>
安全相关
<!-- 禁止内容嗅探 -->
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<!-- 禁止 iframe 嵌套 -->
<meta http-equiv="X-Frame-Options" content="DENY">
<!-- CSP 策略 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
验证工具与调试
使用 W3C 验证器检查 <head> 完整性：
<link rel="canonical" href="https://example.com/page">
查看实际生效的元数据：
console.log(document.head.innerHTML);
浏览器兼容性注意事项
IE 特有标签：
<meta name="application-name" content="My App">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
条件注释（已废弃但需了解）：
<!--[if IE]>
<link rel="stylesheet" href="ie.css">
<![endif]-->
上一篇： <title>-文档标题
下一篇： <wbr>-可选换行点
