[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 ...
随机推荐
- find 路径必须在表达式之前
http://sukaka.blog.51cto.com/379985/906008 把*号引起来.
- POJ 1696 Space Ant
极角排序 每次选择一个最外围的没选过的点,选择的时候需要利用极角排序进行选择 #include<cstdio> #include<cstring> #include<ve ...
- spell checking
Spell checker Description You, as a member of a development team for a new spell checking program, a ...
- python继承的实例
class SchoolMember(object):#定义学校 member=0#默认成员为0个 amount=0#默认学费为0元 def __init__(self,name,age,sex):# ...
- swift新特性(__nullable和__nonnull
http://www.mamicode.com/info-detail-923593.html 最近在看老师写代码的时候经常遇到两个陌生的关键字,但是当我在我的电脑上敲得时候就是敲不出,后来才知道这是 ...
- 10.8.5如何升级(app store 出错 请稍后重试 100)
出现问题:苹果以前的老版本,OS X 10.8或是10.8.5在当年提示你升级,你又任性没升级的时候,拖过那阵,你再想升级,就是各种报复.进app store下载或是更新东西都是弹出app stpre ...
- 【转】Linux正则表达式使用指南
正则表达式是一种符号表示法,用于识别文本模式.Linux处理正则表达式的主要程序是grep.grep搜索与正则表达式匹配的行,并将结果输送至标准输出. 1. grep匹配模式 grep按下述方式接受选 ...
- ftp_get_file_and_directory
class DirectoryItem { public Uri BaseUri; public string AbsolutePath { get { return string.Format(&q ...
- tap是什么意思
分光是数据通过光纤传输:分路是数据通过网线传输.粗浅的说,Tap的概念类似于“三通”的意思,即原来的流量正常通行,同时分一股出来供监测设备分析使用. 其实这只是最简单的Tap的概念,目前的技术发展已经 ...
- [oracle]Oracle角色管理
假如我们直接给每一个用户赋予权限,这将是一个巨大又麻烦的工作,同时也不方便DBA进行管理.通过采用角色,使得: 权限管理更方便.将角色赋予多个用户,实现不同用户相同的授权.如果要修改这些用户的权限,只 ...