article
代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章,一篇论坛帖子、一段用户评论或独立的插件,或其他任何独立的内容。
article元素
是可以嵌套使用的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for article</title>
</head>
<body>
<article>
<header>
<h1>这是一个头部</h1>
<p>我是底部的注解</p>
</header>
<!--嵌套使用的article-->
<article>
<header>
<h1>作者</h1>
</header>
<p>评论</p>
<footer>
time
</footer>
</article>
<footer>
这是底部
</footer>
</article>
<!--提供插件作用的article-->
<!--递归显示页面-->
<article>
<h1>这是一个内嵌页面</h1>
<object>
<embed src = "#" width = 600 height = 400></embed>
</object>
</article>
</body>
</html>
显示效果:
section
section
元素用于对网站或应用程序中页面上的内容进行分块
。一个section
元素通常由内容及其标题组成。但section
元素并非一个普通的容器元素;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div
而非section
元素。
用法有以下几点需要注意:
- 不要将
section
元素作为设置样式的页面容器 - 如果
article
元素、aside
元素、nav
元素更符合使用条件,那不要使用section
元素 - 没有标题内容不要使用
section
元素
nav
nav
元素是一个可以用作页面导航的连接组,其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav
元素,只需要将主要的、基本的连接组放进nav
元素即可。
nav
元素应用场景:
- 传统导航条
- 侧边栏导航
- 页内导航
- 翻页操作
html中导航栏
:
<div>
<ul>
<li><a href="#"></a>
<li><a href="#"></a>
<li><a href="#"></a>
</ul>
</div>
html5中导航栏
:
<nav>
<ul>
<li><a href="#"></a>
<li><a href="#"></a>
<li><a href="#"></a>
</ul>
</nav>
另外:不要用menu元素代替nav元素进行使用,加为menu元素更多使用在交互命令菜单之中,而不是导航。
aside
aside
元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有区别于主要内容的部分。
time元素与微格式
- 微格式
自用
html5
元素的class
属性添加附属信息的格式附加的信息可以是发布时间,电话号码等等
微格式并不是html5
才出现,在之前的html
之中已经有了使用,但是在对时间的编译上会出现错误
,歧义
。而html5
新增的time
元素改变了这一点·
time
元素用法如下
<time datetime="2017-07-29">2017-07-29</time>
<time datetime="2017-07-29T20:00">2017-07-29</time> #T代表时间
<time datetime="2017-07-29T20:00Z">2017-07-29</time> #Z代表UTC时间
<time datetime="2017-07-29T20:00+09:00">2017-07-29</time> #'+09:00'代表时差
pubdate
属性
boolean
类型,用于time元素代表当前时间为文章的发布时间