HTML5+CSS3网页设计基础教程第3章-创建HTML5.ppt

1、HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第1页第第3章章 创建创建HTML5文档文档本章概述 本章的学习目标主要内容HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第2页本章概述本章概述 为了增强为了增强Web的实用性，的实用性，HTML5引入了许多引入了许多新技术，对传统新技术，对传统HTML文档进行了大幅度的修改，文档进行了大幅度的修改，使得文档结构更加清晰明了、易读，降低了学习难使得文档结构更加清晰明了、易读，降低了学习难度，这样既方便了浏览者的访问，也提高了度，这样既方便了浏览者的访问，也提高了Web的的开发速度。本章讲详细介绍开发速度。本章讲详细介

2、绍HTML5中新增的主体元中新增的主体元素、语义元素，并通过这两大类元素设计一个综合素、语义元素，并通过这两大类元素设计一个综合性强的网页。性强的网页。HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第3页本章的学习目标本章的学习目标l HTML5文档结构文档结构 l HTML5新增的主体标记新增的主体标记l HTML5新增的语义标记新增的语义标记HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第4页主要内容主要内容3.1 认识认识HTML5文档结构文档结构3.2 HTML5元素分类元素分类 3.3 构建主体内容构建主体内容3.4 添加语义模块添加语义模块3.5 本

3、章小结本章小结 HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第5页3.1 认识认识HTML5文档结构文档结构文档标题文档标题HTML5文档的头部区域文档的头部区域HTML5文档的导航区域文档的导航区域HTML5文档的主要内容区域文档的主要内容区域HTML5文档的主要内容区域的侧文档的主要内容区域的侧边导航或菜单区边导航或菜单区HTML5文档的主要内容区域的文档的主要内容区域的内容区内容区以下是一个以下是一个section和和article嵌套嵌套HTML5文档的嵌套区域，可以对某个文档的嵌套区域，可以对某个article区域进行头部和脚部的定义，这样做，可以有非常清晰和严谨的

4、文区域进行头部和脚部的定义，这样做，可以有非常清晰和严谨的文档目录结构关系档目录结构关系HTML5文档的脚部区域文档的脚部区域HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第6页主要内容主要内容3.1 认识认识HTML5文档结构文档结构3.2 HTML5元素分类元素分类 3.3 构建主体内容构建主体内容3.4 添加语义模块添加语义模块3.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第7页3.2 HTML5元素分类元素分类 lHTML5新增了新增了27个元素，废弃了个元素，废弃了16个元素，根据个元素，根据现有的标准规范，下面把现有的标准规

5、范，下面把HTML5的元素分为结构的元素分为结构性元素、级块性元素、行内语义性元素和交互性性元素、级块性元素、行内语义性元素和交互性元素元素4大类。大类。l结构性元素：结构性元素：section,header,footer,nav,article。l级块性元素：级块性元素：aside,figure,code,dialog。l行内语义性元素行内语义性元素：meter,time,progress,video,audio。l交互性元素：交互性元素：details,datagrid,menu,command。HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第8页主要内容主要内容3.1 认

6、识认识HTML5文档结构文档结构3.2 HTML5元素分类元素分类 3.3 构建主体内容构建主体内容3.4 添加语义模块添加语义模块3.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第9页3.3 构建主体内容构建主体内容l3.3.1 标识文章：标识文章：article元素元素l3.3.2 给内容分段：给内容分段：section元素元素l3.3.3 设计导航信息：设计导航信息：nav元素元素l3.3.4 设计辅助信息：设计辅助信息：aside元素元素l3.3.5 设计微格式：设计微格式：time元素元素l3.3.6 添加发布日期：添加发布日期：pubdate

7、属性属性HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第10页3.3.1 标识文章：标识文章：article元素元素l 标签是标签是HTML5新增的元素。新增的元素。article元素代表文元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是论坛帖子、报纸文章、博客条目、引用的内容。它可以是论坛帖子、报纸文章、博客条目、用户评论或者一个独立的插件，或者其他任何独立的内容。用户评论或者一个独立的插件，或者其他任何独立的内容。l除了内容部分，一个除了内容部分，一个article元素通常有自己的标题（一般元

8、素通常有自己的标题（一般放在一个放在一个header元素里面），有时还有脚注。下面以一元素里面），有时还有脚注。下面以一篇博客文章为例来看篇博客文章为例来看article元素的使用。元素的使用。HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第11页3.3.2 给内容分段：给内容分段：section元素元素lsection元素主要用来对网站或应用程序中页面上元素主要用来对网站或应用程序中页面上的内容进行分块。的内容进行分块。section元素通常由标题和内容元素通常由标题和内容组成。但组成。但section元素并不是容器元素，所以不能元素并不是容器元素，所以不能用用CSS来渲染。

9、当一个容器需要直接定义样式或来渲染。当一个容器需要直接定义样式或通过脚本控制行为时，一般使用通过脚本控制行为时，一般使用div元素。元素。HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第12页3.3.3 设计导航信息：设计导航信息：nav元素元素lnav元素是一个可以用来作为页面导航的链接组，其中的元素是一个可以用来作为页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。导航元素链接到其他页面或当前页面的其他部分。l一般情况下，只需要将主要的、基本的链接组放进一般情况下，只需要将主要的、基本的链接组放进nav元元素即可。例如，在页脚中通常会有一组链接，其中放着服

10、素即可。例如，在页脚中通常会有一组链接，其中放着服务条款、首页和版权声明等，这时使用务条款、首页和版权声明等，这时使用nav元素来组织并元素来组织并不适合，而使用不适合，而使用footer最恰当。最恰当。l一个页面中可以拥有多个一个页面中可以拥有多个nav元素，作为页面整体或不同元素，作为页面整体或不同部分的导航。一般地说，部分的导航。一般地说，nav元素适用于以下场景：传统元素适用于以下场景：传统导航条、侧边栏导航条、页内导航、翻页操作。导航条、侧边栏导航条、页内导航、翻页操作。HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第13页3.3.4 设计辅助信息：设计辅助信息：as

11、ide元素元素laside元素表示跟这个页面的其他内容关联性不强或者没元素表示跟这个页面的其他内容关联性不强或者没有关联的内容，一般是一些附属信息。有关联的内容，一般是一些附属信息。aside元素通常用元素通常用来在侧边栏显示一些定义，比如目录、索引、术语表等；来在侧边栏显示一些定义，比如目录、索引、术语表等；也可以用来显示相关的广告宣传、作者的介绍、也可以用来显示相关的广告宣传、作者的介绍、Web应用、应用、相关链接、当前页内容简介等。但不要使用相关链接、当前页内容简介等。但不要使用元素元素标记括号中的文字，因为这种类型的文本被认为是主内容标记括号中的文字，因为这种类型的文本被认为是主内容的

12、一部分。的一部分。laside元素有以下两种使用情景：元素有以下两种使用情景：aside元素作为内容的附属信息部分呈现，这种情况下，元素作为内容的附属信息部分呈现，这种情况下，aside元元素放在素放在article元素中，内容是和当前文章有关的参考资料和名词元素中，内容是和当前文章有关的参考资料和名词解释等。解释等。aside元素作为页面或站点全局的附属信息部分，在元素作为页面或站点全局的附属信息部分，在article元素之元素之外使用。最典型的形式是侧边栏，其中的内容可以是友情链接，外使用。最典型的形式是侧边栏，其中的内容可以是友情链接，博客中其他文章列表、广告单元等。博客中其他文章列表、

13、广告单元等。HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第14页3.3.5 设计微格式：设计微格式：time元素元素l微格式是一种利用微格式是一种利用HTML的的class属性来对网页添加附加属性来对网页添加附加信息的方法。附加信息如新闻事件的发生日期和时间、个信息的方法。附加信息如新闻事件的发生日期和时间、个人电话号码、企业邮箱等。人电话号码、企业邮箱等。HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第15页3.3.6 添加发布日期：添加发布日期：pubdate属性属性lpubdate属性是可选的、布尔值的属性。它可以用到属性是可选的、布尔值的属性。它可以用

14、到time元素上，表示文章或整个网页的发布日期。比如：元素上，表示文章或整个网页的发布日期。比如：2017年年05月月11日日l需要注意的是，需要注意的是，time元素不能直接代表发布日期，只有增元素不能直接代表发布日期，只有增加了加了pubdate属性才代表发布的日期。属性才代表发布的日期。HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第16页主要内容主要内容3.1 认识认识HTML5文档结构文档结构3.2 HTML5元素分类元素分类 3.3 构建主体内容构建主体内容3.4 添加语义模块添加语义模块3.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第3章 创建HT

15、ML5文档第17页3.4 添加语义模块添加语义模块l3.4.1 添加标题块：添加标题块：header元素元素l3.4.2 给标题分组：给标题分组：hgroup元素元素l3.4.3 添加脚注块：添加脚注块：footer元素元素l3.4.4 添加联系信息：添加联系信息：address元素元素HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第18页3.4.1 添加标题块：添加标题块：header元素元素lheader元素是一种具有引导和导航作用的结构元元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容素，通常用来放置整个页面或页面内的一个内容区块的标题，也可

16、以包含其他内容，如数据表格、区块的标题，也可以包含其他内容，如数据表格、搜索表单或相关的搜索表单或相关的logo图片，因此整个页面的标图片，因此整个页面的标题应该放在页面的开头。例如：题应该放在页面的开头。例如：页面标题页面标题HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第19页3.4.2 给标题分组：给标题分组：hgroup元素元素lhgroup元素可以为标题或者子标题进行分元素可以为标题或者子标题进行分组，通常与组，通常与h1h6元素组合使用，一个内元素组合使用，一个内容块中的标题及子标题可以通过容块中的标题及子标题可以通过hgroup元元素组成一组。但是，如果文章只有一

17、个主素组成一组。但是，如果文章只有一个主标题，则不需要标题，则不需要hgroup元素。元素。HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第20页3.4.3 添加脚注块：添加脚注块：footer元素元素lfooter元素可以作为内容块的脚注，如在父级内元素可以作为内容块的脚注，如在父级内容块中添加注释，或者在网页中添加版权信息等。容块中添加注释，或者在网页中添加版权信息等。脚注信息的形式有作者、相关阅读链接及版权信脚注信息的形式有作者、相关阅读链接及版权信息等。息等。HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第21页3.4.4 添加联系信息：添加联系信息：a

18、ddress元素元素laddress元素用来在文档中呈现联系信息，包括元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、文档作者或者文文档作者或文档维护者的名字、文档作者或者文档维护者的网站链接、电子邮箱、真实地址、电档维护者的网站链接、电子邮箱、真实地址、电话号码等。话号码等。address应该不只是用来呈现电子邮应该不只是用来呈现电子邮箱或真实地址，还可以用来展示跟文档相关的联箱或真实地址，还可以用来展示跟文档相关的联系人的所有联系信息。譬如，以下实例展示了一系人的所有联系信息。譬如，以下实例展示了一些博客中某篇文章评论者的名字及在博客中的网些博客中某篇文章评论者的名字及在博客

19、中的网址链接。址链接。HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第22页主要内容主要内容3.1 认识认识HTML5文档结构文档结构3.2 HTML5元素分类元素分类 3.3 构建主体内容构建主体内容3.4 添加语义模块添加语义模块3.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第3章 创建HTML5文档第23页3.5 本章小结本章小结 l为了增强为了增强Web的实用性，的实用性，HTML5引入了许多新技引入了许多新技术，对传统术，对传统HTML文档进行了大幅度的修改，使文档进行了大幅度的修改，使得文档结构更加清晰明了、易读，降低了学习难得文档结构更加清晰明了、易读，降低了学习难度，这样既方便了浏览者的访问，也提高了度，这样既方便了浏览者的访问，也提高了Web的开发速度。本章详细介绍了的开发速度。本章详细介绍了HTML5中元素的分中元素的分类，以及新增的主体元素、语义元素，并通过这类，以及新增的主体元素、语义元素，并通过这两大类元素设计一个综合性强的网页。两大类元素设计一个综合性强的网页。