HTML 头部
HTML <head> 元素是一个容器，用于存放那些不直接显示在页面内容区的元数据 (metadata)、文档链接、样式和脚本。
简单来说，<head> 里的内容是给浏览器和搜索引擎看的，而 <body> 里的内容是给用户看的。
<head> 元素位于 <html> 标签之后，<body> 标签之前。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 元数据、样式、脚本等放在这里 -->
</head>
<body>
<!-- 页面可见内容放在这里 -->
</body>
</html><head> 中常见的元素
以下是 <head> 元素内部最常用的一些标签：
1. <title> 元素
这是 <head> 中唯一必须包含的元素。它定义了文档的标题，这个标题会用在三个关键地方：
- 浏览器工具栏（或标签页）的标题。
- 用户将页面添加到收藏夹（书签）时，作为默认名称。
- 搜索引擎结果页面 (SERP) 中显示的页面标题。
<head>
<title>我的网站 - 首页</title>
</head>一个准确、简洁的标题对于可用性和搜索引擎优化 (SEO) 都非常重要。
2. <meta> 元素
<meta> 标签用于提供关于 HTML 文档的元数据，它是一个空元素。常见的用途包括：
声明字符集: 这是最重要的
<meta>标签之一，应始终作为<head>的第一个子元素，以确保浏览器正确解析所有文本字符。html<meta charset="UTF-8">设置视口 (Viewport): 这对于创建响应式设计至关重要，它告诉浏览器如何控制页面的尺寸和缩放。
html<meta name="viewport" content="width=device-width, initial-scale=1.0">页面描述和关键词 (SEO): 虽然现在搜索引擎对
keywords的权重已经很低，但description仍然非常重要，它通常会作为搜索结果中的摘要显示。html<meta name="description" content="这是一个关于HTML学习的网站。"> <meta name="keywords" content="HTML, CSS, JavaScript, Web开发">作者信息:
html<meta name="author" content="张三">
3. <link> 元素
<link> 元素定义了当前文档与外部资源之间的关系，最常见的用途是链接外部 CSS 样式表。
<head>
<link rel="stylesheet" href="styles/main.css">
</head>rel="stylesheet"表明链接的资源是一个样式表。href指定了 CSS 文件的路径。
它还可以用来链接网站的图标 (favicon)。
4. <style> 元素
如果你不想使用外部样式表，可以使用 <style> 元素在 HTML 文档内部定义 CSS 样式（通常称为“内部样式”）。
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
}
</style>
</head>5. <script> 元素
<script> 标签用于嵌入或引用可执行的 JavaScript 代码。它可以直接包含代码，也可以通过 src 属性链接到外部的 .js 文件。
<head>
<!-- 引用外部脚本 -->
<script src="scripts/main.js"></script>
<!-- 内部脚本 -->
<script>
alert('你好，世界！');
</script>
</head>最佳实践: 为了提高页面加载性能，通常建议将 <script> 标签放在 <body> 元素的末尾，而不是 <head> 中，除非脚本需要在页面渲染前执行。
6. <base> 元素
<base> 元素可以为页面上的所有相对链接（如 <img>, <a>）设置一个基础 URL。一个文档中最多只能有一个 <base> 元素。
<head>
<base href="https://www.example.com/images/" target="_blank">
</head>
<body>
<!-- 这张图片会从 https://www.example.com/images/logo.png 加载 -->
<img src="logo.png">
<!-- 这个链接会在新标签页打开 -->
<a href="page.html">一个页面</a>
</body>