HTML - nav 标签

HTML <nav> 标签用于表示页面的一部分，其目的是在当前文档内或指向其他文档提供导航链接。

并非所有链接都需要包含在 <nav> 元素中。HTML <nav> 仅适用于主要的导航链接块。通常，<footer> 元素通常包含不需要位于 <nav> 元素中的链接列表。

语法


<nav>...</nav>

属性

<nav> 标签支持 HTML 的全局属性和事件属性。

<nav> 标签示例

下面的示例将说明<nav> 标签的用法。在哪里、何时以及如何使用 <nav> 标签，以及如何使用 CSS 设置 <nav> 标签的样式。

使用<nav> 标签创建导航栏

在以下示例中，我们使用 <nav> 标记来指定包含导航链接的部分。


<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML nav Tag</title>
</head>
<body>
	 <h1>qikepu</h1>
	 <nav>
			<a href=
"https://www.qikepu.com/html/index.htm">
					HTML
			</a>
			<a href=
"https://www.qikepu.com/css/index.htm">
					CSS
			</a>
			<a href=
"https://www.qikepu.com/javascript/index.htm">
					JavaScript
			</a>
	 </nav>
</body>
</html>

设置导航栏的样式

在以下示例中，我们将装饰在上一个示例中已创建的导航栏。所有的样式都将使用内部CSS完成。


<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML nav Tag</title>
	 <style>
	 nav{
			 background-color: green;
			 padding: 15px;
			 border-radius: 5px;
	 }
	 a {
			 font-weight: bold;
			 margin-right: 10px;
			 color: lightgray;
			 text-decoration: none;
	 }
	 </style>
</head>
<body>
	 <h1>qikepu</h1>
	 <nav>
			<a href=
"https://www.qikepu.com/html/index.htm">
					HTML
			</a>
			<a href=
"https://www.qikepu.com/css/index.htm">
					CSS
			</a>
			<a href=
"https://www.qikepu.com/javascript/index.htm">
					JavaScript
			</a>
	 </nav>
</body>
</html>

支持的浏览器

浏览器
是否支持	5.0	9.0	4.0	5.0	11.1

打印本页