HTML的head标签位于html标签内部、body标签之前，是网页头部信息的容器，所有不会直接显示在页面可视区域的内容都可以放在这里。合理的head标签配置能让页面更好地适配不同设备，也能让搜索引擎更准确地识别页面内容。
head标签的核心作用
head标签内的内容不会直接渲染到页面中，却对页面的运行和展示有重要影响，主要作用包括：
- 声明文档的字符编码，避免页面出现乱码
- 设置移动端视口参数，保证页面在不同尺寸设备上正常显示
- 配置页面元数据，帮助搜索引擎抓取和理解页面内容
- 引入外部样式文件、脚本文件，定义页面内联样式和脚本
- 设置页面标题、图标，优化页面在浏览器标签页和社交分享场景的展示效果
head标签内的常用元素
title标签
title标签用于定义页面的标题，内容会显示在浏览器的标签页上，也是搜索引擎结果中展示的页面标题，每个页面都应该有唯一的title内容。
<head> <title>HTML头部标签详解</title> </head>
meta标签
meta标签用于提供页面的元信息，常见的设置场景有以下几种：
字符编码声明
通过charset属性指定文档的字符编码，一般设置为UTF-8，避免中文等内容出现乱码。
<meta charset="UTF-8">
视口设置
移动端页面必须设置viewport元信息，控制页面的缩放和布局宽度，保证页面在移动设备上正常适配。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
搜索引擎相关设置
可以设置页面关键词、描述信息，帮助搜索引擎识别页面内容，同时也可以通过robots属性控制搜索引擎的抓取规则。
<meta name="keywords" content="HTML,head标签,元信息设置"> <meta name="description" content="本文详细讲解HTML head标签内的元信息设置方法和常用元素"> <meta name="robots" content="index,follow">
兼容IE设置
针对IE浏览器，可以设置使用最新内核渲染页面，避免老旧内核带来的兼容性问题。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
link标签
link标签主要用于引入外部资源，常见用途包括引入CSS样式表、设置页面图标等。
<!-- 引入外部CSS文件 --> <link rel="stylesheet" href="style.css"> <!-- 设置页面标签页图标 --> <link rel="icon" href="favicon.ico" type="image/x-icon">
style标签
style标签用于定义页面的内联样式，内容会直接作用于当前页面，适合存放少量仅当前页面使用的样式。
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
</style>
script标签
script标签用于引入或定义JavaScript脚本，可以放在head标签内，也可以放在body标签底部，一般建议非必要的脚本放在body末尾避免阻塞页面渲染。
<script>
console.log("head内的脚本执行");
</script>
<script src="main.js"></script>
head标签配置示例
一个规范的通用页面head配置可以参考以下示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="HTML,head标签,元信息设置">
<meta name="description" content="本文详细讲解HTML head标签内的元信息设置方法和常用元素">
<title>HTML头部标签详解</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<style>
.header {
font-size: 20px;
color: #333;
}
</style>
</head>
<body>
<div class="header">页面内容</div>
</body>
</html>
常见配置注意事项
- charset属性必须放在meta标签的最前面，保证浏览器优先识别编码
- viewport设置中不要禁用用户缩放，除非有特殊业务需求，避免影响无障碍访问
- title内容要简洁明确，长度建议控制在30个汉字以内，避免搜索引擎截断
- 引入的外部资源路径要正确，避免出现404错误影响页面加载
- 不要在head标签内放置会直接渲染的内容，比如<div>、<p>等标签