博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5学习笔记二
阅读量:4997 次
发布时间:2019-06-12

本文共 3468 字,大约阅读时间需要 11 分钟。

主体结构元素:section、article、nav、aside

【注】内容区块:是指将页面按逻辑进行分割的单位。例如对于书籍来说,章、节都可以成为内容区块;对于博客来说,导航菜单,文章正文,文章评论等每一个部分都可以称为内容区块。

article:可独自被外部引用的内容,可以是一篇博文,或报刊中的文章、一片论坛帖子。

View Code

苹果

发表日期:

苹果 ,植物类水果,多次花果...(“苹果”文章正文)

评论

发表者:陆凌牛

我喜欢苹果,我最喜爱的品种是红富士。

 

 

 

section:此元素通常有内容及其标题组成,但section元素并非一个普通的容器元素,当一个容器需要被定义样式或javascript定义行为时,推荐使用div而非section,

              或者这样理解:section元素中的内容可以单独存储到数据库中或输出到word文档中

    *通常不推荐为那些没有标题的内容使用section 

也许很多人会将section和article两者混淆,下面贴段代码帮助理解。

View Code

苹果

苹果 ,植物类水果,多次花果...

红富士

红富士是从普通富士的芽(枝)变中选育出的着色系富的统称...

国光

国光苹果品,又名小国光、万寿。原产美国,1600年发现的偶然实生苗...

 

在上述代码中,内容首先是一段独立的、完整的内容,因此使用article元素。该内容是一篇关于苹果的文章,该文章分为3段,每一段都有一个独立的标题,因此使用了两个section。

在HTML5里,section元素强调的是分段或分块,而article强调独立性

section元素的使用禁忌:

1)不要将section元素用作设置样式的页面容器,那是div元素的工作。

2)如果article元素、aside元素或nav元素更符合使用条件,就不要使用section元素。

3)不要为没有标题的内容区块使用section元素。

 

nav:用作页面导航的链接组。

View Code

版权所有:陆凌牛

 

使用场合传统导航条、侧边栏导航、页内导航、翻页操作。

aside:用来标示当前页面或文章的附属信息部分。

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

View Code

第四节 词法闭包

lambda表达式可以创建词法闭包...(文章正文)

 

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

 

非主体结构元素:header、hgroup、footer

header:通常用来放置整个页面或页面内的一个内容区块的标题,当然也可以包含其他内容,例如数据表格,搜索表单,相关logo等。

网页标题

文章标题

文章正文

 

强调:一个网页内并未限制header元素的个数!在HTML5规范中,一个header元素通常包括至少一个heading元素(h1-h6),也可以包括hgroup元素。

hgroup:将标题及其子标题进行分组的元素。hgroup通常会将h1~h6元素进行分组,如果文章只有一个主标题,就不需要hgroup元素。

View Code

文章标题

文章正文

 

如果有多个标题,则如下所示:

View Code

文章主标题

文章子标题

文章正文

 

footer:作为其上层父级内容区块或一个根区块的脚注。通常包含其相关区块的脚注信息,如作者、相关阅读链接及版权信息等。与header一样,页面并未限制footer的个数。

转载于:https://www.cnblogs.com/w3develop/archive/2013/04/27/3046665.html

你可能感兴趣的文章
smartctl工具应用(转载整理)
查看>>
控件数据绑定总结
查看>>
HTTP协议
查看>>
Vue 框架-09-初识组件的应用
查看>>
.Net core 在类库中获取配置文件Appsettings中的值
查看>>
[转载]sublime用法精华
查看>>
《甄嬛传》影评(整理)
查看>>
数的位数
查看>>
MySQL合并多行
查看>>
[openstack] RDO Quickstart
查看>>
[转载]struts2 中的 addActionError 、addFieldEr
查看>>
[转载]我的PMP复习备考经验谈(上篇)—— 一本关于PMP备考的小指南
查看>>
Mysql命令集
查看>>
记java应用linux服务单个CPU使用率100%分析
查看>>
将文件字节输出流写入到文本中
查看>>
Linux编程之给你的程序开后门
查看>>
Ubuntu下Hadoop的安装和配置
查看>>
VS2010中生成遇到的 web.config 问题
查看>>
Nginx安装部署(反向代理与负载均衡)
查看>>
2018年最新小程序一键智能生成平台限时限量销售!
查看>>