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