HTML 头部

提示

HTML头部作用：HTML文档的<head>部分包含文档信息，如标题、元数据、链接、样式和脚本，但不在浏览器中显示。
重要的头部标签：包括<title>定义文档标题，<meta>添加元数据，<link>指定与外部资源的关系，<style>添加CSS规则，<script>添加Javascript代码，<base>定义基础URL。
头部标签的应用：例如，<meta>标签用于设置字符集、页面描述，<link>标签用于添加样式表和图标，<base>标签用于设定所有相对链接的基础URL。

<head> 部分包含了 HTML 文档的信息，如 meta、链接、样式、脚本、标题等。

<head>
  <title>HTML 头部文章</title>
</head>

HTML 头部的内容在文档加载时不会在浏览器中显示。

注意： 头部和主体部分 together 构成了 HTML 文档。

`<head>` 标签的元素

HTML 的 <head> 标签可以包含以下标签：

HTML <title> 标签
HTML <meta> 标签
HTML <link> 标签
HTML <style> 标签
HTML <script> 标签
HTML <base> 标签

HTML `<title>` 标签

HTML 的 <title> 标签用于定义文档的标题，它显示在浏览器的标题栏中。例如，

<head>
  <title>我的第一个标题</title>
</head>

浏览器输出

显示为“我的第一个标题”的标题示例

要了解更多关于 <title> 标签，请访问 HTML 标题。

HTML `<meta>` 标签

HTML 的 <meta> 标签用于添加关于文档的元数据（数据的信息）。元数据包括字符集、页面描述、作者姓名、视口设置等信息。例如，

<head>
  <meta charset="UTF-8" />
  <meta name="description" content="HTML 教程" />
  <meta name="keywords" content="HTML, 学习, 教程" />
  <meta name="author" content="mashangxue123 团队" />
</head>

要了解更多关于 <meta> 标签，请访问 HTML 元素。

HTML `<link>` 标签

HTML link 标签用于指定文档和外部资源之间的关系。例如，

<head>
  <link href="/styles/index.css" rel="stylesheet" />
</head>

这里，

<link> 标签让我们在 HTML 页面中使用 index.css 的 CSS 样式。

注意： 它主要用于添加样式表和图标。

HTML `<style>` 标签

HTML 的 <style> 标签用于向文档添加 CSS 规则。例如，

<head>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>

这里，HTML 中的 <h1> 标签将被设置为红色。

要了解更多关于 <style> 标签，请访问 HTML 样式。

HTML `<script>` 标签

HTML 的 <script> 标签用于向文档添加 Javascript。例如，

<head>
  <script>
    console.log("hi");
  </script>
</head>

这里，我们在 <script> 标签内编写了 javascript 代码。

我们也可以使用 src 属性将 HTML 文档与外部 javascript 文件链接。例如，

<head>
    <script src="scripts/main.js">
</head>

这里，使用 <script> 标签，我们可以在 HTML 文档中添加来自 main.js 的 javascript 功能。

HTML `<base>` 标签

HTML 的 <base> 标签用于定义文档的基础 URL。基础 URL 指的是网页中所有链接的公共部分。文档中的所有相对链接将指向 base 标签中的 URL。例如，

<head>
  <base href="https://mashangxue123.com" target="_blank" />
</head>
<body>
  <img src="images/logo.png" alt="mashangxue123 的 Logo" />
</body>

这里，图片将从 https://mashangxue123.com/images/logo.png 加载，而不是 images/logo.png。这是因为 <base> 标签会在图片和网页上的任何其他相对链接的 src 前添加 https://mashangxue123.com/。

完整示例

最后，让我们看看一个真实网站的 <head> 部分可能是什么样的。

<head>
    <title>HTML 头部文章</title>

    <meta charset="UTF-8">
    <meta name="description" content="HTML 教程">
    <meta name="keywords" content="HTML, 学习, 教程">
    <meta name="author" content="mashangxue123 团队">

    <base href="https://mashangxue123.com" target="_blank">

    <link href="/styles/index.css" rel="stylesheet">

    <script src="scripts/main.js">
</head>

HTML 头部

<head> 标签的元素​

HTML <title> 标签​

HTML <meta> 标签​

HTML <link> 标签​

HTML <style> 标签​

HTML <script> 标签​

HTML <base> 标签​

完整示例​