在 HTML 中创建头部部分

介绍

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

注意：你可以在 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/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") subgraph Lab Skills html/basic_elems -.-> lab-70767{{"`HTML 头部部分`"}} html/head_elems -.-> lab-70767{{"`HTML 头部部分`"}} html/text_head -.-> lab-70767{{"`HTML 头部部分`"}} html/lists_desc -.-> lab-70767{{"`HTML 头部部分`"}} html/layout -.-> lab-70767{{"`HTML 头部部分`"}} html/nav_links -.-> lab-70767{{"`HTML 头部部分`"}} html/doc_flow -.-> lab-70767{{"`HTML 头部部分`"}} end

设置 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 浏览器中打开它。你应该会看到以下输出：

总结

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

HTML 头部部分

介绍

Skills Graph

设置 HTML 文档

创建头部部分

为头部部分添加样式

链接 CSS 文件

总结

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