介绍
在本实验中,你将学习如何使用 HTML <head>
标签创建一个 HTML 文档。<head>
标签用于提供网页的元数据和其他信息,这些信息对用户不可见。我们将逐步介绍如何为你的 HTML 文档创建 <head>
标签。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
在本实验中,你将学习如何使用 HTML <head>
标签创建一个 HTML 文档。<head>
标签用于提供网页的元数据和其他信息,这些信息对用户不可见。我们将逐步介绍如何为你的 HTML 文档创建 <head>
标签。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
首先,让我们在一个名为 index.html
的文件中创建一个 HTML 文档:
<!doctype html>
<html>
<head> </head>
<body></body>
</html>
<title>
标签用于定义网页的标题。它应该放置在 <head>
标签内。将 <title>
标签添加到你的 HTML 文档中:
<!doctype html>
<html>
<head>
<title>My Awesome Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</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>
你可以在 <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>
<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。