第章HTM的结构.ppt

教学内容：在HTML5的新特性中，新增的结构元素主要功能就是解决之前在HTML4中Div漫天飞舞的情况，增强网页内容的语义性，这对搜索引擎而言，将更好识别和组织索引内容。合理地使用这种结构元素，将极大地提高搜索结果的准确度和体验。新增的结构元素，从代码上看，很容易看出主要是消除Div，即增强语义，强调HTML的语义化。 第10章 HTML5的结构 教学重点 新增的主体结构元素 新增的非主体结构元素 10.1 新增的主体结构元素 在HTML 5中，为了使文档的结构更加清晰明确，容易阅读，增加了很多新的结构元素，如页眉、页脚、内容区块等结构元素。 article元素可以包含独立的内容项，可以包含一个论坛帖子、一篇杂志文章、一篇博客文章、用户评论等。这个元素可以将信息各部分进行任意分组，而不论信息原来的性质。 10.1.1 article元素 section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素也并非一个普通的容器元素，当一个容器需要被重新定义样式或者定义脚本行为的时候，还是推荐使用Div控制。 10.1.2 section元素 nav元素在HTML5中用于包裹一个导航链接组，用于说明这是一个导航组，在同一个页面中可以同时存在多个nav。 10.1.3 nav元素 aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。 10.1.4 aside元素 除了以上几个主要的结构元素之外，HTML5内还增加了一些表示逻辑结构或附加信息的非主体结构元素。 10.2 新增的非主体结构元素 10.2.1 header元素 header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，header内也可以包含其他内容，例如表格、表单或相关的Logo图片。 10.2.2 header元素 header元素位于正文开头，可以在这些元素中添加h1标签，用于显示标题。基本上，h1标签已经足够用于创建文档各部分的标题行。但是，有时候还需要添加副标题或其他信息，以说明网页或各节的内容。 10.2.3 footer元素 footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。footer元素和header元素使用基本上一样，可以在一个页面中使用多次，如果在一个区段后面加入footer元素，那么它就相当于该区段的尾部了。 10.2.4 address元素 address元素通常位于文档的末尾，address元素用来在文档中呈现联系信息，包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等。address不只是用来呈现电子邮箱或真实地址这样的“地址”概念，而应该包括与文档创建人相关的各类联系方式。 10.3经典习题 1. 填空题 （1）__________元素可以包含独立的内容项，可以包含一个论坛帖子、一篇杂志文章、一篇博客文章、用户评论等。 （2）________元素在HTML5中用于包裹一个导航链接组，用于说明这是一个导航组，在同一个页面中可以同时存在多个________。 2. 上机操作题 利用nav元素创建一个页内导航，如图10.13所示。 *