今天先介绍下 html5 新增的结构元素,有的经常使用到,有的用不上,虽然说它们的出现是更促进页面更有语义,更好的 seo,但其实当页面禁用样式后,它们的展现跟 div 是没撒差别,有同学可能会说,既然一样,又不影响页面的最终展现,不管是 article 还是 section 能用就好了。如果考虑实际项目的针对用户,我也是这么认为的,但作为一个重构仔,我们还是得专业点,再考虑到无障碍这块,那么 html5 标签的作用就更明显了。于是复习下内容并记录在博客上,顺便分享给大家,也方便自己以后查找。
HTML5 新增结构元素分为主体结构元素和非主体结构元素
1.主体结构元素包括 article、section、nav、aside、time
2.非主体结构元素包括 header、hgroup、footer、address
一、主体结构元素
article
article 标签,从语义化上看为文档、页面,其用法如下:
通常是一篇文章、一个页面、一个独立完整的内容模块
一般会带个标题,并放在 header 标签中
article 元素可以互相嵌套
使用频率极高,强调独立性,多注意下与 header 标签的使用。
用于页面内容的独立分块,往往是文章的一段
通常由内容和标题组成,没有标题的内容不推荐使用 section
使用频率低,强调分段分块。
注:《HTML5与CSS3权威指南》这本书中说明:一个容器需要被定义样式或者脚本定义行为时,推荐用div而非section,不要将section用作设置样式的容器。
通常作为页面导航的链接组
侧边栏导航
使用频率高。
在 article 标签中使用时,作为主要内容的附属信息部分,如有关的参考资料、名词解释等。
在 article 标签外使用时,作为页面或者站点全局的附属信息部分,如侧边栏、博客的友情链接部分、广告区域等。
使用频率低。
代表 24 小时中的某个时刻或某个日期
表示时刻时允许带时间差
可定义很多格式的日期和时间
使用频率低。
一种具有引导和导航作用的结构元素
通常放置在整个页面或者页面内的一个内容区块的标题
一个网页内并没有限制 header 标签的个数
使用频率极高,比较容易理解。
作为 header 标签的子元素
一个内容模块中包括了主标题和至少一个子标题才使用 hgroup
通常会将 h1~h6 元素进行分组
使用频率高。
一个内容块区的脚注
通常内容为联系信息、相关阅读、版权信息等
使用频率高,比较容易理解。
用于文档中呈现的联系信息
通常内容为作者、网站链接、电子邮箱、地址、电话号码等
使用频率低。
希望本文对大家在 html5 结构标签上的运用有一定的指导,如果发现内容有错误的地方,欢迎大家指正~
打开软件,我们按快捷键ctrl+n,建立一个新的文件。 点击常用,选择布局。 点击...
作者 / Krish Vitaldevara,Google Play 信任与安全产品管理总监 多年来,向数十...
Dreamweaver中如何使用Flash影片 1、首先需要我们准备的是一个Flash文件,其次最...
在讲CSS优先级之前,我们得要了解什么是CSS,CSS是用来做什么的。 首先,我们对C...
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列...
行高line-height实现单行文本垂直居中 以前一直认为单行文本垂直居中要将高度和...
一、作用 离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联...
背景 京东购物小程序作为京东小程序业务流量的主要入口,承载着许多的活动和页面...
CSS3实现酷炫的3D旋转透视 3D动画效果现在越来越普及,已经被广泛的应用到了各个...
在ie下设置 css 样式 style="cursor:hand;" 可以正常显示 但是在firefox下就不行...