HTML5基础知识（一）---标签

在HTML5中，Web页面中重新调整了页面规划，这其中新引入了几个新标记。

我们将创建一个简单的Web页面，该页面包含一个Header区、一个Navigation区、一个Article区(包含三个部分)、一个Aside区和一个Footer区，使用这种结构可以清楚地展示HTML5中新引入的标记，并且可以使用它们创建一个结构清晰、代码优雅的页面。

Header区

我们将使用

标记来创建页面中Header区的内容，一般在这部分添加正副标题,当然也可以包含其他的一些重要信息，代码示意如下:

代码清单1.

标记

正标题

副标题

.......

标记中还可以包含

标记，用来对

到

的等级别的标题进行分组，代码如下:

代码清单2.

标记

主标题

子标题

..........

Navigation区

使用

标记创建Navigation区，代码如下:

代码清单3.

标记

• 标题一
• 标题二
• 标题三

Article和Section区

在HTML5出现之前，

标签是我们使用非常频繁的标签，它本身没有任何语义，仅仅是作为布局以及样式化所用。

HTML5新增了

和

标签，其实就是语义化的标签，并且div>section>article，其语义是逐渐增强的，如一段主题性的内容，适用于使用

标签，而若其可以脱离上下文，作为独立的一段内容，则可以使用

标签。

代码清单4.

和

标记

第一板块

新闻一

新闻起因

新闻经过

新闻结果

第二板块

新闻二

新闻一

新闻起因

新闻经过

新闻结果

可以这么认为，

、

、

是特殊的

，能使用

标签的就尽量不要使用

，而

和

等标签之间也是可以相互嵌套的，就如上述代码所示。

Aside区

使用

标记可以创建Aside区，该标记作用是容纳一些补充性内容，这些内容不属于文章的一部分。

代码清单5.

标记

Some Tips

bla bla bla bla....

Footer区

使用

标记来说明页面的页尾信息，代码如下:

代码清单6.

标记

© 2014 by zbx,scau

新增标记

图像元素

使用

元素来包含图像信息，其中还可以包含

，用来对图像的文字补充说明。代码如下所示:

代码清单7.

标记

文字说明

媒体元素

HTML5中新增了

代码清单8.

Your browser does not support the HTML 'audio' element.

source标签的作用就是，若wma格式无法播放，则会尝试播放mp3格式的音乐

代码清单10.标记

?
1

embed标签的元素可以嵌入到页面中的内容，如上述代码所示。

约定俗成

声明

在HTML5中<!DOCTYPE>声明统一为: