HTML 文档元数据

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在本实验中,你将学习如何使用 HTML <head> 标签创建一个 HTML 文档。<head> 标签用于提供网页的元数据和其他信息,这些信息对用户不可见。我们将逐步介绍如何为你的 HTML 文档创建 <head> 标签。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") subgraph Lab Skills html/basic_elems -.-> lab-70765{{"`HTML 文档元数据`"}} html/head_elems -.-> lab-70765{{"`HTML 文档元数据`"}} html/charset -.-> lab-70765{{"`HTML 文档元数据`"}} html/doc_flow -.-> lab-70765{{"`HTML 文档元数据`"}} end

创建一个 HTML 文档

首先,让我们在一个名为 index.html 的文件中创建一个 HTML 文档:

<!doctype html>
<html>
  <head> </head>
  <body></body>
</html>

为你的 HTML 文档添加标题

<title> 标签用于定义网页的标题。它应该放置在 <head> 标签内。将 <title> 标签添加到你的 HTML 文档中:

<!doctype html>
<html>
  <head>
    <title>My Awesome Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

修改你的 HTML 文档标题

让我们通过将文本 "My Awesome Webpage" 更改为其他内容来修改 HTML 文档的标题。将 "My Awesome Webpage" 替换为你想要的标题:

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

添加字符编码

字符编码用于定义字符在浏览器中的显示方式。我们可以使用 <meta> 标签定义字符编码。将以下 <meta> 标签添加到 <head> 标签内:

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

为你的 HTML 文档添加 CSS 样式

你可以在 <head> 标签内使用 <style> 标签为网页提供 CSS 样式。将以下 <style> 标签添加到 <head> 标签内:

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
    <style>
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

添加外部样式表链接

你可以使用 <link> 标签将外部 CSS 样式表链接到你的 HTML 文档中。创建一个名为 styles.css 的新文件,并添加以下 CSS 样式:

h1 {
  color: red;
}

然后,在 <head> 标签内使用以下 <link> 标签将此样式表链接到你的 HTML 文档中:

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

添加基础 URL

<base> 标签用于为 HTML 文档中使用的所有相对 URL 提供一个基础 URL。将 <base> 标签添加到 <head> 标签内:

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <base href="https://example.com" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

总结

在本实验中,你学习了如何使用 HTML 的 <head> 标签为网页提供元数据和其他信息。你可以使用 <title> 标签定义 HTML 文档的标题,使用 <meta> 标签定义字符编码和其他元信息,使用 <style> 标签提供 CSS 样式,使用 <link> 标签链接外部样式表,以及使用 <base> 标签为所有相对 URL 提供基础 URL。

您可能感兴趣的其他 HTML 教程