web前端开发基础教程之HTML5页面结构基础

标头部分带有徽标和标题

导航栏

正文内容分为三列

列中的文章和广告块

页脚包含一些作者和版权信息

在确定哪些元素适合页面的这些不同部分之前，让我们考虑一些选项。首先，我们将向您介绍一些新的HTML5语义元素，这些元素可用于帮助划分页面并为文档的结构添加更多含义。

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

该header元素

自然，我们要看的第一个元素是header。该规范将其简洁地描述为“一组入门或导航辅助工具”。

与通常的假设相反，您可以包括一个新的header元素以介绍内容的每个部分。它不仅保留用于页面标题（通常可以用标记

甲header元件可用于包括介绍性内容或导航辅助特定于一个页面的任何单个部分，或适用于整个页面，或两者。

报表广告

虽然header元素经常被放置在页面或部分的顶部，但其定义与位置无关。您网站的布局可能要求文章或博客文章的标题位于内容的左侧，右侧甚至下方。无论使用哪种方法，您仍然可以使用它们header来描述这些内容。

该section元素

您应该熟悉的下一个元素是HTML5的section元素。规范定义section如下：

该section元素表示一个文档或应用程序的通用部分。在这种情况下，一节是内容的主题分组，通常带有标题。

进一步说明，section不应将a用作仅用于样式设置或脚本编写目的的通用容器。如果您无法section用作通用容器（例如，为了实现所需的CSS布局），那么应该使用什么？我们的老朋友，div元素，在语义上是没有意义的。

回到规范的定义，section元素的内容应为“主题”，因此以通用方式包装不相关的内容是不正确的。

section元素可接受用途的一些示例包括：

选项卡式界面的各个部分

“关于”页面的各个部分；例如，公司的“关于”页面可能包括有关公司历史，任务说明和团队的部分

冗长的“服务条款”页面的不同部分

在线新闻站点的各个部分；例如，文章可以分为体育，世界事务和经济新闻等部分

注意：section正确使用

每次将新的语义标记提供给Web设计人员时，都会就什么构成这些元素的正确使用，规范的意图等问题进行辩论。您可能还记得dl在以前的HTML规范中有关适当使用元素的讨论。毫不奇怪，HTML5不能幸免于这种现象，特别是在涉及section元素时。甚至著名的HTML5权威布鲁斯·劳森（Bruce Lawson）也承认section过去使用不正确。为了清楚起见，值得阅读Bruce的文章来解释他的错误。

简而言之：

section是通用的，因此，如果一个更具体的语义单元是合适的（如article，aside或nav），使用，来代替。

报表广告