介绍
HTML <nav>
标签是用于在网站上创建导航链接的重要元素。在本实验中,你将学习如何使用 <nav>
标签在网站上创建导航菜单。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
HTML <nav>
标签是用于在网站上创建导航链接的重要元素。在本实验中,你将学习如何使用 <nav>
标签在网站上创建导航菜单。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
首先,让我们创建一个名为 index.html
的新 HTML 页面,并添加基本的 HTML 结构。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Website</title>
</head>
<body></body>
</html>
<nav>
标签添加导航链接现在,让我们借助 HTML <nav>
标签创建一个导航菜单。在 <body>
标签内创建一个 <nav>
元素。
<body>
<nav></nav>
</body>
<a>
标签添加导航链接接下来,使用 HTML <a>
标签在 <nav>
标签内添加一些导航链接。
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact Us</a>
</nav>
</body>
为了让导航菜单更具视觉吸引力,让我们为其添加一些 CSS 样式。将以下样式添加到你的 HTML 中:
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<style>
nav {
background-color: #333;
overflow: hidden;
}
a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
你的最终 index.html
页面应该如下所示:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<style>
nav {
background-color: #333;
overflow: hidden;
}
a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact Us</a>
</nav>
</body>
</html>
在本实验中,你学习了如何使用 HTML <nav>
标签在网站上创建导航菜单。通过使用 <nav>
标签创建导航菜单并用 CSS 为其添加样式,可以帮助用户轻松浏览你的网站,同时使其更具视觉吸引力。