双十一|HTML5第八讲:HTML5中的结构元素header、nav、article等

双十一|HTML5第八讲:HTML5中的结构元素header、nav、article等

文章图片



图1

图2
几年前网页布局一般都用div元素 , 语义化并不好 。 HTML5引入大量块级元素帮助提升网页语义 , 使页面具有逻辑性、易维护性 , 有利于搜索引擎收录内容 。
header元素用于放置整个页面或页面中某个区块的标题 , 可以包含搜索 , Logo图片等内容 。 注意header元素与head元素不同 , HTML中可以使用多个header元素 , 如图1中12—28行 。
nav元素用于导航 , 可将具有导航性质链接归纳在一个区域 , 是HTML5新增元素 。 HTML中可以包括多个nav元素 , 常常与无序列表嵌套使用 , 如:传统导航条、侧边栏导航、页内导航或翻页操作 。
article元素代表文档、页面或应用程序与上下文不相关独立部分 , 如:一篇日志、一条新闻或用户评论 。 article中通常使用section进行划分 , HTML中也可以出面多个article元素 。
aside元素用于定义页面或文章的附属信息 , 如引用、侧边栏、广告、友情链接、导航条等 , 如图1中第24行用于链接其它文章 。
section元素对页面或文章进行分块 , 一个section通常由标题和内容组成 。 注意section元素不是一个目标普通容器元素 , 当需要普通容器时 , 可以使用div;如果article元素、aside元素或nav元素更符合要求时 , 不要使用section元素;没有标题内容的区块不使用section元素 。 artice元素强调独立性 , 如果一块内容相对完整、独立时使用;section元素强调分段或分块 , 如果想将一块内容分成多段时使用 。
footer元素用于定义页面或区域底部 , 通常用于放页面底部内容 , 一个页面也可以包含多个footer元素 , 也可以出现在section元素或article元素中 , HTML5出现之前一般用div来定义 。
【双十一|HTML5第八讲:HTML5中的结构元素header、nav、article等】还有main元素 , 用于呈现页面或文章的主体部分 , 在一个文档中不能出现一个以上 。 因为IE浏览器不支持的原因 , 所以main元素不常用 。