HTML头部信息位于<html>内<head>标签中，包含页面元数据。1. 基本结构包括<title>、<meta>、<link>、<style>、<script>和<base>等标签；2. 关键<meta>标签用于设置字符编码、页面描述、关键词、作者及viewport；3. <link>用于引入CSS、favicon和预加载资源；4. 正确配置可提升SEO、移动端适配与性能。示例展示了标准<head>写法，强调细节如UTF-8编码与viewport设置的重要性。
HTML 头部信息（即 head 部分）位于文档的 <html> 标签内，紧随 <head> 开始标签之后，主要用来定义页面的元数据（metadata），这些数据不会直接显示在页面上，但对浏览器、搜索引擎和用户设备至关重要。合理设置头部信息有助于提升网页的可访问性、SEO 效果和移动端适配能力。
1. 基本结构：head 标签包含的内容
<head> 标签中通常包含以下元素：
- <title>：定义网页标题，显示在浏览器标签页上，是 SEO 的关键因素。
- <meta>：用于定义字符编码、页面描述、关键词、作者等元信息。
- <link>：引入外部资源，如 CSS 样式表、网站图标（favicon）等。
- <style>：嵌入内部 CSS 样式（不推荐大量使用）。
- <script>：引用或定义 JavaScript 代码，常放在 body 底部以提高加载速度。
- <base>：定义页面中所有相对 URL 的基准地址（较少使用）。
2. 关键 meta 元标签详解
<meta> 标签是头部元数据的核心，通过不同的属性实现多种功能：
-
设置字符编码：
<meta charset="UTF-8">
确保浏览器正确解析中文、特殊符号等，必须放在 head 中靠前位置。 -
定义页面描述：
<meta name="description" content="这是网页的简要描述，影响搜索引擎摘要展示">
建议控制在 150 字以内，提升点击率。 -
设置关键词（已弱化）：
<meta name="keywords" content="HTML,教程,元数据">
现代搜索引擎基本忽略此标签，但仍可保留辅助用途。 -
指定作者和版权信息：
<meta name="author" content="张三">
<meta name="copyright" content="© 2025 公司名称"> -
控制页面响应式布局（移动端）：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
防止移动设备缩放异常，保证响应式设计正常工作。
3. 引入外部资源与优化体验
通过 <link> 可连接外部文件，增强功能和视觉效果：
立即学习“前端免费学习笔记（深入）”；
-
加载 CSS 样式表：
<link rel="stylesheet" href="styles.css"> -
设置网站图标：
<link rel="icon" href="favicon.ico" type="image/x-icon">
显示在浏览器标签、书签栏等位置。 -
预加载关键资源：
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
提升性能，优先加载重要字体或图片。
4. 实际示例：完整 HTML 头部结构
以下是一个标准且实用的 <head> 示例：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的网页标题</title> <meta name="description" content="这是一个关于 HTML 头部元数据的详细说明页面"> <meta name="author" content="李四"> <link rel="stylesheet" href="style.css"> <link rel="icon" href="favicon.ico" type="image/x-icon"> </head>
基本上就这些。只要掌握常用标签的作用和写法，就能有效组织 HTML 页面的头部信息，为网页的功能性和可发现性打下良好基础。不复杂但容易忽略细节，比如字符编码位置或 viewport 设置，务必注意。
