[html5]学习笔记一 新增的主题结构元素
html5 新增的主体结构元素有:article,section,nav,aside,time,pubdate元素。
1、 article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章,一篇论坛帖子、一段用户评论或独立的插件,或其他任何独立的内容。
例子:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <article> <header><p></p></header> <p></p> <footer><p></p></footer> </article> </body> </html>
article元素是可以嵌套使用的。
例子:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <article> <header><p></p></header> <article> <header></header> <p></p> <footer></footer> </article> <footer><p></p></footer> </article> </body> </html>
article元素可以表示插件。
例子:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <article> <header><p></p></header> <article> <header></header> <p></p> <footer></footer> </article> <footer><p></p></footer> </article> <article> <object> <!--内嵌内容为当前页面--> <embed src="#" width="600" height="400"></embed> </object> </article> </body> </html>
2、section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及标题组成。但section元素并非一个普通的容器元素;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div元素而非section元素。
例子:
<body> <section> <h1>标题</h1> <p>关于该标题的具体描述</p> </section> </body>
注意不要与有着自己完整内容的article元素进行混淆。
例子:
<body> <article> <h1>这是一篇独立文章的标题</h1> <p>这是对于标题的描述或内容</p> <section> <h2>这是小标题1</h2> <p>这是对于小标题1的描述或内容</p> </section> <section> <h2>这是小标题2</h2> <p>这是对于小标题2的描述或内容</p> </section> </article> </body>
article元素可以与section元素互换使用,因为article是一种特殊的section元素,它更强调独立性。
例子:
<body> <section> <h1>这是一篇独立文章的标题</h1> <p>这是对于标题的描述或内容</p> <article> <h2>这是小标题1</h2> <p>这是对于小标题1的描述或内容</p> </article> <article> <h2>这是小标题2</h2> <p>这是对于小标题2的描述或内容</p> </article> </section> </body>
另外如果没有标题内容,不要使用section元素。
3、nav元素是一个可以用作页面导航的连接组,其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素,只需要将主要的,基本的连接组放进nav元素即可。
nav元素应用场景:
传统导航条、侧边栏导航、页内导航、翻页操作
例子:
<body> <nav> <ul> <li><a href="#">主页</a></li> <li><a href="#">开发文档</a></li> </ul> </nav> </body>
4、aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有区别于主要内容的部分。
可以被包含在article中,作为主要内容的附属信息。
<article> <h1>语法(标题)</h1> <p>文章的正文部分</p> <aside> <h1>名词解释</h1> <p>语法:指的是构建语言的一套规则</p> </aside> </article>
可以在article外,在作为页面或站点信息内容的全局部分,例如侧边栏。
5、time元素
例子:
<body> <time datetime="2016-2-8">2016-2-8</time> <!--T表示日期与时间的间隔符--> <time datetime="2016-2-8T20:00">2016-2-8</time> <!--Z表示机器编码使用utc标准时间--> <time datetime="2016-2-8T20:00Z">2016-2-8</time> <!--+9:00表示另一地区的时差,如果本地编码和使用,则不需要--> <time datetime="2016-2-8T20:00+9:00">2016-2-8</time> </body>
6、pubdate属性,布尔值,用在time上,表示文章或整个网页的发布日期。
例子:
<time datetime="2016-2-8" pubdate>2016-2-8</time>
[html5]学习笔记一 新增的主题结构元素的更多相关文章
- [html5]学习笔记一 新增的非主体结构元素
html新增加的非主体结构元素,主要是用来表示附加信息的,包括header,footer,hgroup,address元素. 1.header元素 header元素是一种具有引导和导航作用的结构元素, ...
- html5新增的主题结构元素
article元素 article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容. 它可以是一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的插件. 或其他任何独立的 ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Flutter学习笔记(23)--多个子元素的布局Widget(Rwo、Column、Stack、IndexedStack、Table、Wrap)
如需转载,请注明出处:Flutter学习笔记(23)--多个子元素的布局Widget(Rwo.Column.Stack.IndexedStack.Table.Wrap) 上一篇梳理了拥有单个子元素布局 ...
- Flutter学习笔记(22)--单个子元素的布局Widget(Container、Padding、Center、Align、FittedBox、Offstage、LimitedBox、OverflowBox、SizedBox)
如需转载,请注明出处:Flutter学习笔记(22)--单个子元素的布局Widget(Container.Padding.Center.Align.FittedBox.Offstage.Limited ...
- HTML5学习笔记(三):语义化和新增结构元素
在HTML5之前,使用机器来阅读一个网页是非常困难的,我们使用不同样式的div来标记不同的内容,所以实际上机器无法得知页面的哪个部分是正文,哪个部分是标题,那么在HTML5里,针对这个问题就引入了语义 ...
- HTML5 学习笔记(一)——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
随机推荐
- 7 -- Spring的基本用法 -- 11...
7.11 基于XML Schema的简化配置方式 Spring允许使用基于XML Schema的配置方式来简化Spring配置文件. 7.11.1 使用p:命名空间简化配置 p:命名空间不需要特定的S ...
- strlen sizeof strcat strcpy区别
strlen(p): 能计算出p指向字符串的长度(以当前p的位置开始),不包含终止字符'\0': p可以声明为char* p或者char p[],这两种形式strlen均能正确计算. sizeof ...
- (简单) POJ 1062 昂贵的聘礼,Dijkstra。
Description 年轻的探险家来到了一个印第安部落里.在那里他和酋长的女儿相爱了,于是便向酋长去求亲.酋长要他用10000个金币作为聘礼才答应把女儿嫁给他.探险家 拿不出这么多金币,便请求酋长降 ...
- eclipse创建Maven父子结构Maven项目
1.创建聚合模块 选择菜单项 File—>New—>Other,在弹出的对话框中选择Maven下的Maven Project,然后单击Next按钮,在弹出的New Maven Projec ...
- NULL、nil、Nil、NSNull的区别
标志 值 含义 NULL (void *)0 C指针的字面零值 nil (id)0 Objecve-C对象的字面零值 Nil (Class)0 Objecve-C类的字面零值 NSNull [NSNu ...
- Codeforces#348DIV2/VK CUP 2016
昨天第一次开大小号打cf,发现原来小号提交之后大号在此提交同样的代码会被skipped掉,然后之后提交的代码都不记分,昨天a,b,c都是水题 A 题意:问一个物品最多能被分成多少份,分成的连续两份不能 ...
- MySQL常用命令总结3
id SMALLINT UNSIGNED [AUTO_INCREMENT] PRIMARY KEY, //把id定义为主键且自动排号,每张数据表只有一个主键,不能为NULL,确保记录唯一性 //省略a ...
- Android SQLite 加入自定义函数
SQLite Database 自定义函数实现: //Here's how to create a function that finds the first character of a strin ...
- 关于中值滤波算法,以及C语言实现(转)
源:关于中值滤波算法,以及C语言实现 1.什么是中值滤波? 中值滤波是对一个滑动窗口内的诸像素灰度值排序,用其中值代替窗口中心象素的原来灰度值,它是一种非线性的图像平滑法,它对脉冲干扰级椒盐噪声的抑制 ...
- ecshop--标签数组
$properties 商品属性 array(1) { ["商品属性"]=> array(1) { [178]=> array(2) { ["name&qu ...