第4章---使用HTML5结构标签.ppt

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,4.1,构建,HTML 5,页面主体内容,在,HTML 5,页面中，为了使文档的结构更加清晰明确。新增了几个与页眉、页脚、内容区块等文档结构相关联的文档结构标签。在本节中将向读者详细介绍,HTML 5,中在页面的主体结构方面新增的结构标签。,标签标识,文章,网页中常常出现大段的文章内容，通过文章结构元素可以将网页中大段的文章内容标识出来，使网页的代码结构更加整齐。在,HTML5,中新增了,标签，使用该标签可以在网页中定义独立的内容，包括文章、博客和用户评论等内容,。,标签标识,章节,在网页文档中常常需要定义章节等特定的区域。在,HTML5,中新增了,标签，该标签用于对页面中的内容进行分区。一个,section,元素通常由内容及其标题组成,。,标签标识导航,导航是每个网页中都包含的重要元素之一，通过网站导航可以在网站中各页面之间进行跳转。在,HTML 5,中新增了,标签，使用该标签可以在网页中定义网页的导航部分。,标签标识辅助,内容,侧边结构元素可用于创建网页中文章内容的侧边栏内容。在,HTML5,中新增了,标签，,标签用于创建其所处内容之外的内容，,标签中的内容应该与其附近的内容相关。,标签标识文章发布,日期,微格式是一种利用,HTML,的,class,属性来对网页添加附加信息的方法，附加信息如新闻事件发生的日期和时间、个人电话号码、企业邮箱等。微格式并不是在,HTML5,之后才有的，在,HTML5,之前是它就和,HTML,结合使用了，但是在使用过程中发现在日期和时间的机器编码上出现了一些问题，编码过程中会产生一些歧义。,HTML5,新增了,标签，通过该标签可以无歧义地、明确地对机器的日期和时间进行编码，并且以让人易读的方式展现出来。,标签用于表示,24,小时中的某个时间或某个日期，当使用,标签表示时间时，允许设置带有时差的表现方式。它可以定义很多格式的日期和,时间。,除了以上几个主要的结构元素之外，在,HTML 5,中还新增了一些表示逻辑结构或附加信息的非主体结构元素。,4.2,添加语义模块,标签添加标题,块,标签是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，如数据表格、搜索表单或相关的,logo,图片，因此整个页面的标题应该放在页面的开头,。,标签为标题,分组,标签可以为标题或者子标题进行分组，通常它与,至,标签组合使用，一个内容块中的标题及子标题可以通过,标签组成一组。但是，如果文章只有一个主标题，则不需要使用,标签。,标签添加页脚,HTML 5,中新增了,标签，,标签中的内容可能作为网页或文章的注脚，如在父级内容块中添加注释，或者页中添加版权信息等。页脚信息有很多形式，如作者、相关阅读链接及版权信息等。,标签添加联系,信息,HTML 5,中新增了,标签，,标签用来在,HTML,文档中定义联系信息，包括文档作者、电子邮箱、地址、电话号码等信息,。,最终文件：光盘,最终文件,第,4,章,4-3.html,视频：光盘,视频,第,4,章,4-3.swf,HTML 5,中新增的文档结构元素非常适合制作文章或博客类的网站页面。通过使用的,HTML 5,的结构元素，,HTML 5,的文档结构比大量使用,标签的,HTML,文档结构清晰、明确了很多。本节将综合使用前面所介绍的,HTML 5,结构元素制作一个文章页面。,实战练习,制作文章页面,4.3,制作文章页面,本章重点向读者介绍了,HTML 5,新增的各种文档结构标签的作用与使用方法，通过在,HTML,文档中使用文档结构标签可以使,HTML,文档的结构层次更加清晰。完成本章内容的学习，读者需要理解,HTML 5,结构标签的作用及使用方法。,4.4,本章小结,