HTML头部标签详解：head与meta

元信息

<head>

<head> 标签用于定义 HTML 文档的头部信息，主要存放页面的元数据（不会直接显示在网页内容中），包括标题、编码、样式、脚本、描述等。它通常位于 <html> 标签内，紧跟在 <body> 标签之前。

作用：

1. 设置网页标题
   通过 <title> 标签，决定浏览器标签栏显示的内容。

2. 指定字符编码
   使用 <meta charset="UTF-8">，确保中文等字符正常显示。

3. 页面描述与关键词
   用 <meta> 标签提升 SEO 搜索优化。

4. 引入样式与脚本
   通过 <link> 和 <script> 标签加载 CSS 和 JS 文件。

5. 设置视口，适配移动端
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 实现响应式布局。

6. 添加网站图标
   <link rel="icon" href="favicon.ico"> 设置浏览器标签图标。

示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>我的网页</title>
  <meta name="description" content="这是一个网页示例">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.ico">
</head>
<body>
  <!-- 网页内容 -->
</body>
</html>

总结：

• <head> 主要用于存放网页的各种配置和元数据，不直接显示在页面上。

• 合理设置 <head> 内容，有助于网页兼容性、SEO优化和用户体验。

• 建议在每个 HTML 页面都规范书写 <head> 标签，保证网页信息完整。

---

<meta>

<meta> 标签用于设置网页的元数据，提供关于页面的信息。它位于 <head> 标签内，不直接显示在页面内容中，但对搜索引擎、浏览器解析、页面适配等非常重要。

作用：

1. 字符编码声明
   指定页面的编码方式，常用 UTF-8，确保中文等字符正常显示。

   <meta charset="UTF-8">
   

2. SEO 优化
   提供页面描述和关键词，帮助搜索引擎收录和排名。

   <meta name="description" content="这是一个HTML示例页面">
   <meta name="keywords" content="HTML, meta, 标签, 教程">
   

3. 视口设置（移动端适配）
   实现响应式布局，使页面在手机等设备上显示更友好。

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

4. 作者和版权信息
   可用于标注页面作者等信息。

   <meta name="author" content="coder-random">
   

5. 刷新或重定向页面
   可设置页面自动刷新或跳转。

   <meta http-equiv="refresh" content="5;url=https://example.com">
   

示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="这是一个HTML meta标签示例">
  <meta name="keywords" content="HTML,meta,网页,标签">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="coder-random">
  <title>meta标签示例页面</title>
</head>
<body>
  <!-- 网页内容 -->
</body>
</html>

总结：

• <meta> 标签用于定义页面的元信息，不直接展示在网页上。

• 规范使用 <meta> 标签，有助于页面的兼容性、SEO优化和移动端适配。

• 建议在每个 HTML 页面 <head> 内根据实际需求合理设置 <meta> 标签。

  ---

<base>

<base> 标签用于设置页面中所有相对链接的基础路径或默认打开方式，它只能放在 <head> 标签内，并且每个文档只能有一个 <base> 标签。主要用于指定网页中的链接、图片、脚本等相对路径的基准地址，或者指定打开链接时的默认目标窗口。

作用：

1. 指定基础 URL
   当页面中的链接或资源使用相对路径时，浏览器会以 <base> 标签设定的 href 为基准地址进行解析。

   <base href="https://www.example.com/subdir/">
   

   如果页面有图片 <img src="pic.jpg">，实际请求会是 https://www.example.com/subdir/pic.jpg。

2. 指定默认目标窗口
   可以用 target 属性设定页面内所有链接或表单的默认打开方式（如新窗口、当前窗口等）。

   <base target="_blank">
   

   页面内所有 <a> 标签没有指定 target 时，都会在新窗口打开。

示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>base标签示例页面</title>
  <base href="https://www.example.com/" target="_blank">
</head>
<body>
  <a href="docs/index.html">点击访问文档</a>
  <img src="images/logo.png" alt="Logo">
</body>
</html>

在此示例中，所有相对链接和图片地址会以 https://www.example.com/ 为基准，并且链接会在新窗口打开。

总结：

• <base> 标签用于统一设定相对路径的基准地址和链接默认打开方式，简化资源管理。
• 只能在 <head> 中出现一次，否则浏览器只识别第一个。
• 在多页面项目或有统一资源入口需求时非常实用，但需谨慎使用，避免链接解析混淆。

---

<basefont>

HTML5 已经废弃此标签，了解 <basefont> 有助于阅读和维护老旧网页代码，但新项目不建议使用。

<basefont> 标签用于设置网页默认字体的样式，可以指定字体的大小、颜色和类型。它属于 HTML 的早期标签，目前已经被废弃，不推荐在现代网页中使用。

主要属性：

1. size：设置字体默认大小

   <basefont size="4">
   

2. color：设置字体默认颜色

   <basefont color="red">
   

3. face：设置字体类型（如宋体、Arial 等）

   <basefont face="Arial">
   

用法示例：

<!DOCTYPE html>
<html>
<head>
  <title>basefont 标签示例</title>
  <basefont size="5" color="blue" face="Arial">
</head>
<body>
  <p>这段文字会应用 basefont 的样式。</p>
  <p>所有没有单独设置字体的内容都会继承 basefont 的样式。</p>
</body>
</html>

注意事项：

• <basefont> 是 HTML 4 及更早版本中的标签，HTML5 已经废弃此标签，主流浏览器可能已不支持或表现不一致。

• 推荐使用 CSS 设置网页字体样式，例如：

  <style>
    body {
      font-size: 18px;
      color: blue;
      font-family: Arial, "宋体", sans-serif;
    }
  </style>
  

总结：

• <basefont> 用于设置网页默认字体样式，已经被淘汰。
• 实际开发请使用 CSS 控制字体和样式，保证网页的兼容性和可维护性。
• 了解 <basefont> 有助于阅读和维护老旧网页代码，但新项目不建议使用。