html5的结构 - 刺鸟 - ITeye博客
博客分类：
最近一直在看《html5与css3权威指南》这本书，后续会将看完本书的一些笔记详细的记录下来。
新增的主体结构元素
1.1 article元素代表文档、页面或应用程序中独立完整的，可以独自被外部引用的内容。
有它自己的标题，有时还有自己的脚注。
可以嵌套使用。内层内容原则上需要与外层内容想关联。
1.2 section元素对网站或应用程序中页面上的内容进行分块。
通常由内容及其标题组成。
当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div。
article元素可以看成是一种特殊种类的section，比section更强调独立性。即section元素强调分段或分块，article强调独立性。
具体来说，如果一块内容独立，完整使用article，将一块内容分为几段使用section。
section使用禁忌
不要将section用作设置样式的页面容器，那是div的工作。
如果article元素，aside或nav更符合条件，不要用section。
不要为没有标题的内容区块使用section元素。
1.3 nav元素 用作页面导航的链接组。一个页面可以有多个nav。
1.4 aside元素 当前页面或文字的附属信息部分。
它可以包含与当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类似的有别于主要内容的部分。
1.5 time元素与微格式
微格式是一种利用html的class属性来对网页添加附加信息的方法。
time元素表示24小时中的某个时刻或某个日期，表示时刻时允许带时差，它可以定义很多格式的日期和时间。eg:
&time datatime =""&日&/time&
&time datatime ="T20：00"&日晚上8点&/time&
&time datatime ="T20：00+09:00"&日晚上8点的美国时间&/time&
1.6 pubdate属性 一个可选的，boolean值的属性，它可以用到article元素中的time元素上，表明哪个time元素代表了通知的发布日期。
新增的非主体结构元素
2.1 header元素 具有引导和导航作用的结构元素。通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，如数据表格，搜索表单或者相关的logo图片。
2.2hgroup元素 将标题及其子标题进行分组的元素。一个内容区块的标题及其子标题算一组。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&hgroup元素示例&/title&
&h1&文章主标题&/h1&
&h2&文章子标题&/h2&
&p&&time datetime=""&日&/time&&/p&
&p&文章正文&/p&
&/article&
2.3 footer元素可以作为其上层父级内容区块或一个根区块的脚注。
address元素 呈现联系信息。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&address元素示例&/title&
&a href=http://***&张三&/a&
&a href=http://***&王二&/a&
&a href=http://***&李四&/a&
&/address&
浏览: 2614 次
来自: 北京做移动端有一段时间，今天有同事问了我 article 和 section 标签的使用，模模糊糊的解释了下，他似懂非懂，有点小尴尬。忽然间觉得自己有必要再翻翻书籍，重温下 html5 的新元素。html5 新增的结构元素，有的经常使用到，有的用不上，当页面禁用样式后，它们的展现跟 div 是没撒差别，有同学可能会说，既然一样，又不影响页面的最终展现，不管是 article 还是 section 能用就好了。如果考虑实际项目针对用户，我也是这么认为的，但作为一个重构仔，我们需要让标签语义化，清晰的结构，更好的 seo，利于特殊终端的阅读(无障碍)，此时 html5 标签的作用就很明显了，并不是说能用就好。于是复习下内容并记录在博客上，顺便分享给大家，也方便自己以后查找。
HTML5 新增结构元素分为主体结构元素和非主体结构元素
主体结构元素： article、section、nav、aside、time
非主体结构元素：header、hgroup、footer、address
一、主体结构元素
article 标签，从语义化上看为文档、页面，其用法如下：
通常是一篇文章、一个页面、一个独立完整的内容模块
一般会带个标题，并放在 header 标签中
article 元素可以互相嵌套
使用频率极高，强调独立性，多注意下与 header 标签的使用。
&h1&是我标签&/h1&
&p&我是段落&/p&
&div&我的内容&/div&
&/article&
&/article&
section&标签，从语义化上看为部分，其用法如下：
用于页面内容的独立分块，往往是文章的一段
通常由内容和标题组成，没有标题的内容不推荐使用 section
使用频率低，强调分段分块。
注：《HTML5与CSS3权威指南》这本书中说明：一个容器需要被定义样式或者脚本定义行为时，推荐用div而非section，不要将section用作设置样式的容器。
&h1&水果&/h1&
&h2&苹果&/h2&
&div&苹果是撒？&/div&
&/article&
&h2&桔子&/h2&
&div&桔子是撒？&/div&
&/article&
&/section&
&!-- article可以看成是一种特殊种类的section元素,它比section更强调独立性 --&
&h1&中国人物&/h1&
&p&三国、两晋、南北朝&/p&
&h2&三国&/h3&
&p&猛将猛将猛将猛将&/p&
&/section&
&h2&两晋&/h3&
&p&猛将猛将猛将猛将&/p&
&/section&
&/article&
nav&标签，从语义化上看为导航，其用法如下：
通常作为页面导航的链接组
侧边栏导航
使用频率高。
&li&&a href=""&菜单1&/a&&/li&
&li&&a href=""&菜单2&/a&&/li&
&li&&a href=""&菜单3&/a&&/li&
aside 标签，从语义化上看为在旁边、侧边，其用法如下：
在 article 标签中使用时，作为主要内容的附属信息部分，如有关的参考资料、名词解释等。
在 article 标签外使用时，作为页面或者站点全局的附属信息部分，如侧边栏、博客的友情链接部分、广告区域等。
使用频率低。
&!-- 在article标签外使用时 --&
&h1&马云是谁&/h1&
&p&马云，男，日出生于浙江省杭州市，中国著名企业家，阿里巴巴集团、淘宝网、支付宝创始人..........&/p&
&h1&参考资料&/h1&
&p&百度网、维基百科...&/p&
&/article&
&!-- 在article标签内使用时 --&
&li&&a href=""&老赵的博客&/a&&/li&
&li&&a href=""&鬼哥的博客&/a&&/li&
&li&&a href=""&彪叔的博客&/a&&/li&
time 标签，从语义化上看为时间，其用法如下：
代表 24 小时中的某个时刻或某个日期
表示时刻时允许带时间差
可定义很多格式的日期和时间
使用频率低。
&time datetime=""&日&/time&
&!-- datetime 属性中日期与时间之间要用"T" 分隔，"T'表示时间 --&
&time datetime="T20:00"&日20:00&/time&
&!-- 时间加上"Z"表示给机器编码时使用 UTC 标准时间 --&
&time datetime="T20:00Z"&日20:00&/time&
二、非主体结构元素
header 标签，从语义化上看为文档的页眉，其用法如下：
一种具有引导和导航作用的结构元素
通常放置在整个页面或者页面内的一个内容区块的标题
一个网页内并没有限制 header 标签的个数
使用频率极高，比较容易理解。
&h1&我是大头&/h1&
&h1&我是脖子&/h1&
&p&我是身体&/p&
&/article&
hgroup&标签，从语义化上看为标题组，其用法如下：
作为 header 标签的子元素
一个内容模块中包括了主标题和至少一个子标题才使用 hgroup
通常会将 h1~h6 元素进行分组
使用频率高。
&h1&我是刘备&/h1&
&h2&我是关羽&/h2&
&h3&我是张飞&/h3&
&/hgrounp&
&p&吕布惊呆了&/p&
&/article&
footer 标签，从语义化上看为文档的脚注，其用法如下：
一个内容块区的脚注
通常内容为联系信息、相关阅读、版权信息等
使用频率高，比较容易理解。
&p&吕布惊呆了&/p&
&li&关于三国&/li&
&li&地图信息&/li&
&li&游戏攻略&/li&
&/article&
address&标签，从语义化上看为地址，其用法如下：
用于文档中呈现的联系信息
通常内容为作者、网站链接、电子邮箱、地址、电话号码等
使用频率低。
&a href=""&作者：张三丰&/a&
&a href=""&地址：武当山&/a&
&a href=""&联系方式：1247&/a&
&/address&
&感谢webapp群的猎巫同学提醒，这个属性其实HTML 4.01就已经有了，这里修正下。
希望本文对大家在 html5 结构标签上的运用有一定的指导，如果发现内容有错误的地方，欢迎大家指正~
参考资料《HTML5与CSS3权威指南》
阅读(...) 评论()
朋友同事同行今天看啥 热点：
HTML5的结构学习(3)，html5结构学习前面学习了HTML5新增的主体结构元素和新增的非主体结构元素, 而这里我们来学习如何去综合的运用这些新增元素。
HMTL5元素的关键就是将显示内容和便签类型紧密相关，提高了代码的语义化和可读性。
我们这里的大纲就是指整个网站内容的大体排版。具体可以分为显示排版和隐式排版两种。
1）排版内容区块
&是指明确使用section等元素创建文档结构，并且每个section都有自己的标题（h1~h6,hgroup）
2）隐式排版内容区块
&是指不明确使用section等元素，而是直接在每个标题下创建自己的内容
3）标题分级
&同一区块中，可以标题要分级别显示。
&不同的标题等级之间内容，要分隔显示。
&显示使用section，隐式自动排在下面。
4）不同的内容区块可以使用相同级别的标题
&比如网站本身标题和里面文章的标题属于不同的区块，我们就可以都是用h1
2.对新结构元素使用样式
因为浏览器兼容性问题我们还是需要告诉浏览器这些元素的一些基本属性。
追加为块级元素：
article, aside, section, dialog,figure,footer,header,legend,nav{
display:block;
html5元素添加样式和之前的元素是一样的。
包括在js中创建元素也是相同的方式：
document.createElement("header");
document.createElement("article");
document.createElement("footer");
这要看想学到什么程度了，如果认真点，一个月绝对可以做到 自己做简单结构的网站。复杂的。。。特别是js，需要时间积累各种知识点的，至少我的经验如此然后要学的话，还是推荐吧html4 、css2学好，因为这才是现在网站的主流啊，现在也只有手机上支持html5 的多点，电脑上想普及html5，至少在中国，还早，因为用 html5，IE至少要ie9，也就是系统至少要是win7. 短时间内不现实。html 和css 本身很简单，只要会一点点英语，学起来非常快。至于js 如果至少要实现各种表单检测，那也很简单，花个晚上研究下就懂了
如果你是新手：1、HTML的沿革；2、HTML的大致结构；3、HTML5的多媒体播放、Canvas、地理定位、本地存储等已经被支持的分支标准下的知识（涉及到很深的javascript知识，特别是Canvas）；4、除了javascript之外，CSS3也是必学的；5、虽然HTML5是个浏览器厂商合伙打到W3C的XHTML2.0制定的标准，但是各个浏览器的支持度还是很不一致的，特别是比较那啥的IE，所以，你还要在学习CSS3的时候深入了解下浏览器对CSS3新属性的支持情况，还有就是随时了解HTML5的支持情况。如果你属性HTML4.X或者XHTML1.X，你可以忽略上述第一二条。不清楚了，再问！祝愉快！
相关搜索：
相关阅读：
相关频道：
&&&&&&&&&&&&&&&&&&
HTML5最近更新1009人阅读
HTML5（30）
1.article元素
article元素代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或独立的插件，或其他任何独立的内容。
article元素是可以嵌套使用的；
article元素用来表示插件；
示例代码如下：
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&article元素&/title&
&h1&HTML5&/h1&
&p&欢迎学习HTML！&/p&
&!--article是可以嵌套的--&
&header&开发者&/header&
&p&Web开发者&/p&
&footer&评论&/footer&
&/article&
&p&这是底部&/p&
&/article&
&!--article是可以内嵌的--&
&h1&这是一个内嵌页面&/h1&
&embed src=&#& width=&600& height=&400&&&/embed&
&/article&
效果如下：
2.section元素
section元素对于网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而不是section。
示例代码如下：
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&section元素&/title&
&!--通常不推荐没有标题内容使用section元素--&
&!--不要与article元素混淆--&
&h1&苹果&/h1&
&p&这是一种水果&/p&
&/section&
&h1&苹果&/h1&
&p&这是一种水果&/p&
&h2&红富士&/h2&
&p&这个苹果很好吃！！&/p&
&/section&
&h2&洛川苹果&/h2&
&p&这个是陕西盛产的苹果！！&/p&
&/section&
&/article&
&!--注意section和article的区别--&
&h1&有很多水果&/h1&
&h2&苹果&/h2&
&p&介绍&/p&
&/article&
&h2&香蕉&/h2&
&p&介绍&/p&
&/article&
&h2&西瓜&/h2&
&p&介绍&/p&
&/article&
&/section&
使用section注意事项：
1.不要将section元素作为设置样式的页面容器；
2.如果article元素，aside元素，nav元素更符合使用条件，那就不要使用section元素；
3.没有标题内容，不要使用section元素。
nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的连接组放进nav元素即可。
nav元素应用场景：
（1）传统导航条；
（2）侧边栏导航；
（3）页内导航；
（4）翻页操作；
示例代码如下：
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&nav元素&/title&
&!--HTML5中不能使用menu元素代替nav元素--&
&li&&a href=&#&&主页&/a&&/li&
&li&&a href=&#&&开发文档&/a&&/li&
&h1&HTML5与JS的历史&/h1&
&ul&&a href=&#&&HTML5的历史&/a&&/ul&
&ul&&a href=&#&&JS的历史&/a&&/ul&
&h1&HTML5的历史&/h1&
&p&........&/p&
&/section&
&h1&JS的历史&/h1&
&p&........&/p&
&/section&
&a href=&#&&删除&/a&
&a href=&#&&修改&/a&
&/article&
&small&版权声明。。。&/small&
4.aside元素
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别与主要内容的部分。
示例代码如下：
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&aside元素&/title&
&h1&HTML5入门&/h1&
&h1&语法&/h1&
&p&下面开始讲解。。。&/p&
&h1&名词解释&/h1&
&p&语法很重要&/p&
&/article&
&h2&评论&/h2&
&li&&a href=&#&&&/a&&/li&
&li&&a href=&#&&第二。。&/a&&/li&
5.time元素与微格式
time元素示例代码：
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&time元素&/title&
&time datetime=&&&&/time&
&time datetime=&T20:00&&&/time&
&time datetime=&T20:00Z&&&/time&
&time datetime=&T20:00+09:00&&&/time&
pubdate元素示例代码：
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&pubdate属性&/title&
&h1&苹果&/h1&
&p&发布日期
&time datetime=&& pubdate=&true&&&/time&
&/article&
github主页：& 。欢迎大家访问！
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1677908次
积分：23312
积分：23312
排名：第284名
原创：623篇
转载：36篇
评论：476条
文章：19篇
阅读：56462
文章：19篇
阅读：34948
文章：11篇
阅读：15431
阅读：40454
文章：60篇
阅读：113434
文章：79篇
阅读：186579
文章：220篇
阅读：680369
文章：51篇
阅读：173332
Android应用：
Github主页:
(1)(7)(10)(7)(5)(4)(7)(7)(5)(15)(4)(8)(10)(4)(24)(29)(10)(22)(33)(106)(130)(79)(132)元素中新增的非主体结构《HTML5系列教程11》
元素中新增的非主体结构《HTML5系列教程11》
HTML5元素在上一篇中我们介绍了元素中新增的主体结构，那么与之对应就是元素中新增的非主体结构了。在HTML5中，非主体结构元素表示逻辑结构或附加信息。本次主要为大家介绍HTML5中新增的几个非主体结构元素的定义及使用方法和例子。1.header元素header元素用于定义HTML文档的页眉，是一种具有引导和导航作用的结构元素。header元素通常表示整个页面或者页面内的一个内容区块的标题。一般情况，一个header元素内嵌一个heading元素（h1~h6）。元素的示例如下图：HTML5中的header元素在这段代码中，h1元素表示该区域内容的标题，nav元素表示一个导航列表，除此之外，header元素的内容还可以是数据表格、搜索表单或相关的logo图片，这也包括我们接下来要介绍的hgroup元素。不过要注意是，header元素应该放在页面的开头，而且可以存在多个。2.hgroup元素hgroup元素用于对header元素标题及其子标题进行分组。在使用header元素时，我们通常会嵌入一个heading（h1~h6）元素，那是因为我们只有一个标题，并且没有子标题。如果header元素的标题下还有子标题，这时候就需要使用hgroup元素对其进行分组。示例代码如下：HTML5中的hgroup元素3.footer元素footer元素用于定义区块的脚注，这个区块可以是article元素或section元素。通常情况下，footer元素会包含创作者的姓名、文档的创建时间、联系方式和版权信息等。示例代码如下图：HTML5中的footer元素4.address元素address元素用于定义文档作者或者拥有者的联系信息，包括文档作者或文档维护者的姓名、网站、电子邮件、联系电话等。如果address元素位于article元素内部，则它表示该文章作者或拥有者的联系信息。一般情况下，address元素应该添加到网页的头部或底部。比如将文章作者的联系方式显示在footer元素中的代码如下图所示：HTML5中的address元素这里要注意一下的如果在footer元素中需要显示联系方式，应该使用address元素，就像上图中的那样。在HTML5元素中新增非主体结构就到这里了。关注最新动态、了解更多精彩资讯请加我们的官方微信：pyyuanxing。谢谢大家的观看，祝大家身体健康、生活愉快。
本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。
百家号 最近更新：
简介: 知天下事，知道你不一样的东西
作者最新文章