WSG6（1）

1、一个结构必须展现出坚实，有用和美丽的三个特质。

• 马库斯Vitruvius Pollio

2、页面结构语义
指定常见类型的页面区域，如页眉，页脚和导航区域。

编码人员不需要创建许多独特的ID来包含这些常见的页面元素，而是可以直接使用新元素并对其进行设置。这种在页面区域布局中长期实践的规则化使盲人自动化系统（如搜索引擎和浏览器）更容易查找，突出显示或跳过页面上的结构元素。

除了长期的HTML页面结构的标签，如和，在HTML5我们现在有这些新的标签来丰富页面元素的描述：

标题：定义页面的标题区域或节或文章的标题。页面标题通常包含导航元素（

）。文章，部分和旁白都可以包含自己的标题区域。
导航：设计为包含主要导航元素的元素。这些通常是主要网站部分的全球导航链接，或导航到本地分部主题。
主要：设计为包含页面的所有主要内容元素。该标签在屏幕阅读器网页浏览器的辅助功能中很有用，因为它允许读者直接跳转到页面内容。它也可以使搜索引擎标记页面的中心内容。
除此之外：该

元素有两个主要用途：作为页面布局容器，如用于导航的侧栏，或用于其他内容“离开”主页面内容。一个

元素也可以用来指定与页面的主要内容相关的括号内容相关内容，如在“边栏”文章或注释中。
页脚：

元素通常标记页面的结尾，通常包含有关网站的一般信息，版权或其他日期信息以及联系信息。该

元素还可以用在章节或文章的末尾，以便保存章节或文章末尾通常列出的脚注，参考书目或其他材料。

Page structure semantics �页面结构语义

Header
Navigation
Main
Aside
Footer

，常包

3、HTML5中的新内容语义元素

文章：一个独立或自立的内容块。设计作为一种手段来指定可能在不同页面或网站上重复使用的内容块，并且在其原始上下文之外仍然是独立和可理解的。请注意，既

不要使用

元素也不要仅用于视觉样式或布局页面上的内容。

如果您只需要一个容器将CSS样式应用于页面区域，请使用该元素。
旁白：内容与主要内容有关，但与主要内容叙述不同。在印刷出版物旁边通常被分开作为“边栏”文章。一个

元素也可以用来指定页面布局的侧边栏列。
详细信息：一个新的元素，用于指定可以被披露或隐藏的解释性内容，如由JavaScript驱动的弹出式注释。点击以透露详情; 再次点击以隐藏笔记。看到相关的

元素。
图：用于单个图形或一组紧密相关的图形（如插图，照片，图表等）的容器。
Figcaption：指定图形的标题。该

元素应嵌套在相关

元素中。
标记：定义标记或突出显示的文本或为其他语义目的而区分的文本。
章节：定义文档的一部分。这是一个故意宽泛的定义，主要由作者决定。一节可能只是一段或两段，或者整章。
摘要：与弹出

元素关联的可见文本。

和

元件用于弹出的解释性说明，通常是由JavaScript控制。用户点击一个摘要，一个

元素与解释性文本一起出现，然后当用户再次单击时，详细信息文本消失。
时间：定义日期（通常以yyyy-mm-dd格式）或时间（24小时制）。例如：

Curtain time for the play is 20:00.

The first performance of the play is on 2016-05-15, 20:00.

画布：该元素允许您指定一个网页的矩形区域，其中通过JavaScript或其他逻辑编程进行脚本控制 - 您可以创建高度交互式的图形和动画，包括交互式3D对象的未来可能性。到目前为止，元素已经成为一种有趣的可能性，除了古怪的图形演示和粗糙的动画之外，其实际应用很少。随着最近对Adobe Flash Professional CC中的画布交互性的支持，我们可能会看到更多有用的互动内容，它利用了元素中固有的可能性的优势，这次是Flash之类的专有文件格式。
视频和音频： HTML5包含将音频和视频文件嵌入到网页中的标准方法，无需Adobe Flash等专有浏览器插件。不幸的是，HTML5视频仍在进行中，对各种视频格式（.mov，.ogv，.m4v和其他格式）的点击式浏览器支持可能会迫使您以多达三种不同的文件格式对每个视频进行编码确保它可以在主流浏览器（Chrome，Firefox和Internet Explorer）上播放，并且在您的页面上添加JavaScript以测试其他浏览器中是否缺少视频支持。我们目前的建议是坚持从Vimeo或YouTube嵌入视频，直到HTML5视频的浏览器支持更广泛，更一致。
SVG：可缩放矢量图形（SVG）由以xml文本格式描述为xy坐标和曲线的几何形状组成。因为它们是矢量图形，所以SVG可以非常紧凑 - 考虑Adobe Illustrator文件（矢量图形的专有形式），而不是Adobe Photoshop或由像素网格组成的jpeg位图文件。在JavaScript控制下，SVG也可以是动画和交互式的。SVG是HTML5的标准组件，并且在主流浏览器中得到广泛支持，但与jpeg和png格式的图形相比，它仍然很少被使用。有关Web图形格式的更多信息，请参见第8章“图形设计”。

Content semantic�內容语义