HTML5新增的主要的主体结构和非主体结构以及编排规则

需要掌握的:

1.HTML5中新增的主体结构元素的定义以及使用方法,使用场合.新增的主体结构元素包括article元素,section元素,nav元素以及aside元素.

1.1 article元素 代表文档,页面或应用程序中独立的,完整的,可以独自被外部引用的内容,他可以是一篇博客或报章杂志的文章,一篇论坛帖子,一段用户评论或一个独立的插件,或者其他任何独立的内容.

除了内容部分,一个article元素通常有它自己的标题(一般方法一个header元素里面),有时还有自己的脚注

article 元素可以嵌套使用,内层的内容在原则上需要与外层内容关联.

另外,article元素也可以用来表示插件,它的作用是使插件看起来好像嵌在页面中一样

1.2  section元素

  section元素用来对网站或应用程序中页面上的内容进行分块,一个section元素通常由内容或其标题组成.但section元素并非一个普通的容器元素;当一个荣放弃需要直接定义样式或通过脚本定义行为时,推荐使用div元素而非section.

   section元素中的内容可以单独存储到数据库中或输出到word文档中.(标题位于它的内部,而不是它的前面)

  注意:

  通常不推荐为那些没有标题的内容使用section,可以使用html5轮廓工具来检查页面中是否不包含标题部分的section

 section元素的作用是对页面上的内容进行分块,或者说对文章进行分段,不要将它与表示"有着自己的完整的,独立的内容"的article元素混淆.

 在,HTML5中,section和article可以互换使用,两者的区别:article元素可以堪称是一种特殊种类的section元素,它比section元素更强调独立性.section元素强调分段或分块,而article强调独立性,具体来说,如果一块内容相对来说比较独立,完整的时候,应该使用article元素,如果想把一块内容分成几段的时候,应该使用section元素进行分段.另外,在HTML5中,div元素变成了一种容器,当使用css样式的时候,可以对这个容器进行一个总体的css样式的套用.

另外:在html5中,可以将所有页面的从属部分,譬如导航条,菜单,版权说明等包含在一个统一的页面中,以便统一使用css样式进行装饰.

最后,关于section元素的使用禁忌:

a.不要将section元素用作设置样式的页面容器,因为那是div元素的工作

b.如果article元素,aside元素或nav元素更符合状况,不要使用section元素

c.不要为没有标题的内容区块使用section元素

1.3   nav元素

   nav元素是一个可以用来作为页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分.并不是所有的链接组都要放进nav元素,只需要将主要的,基本的链接组放进nav元素即可.例如,在页脚中通常会有一组链接,包括服务条款,首页,版本声明等.这时使用footer元素最恰当. 一个页面可以拥有多个nav元素,作为页面整体或不同部分的导航.

具体来说,mav元素可以用在以下场合:

a.传统导航条: 现在主流网站上都有不同层级的导航条,用来将当前画面跳转到网站的其他主要页面.可以用,可以用nav元素实现导航条

b.侧边栏导航 : 现在主流博客网站及商品网站上都有侧边栏导航,用来将页面从当前文档或当前商品跳转到其他文章或其他商品页面.可以用nav元素实现侧边栏导航

c. 页内导航 : 可以用nav元素实现页内导航,用来在本页面几个主要组成部分之间跳转

d. 翻页操作 : 可以用多个页面的前后页或博客网站的前后篇文章的滚中.

  除此之外,nav元素也可以用在其他你觉得重要的,基本的导航链接组中.

  注意:在HTML5中不要用menu元素代替nav元素.menu元素是被用在一系列发出命令的菜单上,是一种交互性的元素,或者更确切地说是使用在WEb应用程序中的.

1.4  aside元素

  aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用,侧边栏,广告,导航条,以及其他类似的有别于主要内容的部分

aside元素主要有以下两种使用方法

1)包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的参考资料,名词解释等

2) 在article 之外元素使用,作为页面或站点全局的附属信息部分.最典型的形式是侧边栏,其中的内容可以是友情链接,博客中其他文章列表或广告单元等

1.5 time元素与微格式

   首先来说一下微格式,它是一种利用HTML的class属性来对网页添加诸如新闻事件发生的日期和时间,个人电话号码,企业邮箱之类的附加信息的方法  微格式并不是在HTML5之后才有的,在HTML5之前它就和HTML结合使用了,但是使用过程中在日期和时间的机器编码上出现了一些问题,编码过程中会产生一些歧义.HTML5增加了一种新的元素来无歧义地,明确地对机器编码日期和时间,并且以让人易读的方式来展现,这就是time元素.

time元素代表24小时中的某个时刻或某个日期,表示时刻时允许带时差.它可以定义很多格式的日期和时间.

  比如:

<time datetime="2010-11-13T:00+09:00">

  在编码时机器读到的部分在datatime属性里,而元素的开始标记与结束标记中间的部分显示在网页上.datetime属性中日期与时间之间要用"T"文字分隔分隔,"T"表示时间.时间加上Z字母表示对机器编码时使用UTC标准时间,倒数第一行则加上了时差,表示向机器编码另一地区时间,如果是编码本地时间,则不需要添加时差.

1.6 pubdate 属性

  pubdate属性是一个可选的boolean值的属性,她可以被应用到article元素中的time元素上,意思是time元素代表了文章或者整个网页的发布日期,pubdate属性的使用:

<time datetime = "2010-10-29" pubdate > 2010年10月29日</time>

为什么不能认为time元素就直接表示了文章或网页的发布日期呢?原因是 time元素不仅仅是用来表示发布日期.还可以用来表示另一种含义的日期.

 

2.HTML5中新增的非主体结构元素的定义以及使用方法,使用场合.新增的非主体结构元素包括header元素,hgroup,footer元素以及address元素.

2.1  header元素

  header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他内容,例如数据表格,搜索表单或相关的LOGO图片.

  很明显整个页面的标题应该放在页面的开头,需要强调的一点是,一个网页内并不限制只能有一个header元素,可以拥有多个,可以为每个内容区块加一个header元素

  在HTML5中,一个header元素通常包括至少一个heading(h1-h6)元素,也可以包括hgroup元素,也可以包括其他元素(table或form),根据最新W3C HTML5标准,还可以包括nav元素.

2.2  footer元素

<div id="footer">

  <ul>

     <li>版权信息</li>

    <li>站点地图</li>

    <li>联系方式</li>

 </ul>

</div>

  footer元素可以作为其上层父级内容区块或一个根区块的脚注.footer通常包括其相关区块的脚注信息,如作者,相关阅读链接以及版权信息等.在HTML5出现之前,我们使用div的方式变编写页脚,但是HTML5出现之后,这种方式将不在使用,而是使用更加语义化的footer元素来替代.

原来的:

HTML5:

<footer>

  <ul>

     <li>版权信息</li>

    <li>站点地图</li>

    <li>联系方式</li>

 </ul>

</footer>

  与header 元素一样,一个页面中也不限制只可以用一个footer元素.同时,可以为article元素或section元素添加footer元素

2.3  address元素

  address元素用来在文档中呈现联系信息,包括作者或文档维护者的名字,文档作者或文档维护者的网站链接,电子邮箱,真实地址,电话号码等.address应该不只是用来呈现电子邮箱或真实地址,还可以用来展示跟文档相关的联系人的所有联系信息.

2.4 main元素

  main元素表示网页中的主要内容.主内容区域指网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容.该区域应该为每个网页中所特有的内容,不能包含整个网站的导航条,版权信息,网站LOGO,公共搜索表单等整个网站内部的共同内容.

  每个网页内部只能放置一个main元素.不能将main元素放置在任何article,aside,footer,header或nav元素内部.

  注意:由于main元素不对页面内容进行分区或分块,所以不会对下文所要描述的网页大纲产生任何影响.

 

3.HTML5中应该怎样结合运用这些新增结构元素来合理编排页面总体布局,掌握什么是显式编排,什么是隐式编排,html5分析器是按什么原则来分析页面结构的,以及怎样对这些新增元素使用css样式.

  大纲编排规则

3.1 关于内容区块的编排,可以分为显式编排与隐式

1) 显式编排内容区块

  显示编排是指明确使用section等元素创建文档结构,在每个内容区块内使用标题(h1-h6,hgroup等)

2) 隐式编排内容区块

  所谓隐式编排,是指不明确hi用section等元素,而是分局页面中所书写的各级标题(h1-h6,hgroup) 等自动创建各级内容区块.

3.2 标题分级

  不同标题之间也是有级别的,h1的级别最高,h6的级别最低.隐式编排时按如下规则自动生成内容区块

a. 如果新出现的标题比上一个标题级别低,生成下级内容区块

b.如果新出现的标题比上一个标题级别高或级别相等,生成新的内容区块

 注意:因为隐式编排容易让自动生成的整个文档结构与所想要的文档结构不一样,而且也容易引起文档结构混乱,所以尽量使用显示编排

3.3 不同的内容区块可以使用相同级别的标题

  如:付内容区块与子内容区块可以使用相同级别的标题h1,这样做的好处是: 每个级别的标题都可以单独设计,如果即需要网页的标题,又需要"文章的标题",这样将会带来很大的便利性.

3.6 对新的结构元素使用样式

  因为很多浏览器尚未对HTML5中新增的结构元素提供支持,我们无法知道客户端使用的浏览器是否支持这些元素,所以需要使用CSS追加如下声明,目的是通知浏览器页面中使用的HTML5中新增加元素都是以块方式显示的.

//追加block声明

article,aside,dialog,figure,footer,header,legend,nav,section,main{

display:block;

}

//正常使用样式

nav{float:left;width:20%;}

article{float:right;width:79%;}

  另外IE8及之前的浏览器不支持用CSS的方法来使用这些尚未支持的结构元素,为了在IE浏览器中也能正常使用这些结构元素,需要使用JavaScript脚本,如下:

<script>

document.createElement("header");

document.createElement("nav");

document.createElement("article");

document.createElement("footer");

document.createElement("main");

</script>

//正常使用样式

nav{float:left; width:20%;}

article{float:right;width:79%;}

  IE9之后,这段脚本就不需要了