html5用结构元素来布局,HTML5 结构元素

的用法。 一般来说，一个应该出现在文档大纲中

article

元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构。可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。当元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的元素可嵌套在代表博客文章的元素中

元素的作者信息可通过

元素提供，但是不适用于嵌套的元素；元素的发布日期和时间可通过元素的pubdate属性表示

[注意]对于和来说，是必须要加上标题的

aside

元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。一般用于表示不直接相关内容的侧边栏，里面的内容与它所关联的内容相互独立，谁缺了谁都不影响各自文本含义的理解。如一篇文章的广告、相关背景和引述内容等

nav

HTML导航栏()描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表

并不是所有的链接都必须使用元素，它只用来将一些热门的链接放入导航栏，例如元素就常用来在页面底部包含一个不常用到，没必要加入的链接列表

一个网页也可能含有多个元素，例如一个是网站内的导航列表，另一个是本页面内的导航列表

header

元素表示页面头部或区块头部，用于将介绍内容和区块的辅助导航分组到一起，所以它有可能包含区块的标题元素以及其他的介绍内容(目录、logo等)

[注意]由于和元素不是分节内容，所以不会引入新的分节到大纲中

footer

元素表示最近一个章节内容或者根节点(sectioning

root)元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息

[注意]元素内的作者信息应包含在

元素中

main

元素放在最后说，是因为不常用，最主要的原因是IE浏览器都不支持

main元素()呈现了文档

或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的，不包含任何在一系列文档中重复的内容

标签不能是以下元素的继承，包括、、、、或。 在一个文档中不能出现一个以上的 标签

所以，一个正常的最外层布局应该是下面这样

但现在，一般地，布局如下

案例说明

想找一个规范使用html5新标签的网站不是很容易，国内大多数网站由于各种各样的原因，依然还是div布局，最终，案例选择使用苹果官网