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>