加载中…
个人资料
大千世界
大千世界
  • 博客等级:
  • 博客积分:0
  • 博客访问:54,195
  • 关注人气:10
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

【HTML5基础NO.8】新增的主体结构元素和非主体结构元素

(2017-11-01 10:50:13)
标签:

article

section

nav

aside

time

分类: html5
一、主体结构元素
1、article元素 
article元素:页面中的一块与上下文不相干的独立内容,如博客中的一篇文章或报纸中的一篇文章;
       1. 代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件,或其他独立的内容。
       2.除了内容部分,一个article元素通常有自己的标题(一般放在一个header元素里),有时还有自己的注脚。
       3.article元素可以嵌套使用,内层的内容在原则上需要与外层的内容相关联。如博客中,针对文章的评论就可以使用嵌套article元素的方式,用来呈现评论的article元素被包含在表示整体内容的article元素里面。
       4.article元素也可以用来表示插件,其作用是使插件看起来好像内嵌在页面中一样。
       5.article元素可以看做是一种特殊的section元素。section强调分块或分段,而article强调独立性。如果一块内容相对来说比较独立、完整的时候,应该使用article,但是如果想将一块内容分成几段的时候,应该使用section元素。div元素变成了一种容器,当使用css样式的时候,可以对这个容器进行一个总体的css样式的套用。 
【HTML5基础NO.8】新增的主体结构元素和非主体结构元素
运行结果
【HTML5基础NO.8】新增的主体结构元素和非主体结构元素
2、section元素 
section元素:页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分;可以与h1、h2、h3、h4、h5、h6等结合使用,标示文档结构;section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素。
        一个section元素通常由内容及标题组成。标题部分位于它的内部。section元素中的内容可以单独存储到数据库中或输出到Word文档中。
*不要与article元素混淆 
*不要将section元素作为设置样式的内容容器(用div) 
*如果article元素、aside元素、nav元素更符合使用条件,那不要使用section元素。 
*没有标题内容不要使用section元素 

3. nav元素 
页面中的导航链接的部分;一个页面中可以拥有多个nav元素,作为整体或不同部分的导航。
nav元素是一个可以用作页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进nav元素,只需要将主要的、基本的链接组放进nav元素即可。 
nav元素应用场景: 
nav的使用场合主要是:
传统导航条、侧边导航条(将页面从当前文章或当前商品跳转到其他文章或其他商品页面上去)、页内导航(在本页面几个主要的组成部分之间进行跳转)、翻页导航(在多个页面的前后页或博客网站的前后篇文章滚动)、也可以是其他认为是重要的基本的导航链接组中;
        在H5中不要用menu元素替换nav元素。menu元素使用在一系列发出命令的菜单上的,是一种交互性的元素(在web应用程序中使用的)。 

4.aside元素 
article元素的内容之外的、与article的内容相关的辅助信息;
aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的应用、侧边栏、广告、导航条,以及其他类似的有区别于主要内容的部分。 
非主体元素 
主要有以下使用方法:被包含在article元素中作为主要内容的附属信息部分,可以是与当前文章相关的参考资料、名词解释等;在article元素之外使用,作为页面或站点全局的附属信息部分,较为典型的形式是侧边栏,其中的内容可以是友情链接,博客中其他文章列表、广告单元等。

5.time元素和pubdate属性
time:日期或时间,或同时表示两者; time元素代表24小时中的某个时刻或某个日期,表示时刻时允许带时差。可以定义多种格式的日期和时间。【HTML5基础NO.8】新增的主体结构元素和非主体结构元素
编码时机器读到的部分在datetime属性里,而元素的开始标记与结束标记中间的部分是显示在网页上的。datetime属性中日期与时间之间用“T”(时间)分隔;Z代表给机器编码时使用UTC标准时间;最后一个加上了时差,表示向机器编码另一地区时间。

          pubdate属性是一个可选的、布尔值属性(boolean值类型,可以设为true、false或继承状态),可以用到article元素中的time元素上,含义是time元素代表了文章(article元素的内容)或整个网页的发布日期。

二、非主体结构元素

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

footer元素 
footer元素可以作为其商城父级内容区块或是一个跟去块的脚注。footer通常包括其相关区块的脚注信息,如作者、相关阅读链接及版权信息等。 

hgroup元素 
hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组,譬如一个内容区块的标题及其子元素算一组。      


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

网页编排规则示例
【HTML5基础NO.8】新增的主体结构元素和非主体结构元素

标签将旁注 (side comments) 呈现为小型文本。
免责声明、注意事项、法律限制或版权声明的特征通常都是小型文本。小型文本有时也用于新闻来源、许可要求。
对于由 em 元素强调过的或由 strong 元素标记为重要的文本,small 元素不会取消对文本的强调,也不会降低这些文本的重要性。

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有