广州新嘉华学:html5中的nav、article等标签用处

今天北大青鸟广州新嘉华的老师分享的是web前端开发中HTML5相关的知识，如何理解html5中 的nav、article、sections、aside、footer这些标签，并讲解一下这些标签的用处。

第一对这个几个标签的理解：

当下对流行的写页面的方式就是div+css；我们也不难发现只要用到这个就可以把页面写即简单有漂亮，没有繁琐的标签在里面，需 要什么功能就去加div标签就可以了；而div是什么呢？问题的关键在于div没有任何的语意，也就是说他要干的事是什么全凭开发者说了算；这就造成了严重的开发规范不统一，也就是说页面的导航栏是div，页面的边栏也是div，唯一区分它们的就是id，可能一些有心的开发者 会吧，div的id写的语意明白些,比如:导航栏的id用“nav”,边栏的id用“aside”；这样的写法对其他的开发者看来还是很好的，因为看到 id就可以知道这个div是干什么用的了。

但是还是有一大部分的开发者会这么写如：导航栏的id用：“div1”,边栏的id用:"div2",这样的写法对用户来说的可能没有什么区别，因 为开发者知道他们都代表什么，而对其他的开发者来说这真的是灭顶之灾，用英文来说就是“reading the fucking code”,而对开发者本身可能时间一长也不知道是什么意思了，但是下次开发的时候他们一定还有人是这么干的；

回到正题，经过上面的介绍大家也许已经知道为什么在HTML5引用上面的标签了吧，就是为了解决开发规范不统一的问题同时也为了增强语意，有人也许 会问为什么HTML5为什么那么在意语意？用了上面的标签可以说带来什么好处呢？这个答案用一个非常简单的话来说的那就是：为了统一规范与新功能的出现。

他们这些标签功能就是代替div功能中的一部分，他们没有任何的默认样式，除了会让文本另起一行外；

第二，关于这几个标签的语意与用法：

nav:标记导航（对应网页中重要的链接群就需要用这个标签）包含的他中间的通常是ul无序列表；当然如果是面包屑链接就需用 到ol有序列表；只要记住这个语意自己灵活发挥就是可以了；写法与上一篇中的header标签的写法一样；

特别提示：1)HTML5规范不推荐对有辅助性的页脚链接用nav;2)THML5中不允许将nav嵌套在address标签中；

article：文章标记标签（表示的是一个文档、页面、应用或是网站中的一个独立的容器，原则上来讲就是聚合），当朋友们用到他的时候满足上面的用法就不会出错了，写法与上一篇中的header标签的写法一样；

特别提示：1）article这个标签可以嵌套使用，但是他们必须是部分与整体的关系；2）同样不能用 在address标签中；3）他与section标签容易混淆所以需要注意；(后面我会说一下怎么在这个两个中间做出选 择；

section:区块定义标签（表示的是文档或是应用的一个一般的块），他一般是有一组相似的主题的内容；一般会包含一个标题；可以用这个标签来 写：文章的章节，标签式对话框中的各种标签页等等类似的功能；这里你会发现他与article这个标签很像对不对？那么怎么的开发中正确的应用他们呢？

其实也很简单你就这样想：如果你的页面中需要一个单独的模块来实现一个单独的功能也就是高聚合的情况就用article其他的时候都用section；只要你这样想并且这样用就没有问题的；

aside:定义侧栏标签（表示一部分内容与页面的主体并不是有很大的关系，但是可以独立存在），用他可以实现：升式引用、侧栏、相关文章的链接框、广告、友情链接等等；

特别提示：1）如果使用多个aside标签应该在主要内容的后面，这样有利于SEO的搜索与提升可访问性；2）如果是与文章的主要内容有关系的图像需要用figure标签而不是用他；

footer:页脚标签（与header标签对应的标签）用他可以实现的功能有：附录、索引、版权页、许可协议等。写法与上一篇中的header标签的写法一样；

特别提示：1）页脚并不一定是要位于所在元素的末尾；不过通常是这样的，2）他不可以放在header标签中；也不可以相互嵌套，或是在address元素中。

用心办好学，广州新嘉华邀您加入互联网队伍！

微信号：jhzyjy（长按复制）

我们专注IT教育，欢迎你前来咨询！