HTML5 教程学习 - nav元素标签
2011-03-28 06:00
447 查看
HTML5中的新元素标签<nav>用来将具有导航性质的链接划分在一起,使代码结构在语义化方面更加准确,同时对于屏幕阅读器等设备的支持也更好。
一直以来,我们习惯于使用形如<div id="nav">或<ul id="nav">这样的代码来写页面的导航;在HTML5中,我们可以直接将导航链接列表放到<nav>标签中:
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>
根据W3C的定义规范:
nav元素是一个可以用来作为页面导航的链接组;其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进<nav>元素;例如,在页脚中通常会有一组链接,包括服务条款、首页、版权声明等;这时使用<footer>元素是最恰当的,而不需要<nav>元素。
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.
一个页面中可以拥有多个<nav>元素,作为页面整体或不同部分的导航;下面是W3C给出的一个代码示例:
<body>
<h1>The Wiki Center Of Exampland</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/events">Current Events</a></li>
...more...
</ul>
</nav>
<article>
<header>
<h1>Demos in Exampland</h1>
<p>Written by A. N. Other.</p>
</header>
<nav>
<ul>
<li><a href="#public">Public demonstrations</a></li>
<li><a href="#destroy">Demolitions</a></li>
...more...
</ul>
</nav>
<div>
<section id="public">
<h1>Public demonstrations</h1>
<p>...more...</p>
</section>
<section id="destroy">
<h1>Demolitions</h1>
<p>...more...</p>
</section>
...more...
</div>
<footer>
<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
</footer>
</article>
<footer>
<p><small>© copyright 1998 Exampland Emperor</small></p>
</footer>
</body>
在这个示例中,我们可以看到<nav>不仅可以用来作为页面全局导航,也可以放在<article>标签内,作为单篇文章内容的相关导航链接到当前页面的其他位置。
一直以来,我们习惯于使用形如<div id="nav">或<ul id="nav">这样的代码来写页面的导航;在HTML5中,我们可以直接将导航链接列表放到<nav>标签中:
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>
根据W3C的定义规范:
nav元素是一个可以用来作为页面导航的链接组;其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进<nav>元素;例如,在页脚中通常会有一组链接,包括服务条款、首页、版权声明等;这时使用<footer>元素是最恰当的,而不需要<nav>元素。
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.
一个页面中可以拥有多个<nav>元素,作为页面整体或不同部分的导航;下面是W3C给出的一个代码示例:
<body>
<h1>The Wiki Center Of Exampland</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/events">Current Events</a></li>
...more...
</ul>
</nav>
<article>
<header>
<h1>Demos in Exampland</h1>
<p>Written by A. N. Other.</p>
</header>
<nav>
<ul>
<li><a href="#public">Public demonstrations</a></li>
<li><a href="#destroy">Demolitions</a></li>
...more...
</ul>
</nav>
<div>
<section id="public">
<h1>Public demonstrations</h1>
<p>...more...</p>
</section>
<section id="destroy">
<h1>Demolitions</h1>
<p>...more...</p>
</section>
...more...
</div>
<footer>
<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
</footer>
</article>
<footer>
<p><small>© copyright 1998 Exampland Emperor</small></p>
</footer>
</body>
在这个示例中,我们可以看到<nav>不仅可以用来作为页面全局导航,也可以放在<article>标签内,作为单篇文章内容的相关导航链接到当前页面的其他位置。
相关文章推荐
- TWaver HTML5学习笔记 —— 拓扑元素添加标签图标
- Html5学习笔记1 元素 标签 属性
- HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer
- 从零开始前端学习[26]:html5的一些常用标签,header,footer,section,aside,figure,figcaption,nav,artical,
- 【HTML5 未完】HTML5之元素与标签结构--慕课网【学习总结】
- HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer
- HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer
- HTML5学习:语义元素nav
- Html5学习笔记1 元素 标签 属性
- HTML5—新语义元素header、nav、section、article、aside、footer等使用及兼容
- HTML5新标签学习总结(网页结构)上
- HTML5学习笔记 HTML5基础教程
- riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期
- HTML5学习笔记之基础标签
- HTML5新增元素、标签总结
- jQuery学习教程十三: jQuery - 添加元素
- html5之新增标签学习
- Html5新增语义结构元素:article section aside nav header hgroup footer time
- DayDayUP之HTML5学习笔记四----使用Video标签制作简单的播放器
- html5学习笔记(3)--主题结构元素-1