在 HTML 中创建头部部分

介绍

在本实验中，我们将学习如何使用 <header> 标签创建 HTML 页面的头部部分。网页的头部部分通常包含网站标志、导航菜单、搜索栏等。<header> 标签是一个块级元素，用于将其他 HTML 元素组合在一起，以创建网页的头部部分。

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

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 86%。获得了学习者 100% 的好评率。

设置 HTML 文档

我们将从创建一个名为 index.html 的新 HTML 文件开始。在 index.html 中，我们将通过以下代码添加基本的 HTML 文档结构：

<!doctype html>
<html>
  <head>
    <title>HTML Header Tutorial</title>
  </head>
  <body></body>
</html>

创建头部部分

我们将使用 <header> 标签创建 HTML 页面的头部部分。在 <body> 标签内，添加以下代码：

<header>
  <h1>欢迎访问我的网站</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">联系</a></li>
    </ul>
  </nav>
</header>

在上面的代码中，我们添加了一个 <h1> 标签来定义头部部分的标题，以及一个 <nav> 标签来定义导航菜单。在 <nav> 标签内，我们添加了一个无序列表 <ul> 和三个列表项 <li>，并使用相应的锚点 <a> 标签来创建导航菜单。

为头部部分添加样式

为了为头部部分添加样式，我们将创建一个名为 style.css 的 CSS 文件。在 style.css 中，我们将编写以下代码：

header {
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav li a {
  color: #fff;
  display: block;
  padding: 0.5em;
  text-decoration: none;
}

在上面的代码中，我们为 <header> 标签添加了样式，设置了背景颜色、文本颜色和内边距。我们还为 <nav> 标签及其子元素添加了样式，以设置导航菜单的样式。

链接 CSS 文件

为了将 CSS 文件链接到 HTML 文件，请在 <head> 标签内添加以下代码：

<link rel="stylesheet" href="style.css" />

保存对 index.html 的更改并在 Web 浏览器中打开它。你应该会看到以下输出：

HTML Header Example

总结

恭喜！你已经成功使用 <header> 标签创建了一个基本的 HTML 头部部分。在本实验中，你学习了如何创建 HTML 页面的头部部分、为其添加样式，以及将 CSS 文件链接到 HTML 文档。头部部分是任何网页的重要组成部分，因为它为访问者提供了介绍性内容和导航菜单。