你好，我是云桃桃。
HTML <head> 标签用于定义文档的头部，包含了一些元数据和引用的外部资源，但并不会直接展示在页面上。<head> 标签位于 <html> 标签内部，紧跟在 <html> 开始标签之后，在 <body> 开始标签之前。
这些 <head> 标签中的内容对于页面的显示、搜索引擎优化和性能都非常重要，它们提供了页面的结构和行为的关键信息。
head 中的常见形式
在 <head> 中包含的内容，常见的包括以下 8 种，以下是 <head> 标签常见的内容及其作用，以及相应的案例示例：
1、文档标题（Title）： 定义了网页的标题，显示在浏览器的标题栏或标签页上，也是搜索引擎结果的主要标题。
<title>Document Title</title>
注意确保标题清晰、简洁、具有描述性，一方面有助于开发协作者理解，一方面也有助于用户和搜索引擎理解页面内容。当然，涉及网站流量优化时，也可以结合网站优化的同事共同探讨。避免使用过长或不相关的标题。
2、字符编码声明（Charset）： 用于指定页面的字符编码方式，告诉浏览器如何解析页面中的字符，现在我们最常用的就是UTF-8。
<meta charset="UTF-8" />
这个元标签指定了文档的字符编码为 UTF-8。这个是必须设置的，只声明一次即可，确保众多浏览器正确解析和显示文档中的字符。它通常有 2 种写法：
GBK：GBK（Guojia Biaozhun Kuozhan）只是用于表示中文字符集，包括简体中文、繁体中文和一些特殊符号。
UTF-8：可以表示 Unicode 中的所有字符，包括世界上所有的语言文字、符号和表情。
由此可看出， UTF-8 具有更广泛的字符覆盖范围和更好的兼容性，
因此，我们编程大都使用 UTF-8 编码方式。
3、视口设置（Viewport）： 用于控制页面在移动设备上的显示方式，包括宽度、缩放比例和初始缩放状态。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
主要是用于后续做的响应式或者手机端。确保视口设置适合当前页面和设备，提供良好的移动端用户体验。这个后面做移动端会细致提到。避免设置固定宽度或缩放比例，应该根据设备宽度自动适配。
4、引入外部样式表（CSS）： 用于引入外部 CSS 文件，控制页面的样式和布局。
<link rel="stylesheet" href="styles.css" />
确保引入的样式表文件路径正确，以免导致样式无法加载或样式失效。
避免引入过多或不必要的样式表，以减少页面加载时间和网络请求次数。
这个标签，我们下节会提到用法。
5、引入外部脚本（JavaScript）： 用于引入外部 JavaScript 文件，实现页面的交互功能和动态效果。这个在后续 js 章节会讲到。
<script src="script.js"></script>
6、描述文档内容（Description）： 提供了对文档内容的描述，通常用于搜索引擎结果的摘要显示。
<meta name="description" content="This is a description of the document." />
7、关键字（Keywords）： 指定了页面的关键字，有助于搜索引擎了解页面的主题和内容。
<meta name="keywords" content="HTML, CSS, JavaScript" />
8、作者（Author）： 指定了页面的作者或所有者信息。
<meta name="author" content="taotao cloud">
总结
虽然<head>标签不直接影响页面的展示，但它在网页开发中扮演着至关重要的角色。<head>标签包含了页面的元信息和引用外部资源的声明，这些信息决定了页面的结构、样式和行为，直接影响着用户的浏览体验和搜索引擎的优化。
因此，在编写 HTML 文档时，务必要充分理解并正确使用<head>标签，以确保页面能够正常加载、呈现，并达到预期的效果。
好了，以上，本节完。
排版：云桃桃 | 图片设计：云桃桃
作者介绍：
云桃桃，在写作的程序媛。终身学习者，陪你一起编程，一起写作❤️
441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
