html5使用新标签布局,解析html5的新特性之布局新标签（3页）-原创力文档

解析Html5的新特性之布局新标签

笔记本：

创建时间：

标签：tech2012/3/24 14:40html5更新时间：2012/8/22 14:35

我们来介绍一下 5中出现的一些新的标签，这里主要介绍专门用来 的标签，比如：、、、、< ide>、等，下面先分别介绍一下它们的功能含义。

标签

标签定义文档的页眉(介绍信息)，用法：

阿邦 专栏

标签

标签定义导航链接的部分，用法：

• 菜单一
• 菜单二
• 菜单三
• 菜单四

标签

标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分，用法：

标题一

文章段落内容

标签

标签定义外部的内容。

外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。总之，可以理解为article所表示的就是文章内容。用法：

文章内链接
文章内容文章内容文章内容

标签

标签定义article以外的内容。aside的内容应该与article的内容相关，如上图所示，它类似于布局中的辅助侧边栏。用法：

小标题

段落内容段落内容

标签

标签定义section或document的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息，也就是类似于版权信息的东西。用法：

页脚文字，版权信息等

如果要达成上图的效果，整体的Html5代码应该如下：

Html5示范文档

阿邦Dreamweaver专栏-Html5布局示范文档

• 菜单一
• 菜单二
• 菜单三
• 菜单四

内容标题

文章内容

文章版权内容

相关内容

页脚、页面版权内容

完整的Html5代码如上所列，但它只是Html的代码结构，如果让它变成上图那种样式，仍需要 代码支持，这时候可以用到 。

其实我们从这个例子中可以看出，这些所谓的新标签我们以前就用过，而且用法和原来相似，只不过我们的用法是这样的

、

、

等等，只是使用的多了，成了约定俗称的规则，不如就将它们以正式的标签出现在Html5中更加正式，语义也更明确了。