HTML head 元素

<head> 是 HTML 文档的元数据容器。它里面的内容不会显示在页面上，而是告诉浏览器和搜索引擎如何处理这个页面。

<title> — 页面标题

html 
<title>我的网站 – 首页</title>
  • 显示在浏览器标签页上
  • 作为搜索结果的主标题
  • 加入收藏夹时的默认名称
  • 每个页面必须有且仅有一个 <title>

<meta> — 元数据

<meta> 是空元素，提供关于页面的各种描述信息。

字符编码

必须放在 <head> 最前面：

html 
<meta charset="utf-8">

UTF-8 支持世界上几乎所有的文字和符号（中文、日文、韩文、Emoji 等）。所有现代网页都应该声明 UTF-8。

视口（响应式必须）

html 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

这行代码确保页面在手机上不会缩小成一个难以阅读的缩略图。width=device-width 让视口宽度等于设备宽度，initial-scale=1.0 设置初始缩放为 1:1。

页面描述

html 
<meta name="description" content="免费在线 HTML 教程，从零开始学习网页开发。">

搜索引擎会将 description 显示在搜索结果中，作为页面的摘要。这个描述直接影响用户是否点击你的链接。

<link> — 外部资源

网站图标（Favicon）

html 
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" href="/favicon.png">

网站图标显示在浏览器标签页、书签栏和历史记录中。现代浏览器支持 SVG 和 PNG 格式。提供多种格式确保兼容性。

<base> — 基础 URL

<base> 为页面中所有相对 URL 指定基础路径：

html 
<head>
  <base href="https://example.com/docs/">
</head>
<body>
  <a href="page2.html">第二页</a>
  <!-- 实际跳转到 https://example.com/docs/page2.html -->
</body>

一个页面只能有一个 <base>。

除了以上基础元素，<head> 还可以包含 CSS 样式表（<link rel="stylesheet">）、JavaScript 脚本（<script>）以及社交分享和 SEO 相关的元数据。这些进阶内容将在 CSS 教程、JavaScript 教程 和 HTML 最佳实践 中详细讲解。