博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5学习笔记二
阅读量:4994 次
发布时间: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

你可能感兴趣的文章
929. Unique Email Addresses
查看>>
3.常见的ORM框架
查看>>
Hdu 1326 Box of Bricks
查看>>
常用数据结构算法 : 堆排序
查看>>
Highcharts X轴名称太长,如何设置下面这种样式
查看>>
使用模板类,创建树。使用头文件分离模板类的申明与实现时出错
查看>>
王者的世界:全球十大对冲基金公司传奇
查看>>
Lua相关图书推荐
查看>>
CentOS安装phpMyAdmin
查看>>
JSTL标签
查看>>
RTT之柿饼UI
查看>>
C51 笔记
查看>>
wkhtmltopdf导出html到pdf
查看>>
Flutter 目录结构介绍、入口、自定义 Widget、MaterialApp 组件、Scaffold 组件
查看>>
小记5.8面试
查看>>
关于Windows7下创建Cocos2D-X项目的小问题
查看>>
java之大文件断点续传
查看>>
全文搜索引擎Xapian
查看>>
QRadioButton 使用方法
查看>>
[LeetCode] Exclusive Time of Functions 函数的独家时间
查看>>