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>