html5结构元素的作用,HTML5之结构元素 | 学步园

1:文档结构元素

1.1 文章语义 --  article、header和footer元素

article元素在页面中用来表示结构完整且独立的内容部分,如论坛的一个帖子,杂志或者报纸的一篇文章。

article元素是可以嵌套使用的,内层的内容在原则上需要与外层内容相关联。例如,一篇博客文章与针对该文章的评论一起可以使用嵌套article的方式,这时

用来呈现评论的article元素被包含在文章内容的article里面。

header元素是一种具有引导和导航作用的辅助元素,通常,header元素可以包含一个区块的标题,但也可以包含其他的内容。

footer元素可以作为其直接父级内容区块或是一个根区块的尾部内容,通常包括其相关区块的附加信息,如文档的作者、文档的创作日期,相关阅读链接以及

版权信息等。

Sample

body {

font-family: 'Microsoft YaHei', '微软雅黑', 'SimSun', '宋体';

}

header {

background: #ADB96E;

}

footer {

padding: 10px 0;

background: #EADCAE;

clear: both;

text-align:right;

}

h1, h2, h3, h4, h5, h6, p {

margin-top: 0;

padding-right: 15px;

padding-left: 15px;

}

header, section, footer, aside, nav, article, figure {

display: block;

}

HTML5规范学习指南

日志正文简介放在这里

日志正文简介放在这里

阅读全文...

显示评论...

效果图:

1333778738_8371.png

1.2 内容区块语义---section元素

该元素用来表现普通的文档内容区块或者应用区块,一个区块通常由内容及其标题组成,

标题

..............其他内容....................

第1章

这里是第1章的内容

第2章

这里是第2章的内容

Sample

body {

font-family: 'Microsoft YaHei', '微软雅黑', 'SimSun', '宋体';

}

header {

background: #ADB96E;

}

footer {

padding: 10px 0;

background: #EADCAE;

clear: both;

text-align:right;

}

h1, h2, h3, h4, h5, h6, p {

margin-top: 0;

padding-right: 15px;

padding-left: 15px;

}

header, section, footer, aside, nav, article, figure {

display: block;

}

HTML5规范学习指南

日志正文全文放在这里

日志正文全文放在这里

评论

Posted by: 王三

HTML5 is good thing.

Posted by: 李老四

正在学习HTML5,非常棒!

效果图:

1333779124_2291.png

1.3 侧栏和导航

用来表示当前页面或者文章的附属信息部分,它可以包含与当前页面或者主要内容无关的引用、侧边栏、广告、导航元素组,

以及其他类似的有别于主要内容的部分。

导航一般用nav元素来实现,因此,一般使用如下的代码来实现左侧导航栏:

导航

aside#leftside { float: left; width: 180px; background: #EADCAE; padding-bottom: 10px;}

效果图:

1333779623_9370.png

1.4  address元素

address元素一般被作者用来提供该文档的联系人信息,一般放在一个网页的开头或者结尾,最常用的是和其他内容包含在footer元素内。

如果address元素位于article元素内部,则它表示元素所包含文章内容的作者的联系信息,如果直接位于body元素内,那么表示该网页的作者的

联系信息。

2:浏览器的兼容性

对于IE浏览器,也可以输入下面的代码,这是一个HTML5爱好者编写的实现,可以便利的让IE9以前的浏览器支持结构元素,并且支持打印功能:

共支持如下的html 5元素:

abbr  article   aside   audio   canvas   details   figcaption  figure   footer   header   hgroup  mark   meter

nav  output   progress   section     summary   time   video

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值