HTML5学习_day11(1)--HTML新标签

一.<article></article>

用法：定义了独立的内容，内容通常是一篇帖子，一篇博客，一篇短文，杂志，新闻文章，一条完整的回复，评论等
内部可以使用header,footer,section,article标签
提示：
每一个article标签的内部结构应该是相似的。

<section></section>

用法：是界面进行分区，元素通常可由标签和内容组成
注意：
内容一般宝航一个标签h1-h6，可以包含article,嵌套section

section和article区别
1.article侧重于一篇独立的文章或一篇完整的文章
2.section侧重于对一个页面内容进行分区
如果想表达一块独立完整的文章我们就用article
如果想把一块区域分成几部分我们就用section

H5之前
<span style="white-space:pre"> </span><div>
<img src="" alt="" />
<h2></h2>
</div>
H5之后
<span style="white-space:pre"> </span><section>
<img src="" alt="" />
<h2></h2>
</section>

nav标签

用法：定义页面上的导航条

<span style="white-space:pre">		</span><nav>
<ui>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ui>
</nav>

aside标签(非主要内容 类似左边的左边的链接  或者一些其他元素  类似淘宝物品展示时左边的广告)
用法：定义了当前页面的附属信息，通常aside元素来渲染侧边栏。
使用范围：
可以显示广告宣传，作者介绍，WEB应用，相关链接，当前内容简介

<span style="white-space:pre">		</span><article>
<header>
<h1>电影1</h1>
<p>电影描素</p>
插入无关内容
<aside>电影介个多少等</aside>
</header>
</article>

header标签

主要用于article元素定义的文档头部信息(如文章标题)该元素内部可以包含h1-h6,hgroup,p,span等，还可以放一些logo信息，导航类信息

<header>
logo
</header>

hgroup标签
组织多个h1-h6这样标题元素，只能放元素
<span style="white-space:pre"> </span><hgroup>
<h1>蓝欧</h1>
<h3>让教育回归本质！</h3>
</hgroup>

footer标签

该元素定义文档的页脚信息，通常包含文档的版本信息，作者授权信息（作者信息一般都放到address标签里面）

<span style="white-space:pre">		</span><fotter>
版权信息
<address>作者信息</address>
</fotter>

figure标签

它表示一个自我独立的内容区域，通常包含一个标题说明(figcaption标签)，内容可以使图片，图标，代码片段，或者是跟主内容相关的图解，他可以放到主内容布局里面，也可以放到外面

figcaption标签

通常放在figure标签里面，用来定义相关内容的标题

<span style="white-space:pre">		</span><figure>
<figcaption>图2.风景画</figcaption>
<img src="" alt="" />
</figure>

<figure>
<figcaption>代码片段</figcaption>
<pre>
for(int i=0;i<10;)
</pre>
</figure>