`<head>` 标签

<head> 标签作为 HTML 文档的“信息中枢”，负责收纳页面的重要元数据。它不仅包括如 <title>（页面标题）、<meta charset="UTF-8">（字符编码）等基本信息，还集成了诸多关键元素。这些元素在实现网页的 SEO 优化、响应式设计、样式与脚本引入等方面发挥着不可或缺的作用，是保障网页正常展示与功能完整的重要基础。

head 标签

`<meta>` 标签的更多使命

<meta>标签是元数据（meta-data）的通用载体。除了charset，它还能通过name和content属性的组合，向浏览器和搜索引擎提供各种各样的信息。

为搜索引擎优化 (SEO)

页面描述 (description): 这是非常重要的一个<meta>标签。它为网页提供了一段简短的摘要。当你的网页出现在谷歌或百度的搜索结果中时，这段描述通常会显示在标题下方，直接影响用户是否愿意点击。
```
|
 
<meta name="description" content="这本教程将从零开始，用最通俗易懂的方式，带你掌握HTML的核心知识，开启你的网页开发之旅。">
```
关键词 (keywords): 这个标签用来告诉搜索引擎页面的关键词。
```
|
 
<meta name="keywords" content="HTML, 前端, 教程, 网页开发, 入门">
```
在过去，keywords标签非常重要。但由于被滥用，如今大多数主流搜索引擎（包括谷歌）已大大降低了它的权重，甚至会完全忽略它。所以我们在这里了解即可，但description的重要性依旧是很高的。

实现响应式设计

视口 (viewport): 这是现代网页开发中 必不可少 的一个<meta>标签。它告诉浏览器，特别是手机浏览器，应该如何控制页面的尺寸和缩放。
```
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
这行代码的意思是：“将网页的宽度设置为设备的屏幕宽度（width=device-width），初始缩放比例为1.0（initial-scale=1.0），即不缩放。” 如果没有这行代码，手机浏览器可能会默认以桌面版网页的宽度来显示你的页面，导致页面看起来非常小，难以阅读。

`<link>` 标签：连接外部资源

<link>标签用于将当前的HTML文档与外部资源关联起来。最常见的用途就是链接CSS样式表。

链接CSS样式表: 我们将在学习CSS时深入探讨，但现在，你需要知道HTML是通过这个标签来引入它的“服装设计师”的。
```
|
<link rel="stylesheet" href="style.css">
```
rel="stylesheet"表明这个资源是一个样式表，href属性则指向CSS文件的路径。
设置网站图标 (Favicon): 你会注意到浏览器标签页上，网站标题旁边通常会有一个小小的图标。这个图标就是Favicon。它也是通过<link>标签来设置的。
```
|
<link rel="icon" href="favicon.ico" type="image/x-icon">
```

`<script>` 标签：引入交互脚本

当我们需要为网页添加JavaScript来实现交互功能时，通常会将JavaScript代码写在独立的.js文件中，然后通过<script>标签引入。

<script>标签可以放在<head>里，也可以放在<body>的底部。通常推荐放在<body>结束标签</body>的前面，因为这可以防止因加载JS文件过慢而阻塞页面内容的渲染。

|
<!-- 放在<head>中 -->
<head>
  <script src="scripts/main.js" defer></script>
</head>
 
<!-- 或者（更推荐）放在<body>底部 -->
<body>
  <!-- ...页面所有内容... -->
  <script src="scripts/main.js"></script>
</body>

你可能注意到了defer属性。当<script>标签在<head>中并带有defer属性时，浏览器会异步下载该脚本，并且在整个HTML文档解析完毕后、DOMContentLoaded事件触发前才执行。这既能提前下载脚本，又不阻塞页面渲染，是现代前端开发的推荐做法之一。

现在，一个功能完备的<head>部分可能看起来是这样的：

|
<head>
  <!-- 基础元数据 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的专业网页</title>
 
  <!-- SEO元数据 -->
  <meta name="description" content="一个专业的网页，展示了head标签的强大功能。">
  <meta name="author" content

理解并善用<head>里的这些标签，是让你的静态页面走向专业化、现代化应用的重要一步。它让你的网页不仅“看起来不错”，而且“运行得很好”。

<head> 标签

<meta> 标签的更多使命