nav元素

最新推荐文章于 2023-07-16 20:45:35 发布

xxiaowen

最新推荐文章于 2023-07-16 20:45:35 发布

阅读量1.5k

点赞数

分类专栏： JAVAWEB HTML5

本文链接：https://blog.csdn.net/wenzhilanyu2012/article/details/51209608

版权

JAVAWEB 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

HTML5

13 篇文章 0 订阅

订阅专栏

<nav>用来将具有导航性质的连接划分在一起，使代码结构在语义化更加准确，同时对于屏幕阅读器等设备支持也更好。

具体来说，nav元素可以用于以下场合

传统导航条：现在主流网站上都有不同层级导航条，作用是将当前画面跳转到其他主页上。
侧边栏导航：现在主流博客网站及商品网站都有侧边栏导航，其作用是将页面从当前文章跳转到其他文章
页面导航：页内导航的作用是在本页的组成部分之间进行跳转。
翻页操作：翻页操作是指在网站的多个页面的前后页面或博客网站的前后文章之间滚动。

具体实现代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	作者：wenzhilanyu@126.com
        	时间：2016-04-21
        	描述：如果文档中有“前后”按钮，则应该把它放到<nav>元素中
        -->
		<h1>技术资料</h1>
		<nav>
			<ul>
				<li><a href="#">主页</a></li>
				<li><a href="#">开发文档</a></li>
			</ul>
		</nav>
		<article>
			<header>
				<h1>HTML5与CSS3的发展历史</h1>
				<nav>
					<ul>
						<li><a href="#HTML5">HTML5发展历史</a></li>
						<li><a href="#CSS3">CSS3发展历史</a></li>
			       </ul>
				</nav>
			</header>
			<section id="HTML5">
				<h1>HTML5的历史</h1>
				<p>讲述html5的历史正文</p>
				<footer>
					<p>
						<a href="#">当前版本</a>|
						<a href="#">历史版本</a>|
						<a href="#">未来版本</a>
					</p>
				</footer>
			</section>
			<section id="CSS3">
				<h1>CSS3的历史</h1>
				<p>讲述CSS3的历史正文</p>
				<footer>
					<p>
						<a href="#">当前版本</a>|
						<a href="#">历史版本</a>|
						<a href="#">未来版本</a>
					</p>
				</footer>
			</section>
		</article>
		<footer>
			<p><small>版权所属：wenzhilanyu</small></p>
		</footer>
	</body>
</html>

效果图