<nav>标签介绍及实例代码_html5 nav标签

时间:2023-06-20 16:19:03

html5 nav元素标签,nav标签用于定义网页的导航部分。它通常包含网站的导航菜单或导航链接。

<nav>标签的作用是提供页面的导航功能,帮助用户浏览和访问网页的不同部分或页面。

以下是一个简单的<nav>标签的实例代码:

<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
nav {
background-color: #f2f2f2;
padding: 10px;
}

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

li {
display: inline-block;
margin-right: 10px;
}

a {
text-decoration: none;
color: #333;
padding: 5px;
}

a:hover {
background-color: #333;
color: #fff;
}
</style>
</head>
<body>
<header>
<!-- 网页的页眉 -->
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<main>
<!-- 网页内容 -->
</main>
<footer>
<!-- 网页的页脚 -->
</footer>
</body>
</html>

在这个示例中,<nav>标签定义了网页的导航部分。它包含一个无序列表("<ul>"),列表项("<li>")中包含了导航链接("<a>")。通过CSS样式定义了导航部分的背景颜色、内边距、样式和链接的装饰效果。

 

相关词 nav