《HTML5的结构》PPT课件

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