nav标签的定义和功能

HTML5里，nav标签就是个连接其他页面或本页内容的地方！也就是咱们常见的导航栏。这不，跟header差不多，nav标签可不只能给主导航用，还能拿来放各种小导航！所以说，网页设计的时候，把重要的导航内容放在nav标签里面，看起来整齐有序，像装了格子衫的男孩一样帅气！

nav标签与其他标签的区别

大家知道nav标签主要是用来放页面上的主菜单链接的？不过，也别把啥都往里面塞。譬如说，像网站底部那些服务条款、简介、版权声明之类的链接，就更应该放footer标签里。所以咱们在布局网页时，得看实际需求选唤哪个标签哈。别搞乱了这些语义化标签！

XML/HTML Code复制内容到剪贴板
gbin1.com文章列表

多个nav标签在同一页面中的应用

网页上可以放好几个nav标签来显示各个板块或者内容区域的导航链接。比如说，要看整个网站的话，要有好几个像模像样的功能区，而且每个区域都得有相应的导航链接才行。每单个区域设置一个专属的nav标签，咱们就能把各个部分的导航搞定！这对于用户查找自己想要的内容超级有用的，同时还能让网站更易用、更容易访问！

nav标签内部内容形式

除了链接列表，nav标签里头还能塞其他玩意儿！比如，搜索框、按钮或者图标什么的，都能安放在nav里面。这样一来，咱就能随心所欲地设计导航布局了，打破常规的同时也更贴近用户。

使用<nav>创建文章导航

网页文章里常见到，大段文字会划分成好几个章节，首页或者边上还会有章节目录让大家快速找自己喜欢的那块儿。这个小技巧就是用标签搞定的呗！就是给每章取个名字，然后把名字设为锚点，再把锚点放在标签里面，这不就轻松搞出个方便又实用的阅读界面导航了！

XML/HTML Code复制内容到剪贴板
雨打浮萍


    

        
html5语义化标签之结构标签
        
发表于2011-12-22
    
    
    

        

            
section里面仍然可以再用h1标签
            
...more...
        
        

            
section里面仍然可以再用h1标签
            
...more...
        
        ...more... 

    

响应式设计中<nav>的应用

现在越来越多的人用手机上网，所以响应式设计变得非常重要。这种设计让网站页面会自动改变大小和样式，这样大家用各种不同屏幕都能舒服地看了。还有个很关键的东西就是标签，在小屏幕手机上，常常把主导航放在侧边栏或者折叠菜单里，这样省得屏幕不够放就要乱糟糟的。

结合CSS样式美化<nav>元素

哪怕你的东西本来就有点儿意思，有明确作为导航用的特点，但它的默认模样可能不太符合你想要的那种感觉，或者说跟你整个网站的风格不够搭调。所以，在真正做这个东西的时候，一般都得把CSS样式加进去，让它好看点儿，好读点儿，还能跟你的网站风格协调起来。比如说，可以改变背景颜色，给边框换个风格，把字号调整一下，这样就能提高辨识度和美感了。

SEO优化与<nav>标签

XML/HTML Code复制内容到剪贴板

添点儿标签不但让网页好看，还能涨网站在搜索引擎里的排名。那是因为搜索引擎会根据网页结构和内容来判断重要性，然后按这个排名。所以，我们在做网页的时候，合理使用像、等这样的语义元素，网页就更有关联度，也更有影响力，收录速度更快喔！