配套课件-HTML5+CSS3网页设计基础教程.ppt

1、第1页第1章 Web开发新时代本章概述 本章的学习目标主要内容第2页本章概述 2010年HTML5推出以来，受到了各大浏览器厂商的支持和广大开发人员的喜爱。2010年，微软IE9预览版在MIX10大会首次公开亮相，工程师在介绍时，从前端结束将Web发展氛围三个阶段：第一个阶段为Web1.0，主流技术是HTML和CSS；第二阶段为Web2.0，主流技术为Ajax应用，如JavaScript/DOM/异步数据请求；而第三阶段应该是即将到来的HTML5+CSS3阶段。2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成并公开发布。这宣告了Web

2、发展正式进入第三个阶段。第3页本章的学习目标 了解什么是HTML5，HTML5和之前版本的HTML有哪些区别；了解世界各大知名浏览器目前的发展策略，为什么它们都不约而同地把支持HTML5当成目前的工作重点；了解为什么开发者今后可以大胆地使用HTML5进行Web网站与Web应用程序的开发，HTML5被正式推广以后之前的Web网站与Web应用程序怎么办；HTML5到底可以解决哪些问题。第4页主要内容1.1 HTML5概述 1.2 HTML5设计原理 1.3 编写第一个HTML5页面 1.4 HTML5页面的特征 1.5 本章小结第5页1.1 HTML5概述 1.1.1 HTML5的目标 1.1.2

3、 HTML5新特性 1.1.3 HTML5深受欢迎的理由 1.1.4 HTML5构成第6页1.1.1 HTML5的目标 HTML5的目标是为了创建更简单的Web程序，书写出更简洁的HTML代码。例如，为了使Web应用程序的开发变得更容易，提供了很多API；为了使HTML变得更简洁，开发出了新的属性，新的元素，等等。第7页1.1.2 HTML5新特性 兼容性 合理性 效率 安全性 分离 简化 通用型 无插件第8页1.1.3 HTML5深受欢迎的理由 世界知名浏览器厂商对HTML5的支持 时代的要求第9页1.1.4 HTML5构成 HTML5主要包括下面这些功能：Canvas（2D和3D）、Cha

4、nnel消息传递、Cross-document消息传送、Geolocation、MathML、Microdata、Server-Send Events、Scalable Vector Graphics（SVG）、WebSocket API及协议、Web Origin Concept、Web Storage、Web SQL database、Web Workers、XMLHttpRequest Level 2。第10页主要内容1.1 HTML5概述 1.2 HTML5设计原理 1.3 编写第一个HTML5页面 1.4 HTML5页面的特征 1.5 本章小结第11页1.2 HTML5设计原理 1.

5、2.1 HTML变迁 1.2.2 HTML5开发动力第12页1.2.1 HTML变迁 HTML最早从2.0版开始的，实际上并没有HTML1.0版官方规范。20世纪90年代，HTML有过几次快速的发展。从1997年到1999年，HTML的版本从3.2到4.0，再到4.01，经历了非常快的发展。在HTML4.01之后，W3C提出了XHTML1.0的概念。到了2000年，Web标准项目的活动开展得如火如荼，开发人员对浏览器里包含的那些乱七八糟的专有特性已经忍无可忍了。XHTML1.0之后是XHTML1.1，而在使用XHTML1.0的时候，还可以把文档标记为HTML。XHTML1和XHTML2都使用X

6、ML错误处理模型，但这个错误处理模型太苛刻了，它不符合“接收时开放”这个法则。第13页1.2.2 HTML5开发动力 在2004年W3C成员内部的一次研讨会上，Opera公司的代表伊恩希克森(Ian Hickson）提出了一个扩展和改进HTML的建议。他建议新任务组可以跟XHTML2并行，但是在已有HTML的基础上开展工作，目标是对HTML进行扩展。但是W3C投票表示反对，因为他们觉得XHTML2才是未来的方向。然后，Opera、Apple等浏览器厂商以及其他一些成员脱离了W3C，成了了WHATWG（Web Hypertext Applications Technology Working G

7、roup，Web超文本应用技术工作组），在HTML的基础上开展工作，向其中添加新东西。这就是我们今天看到的局面：一种格式，两个版本。第14页主要内容1.1 HTML5概述 1.2 HTML5设计原理 1.3 编写第一个HTML5页面 1.4 HTML5页面的特征 1.5 本章小结第15页1.3 编写第一个HTML5页面 1.3.1 搭建上机练习环境 1.3.2 检测浏览器是否支持 1.3.3 使用HTML5编写简单的Web页面第16页1.3.1 搭建上机练习环境 目前，Microsoft的IE（IE9+）浏览器，以及Mozlilla的Firefox与Google的Chrome浏览器等都可以很好

8、地支持HTML5。本书的示例主要运行在Chrome浏览器上，因此，安装Chrome浏览器即可，也可以安装IE、火狐等最新版本的浏览器。第17页1.3.2 检测浏览器是否支持 ALTER语句用于更改数据库以及数据库对象的结构。也就是说，ALTER语句的对象必须已经存在。ALTER语句仅仅是更改其对象的结构，其对象中已有的数据不受任何影响。例如，对于表对象来说，在表中增加一个新列、删除一个列等操作都属于对表结构的更改。在图3-4所示的示例中，使用ALTER语句在ContactDetail表中增加一个productName列，该列用于存储合同明细中的产品名称。然后，使用SELECT语句查看Conta

9、ctDetail表更改后的结果，这时ContactDetail表有6个列组成。第18页1.3.3 使用HTML5编写简单的Web页面 如果数据库或数据库对象不再需要了，那么可以把其删除。删除数据库或数据库对象的结构可以通过使用DROP语句来完成。需要注意的是，删除对象结构包括删除该对象中的所有内容和对象本身。例如，如果删除ContactDetail表，那么不仅仅ContactDetail表结构不再存在了，该表中的所有数据也都自然不存在了。在图3-5所示的示例中，首先使用SELECT语句查看ContactDetail表，这时该表依然存在；然后使用DROP语句删除该表，当再次使用SELECT语句查

10、看该表时，发现该表已经不存在了，出现了208号对象名无效的错误消息。第19页主要内容1.1 HTML5概述 1.2 HTML5设计原理 1.3 编写第一个HTML5页面 1.4 HTML5页面的特征 1.5 本章小结第20页1.4 HTML5页面的特征 1.4.1 使用HTML5结构化元素 1.4.2 使用CSS美化HTML5文档第21页1.4.1 使用HTML5结构化元素 通过研究Web页面发现，如果使用一些带有语义性的标记，可以加快浏览器解释页面中元素的速度，如早期的、元素；HTML5继承了这些元素，并根据用户使用最为频繁的类名称和ID 号不断开发新的标记，因为这些标记能真正体现开发者真实

11、意图所在。下面通过实例说明HTML5是如何使用这些全新的HTML5特征来结构化元素的。第22页1.4.2 使用CSS美化HTML5文档 在支持HTML5新元素的浏览器中，样式化各新增元素变得十分简单，可以对任意一个元素应用CSS，包括直接设置或引入CSS文件。需要说明的是，在默认情况下，CSS会默认元素的display属性值为inline，因此，为了正确地显示设置的页面效果，需要将元素的display属性设置为block。下面通过一个简单示例说明这一点。【例1-4】在页面中设置相关样式，显示一段文章的内容。（详见课文）第23页主要内容1.1 HTML5概述 1.2 HTML5设计原理 1.3

12、编写第一个HTML5页面 1.4 HTML5页面的特征 1.5 本章小结第24页1.5 本章小结 本章是HTML5的概述，从总体上向读者介绍HTML5的一个全局面貌。从总体上来说，HTML5的出现与兴起并非偶然，这是业界专家与工程师们直面过去互联网技术的许多复杂问题，总结许多开发者们在实际项目实践中的经常遇到的问题、习惯性操作、解决方案等的基础上，并根据当前技术发展的需要、设计原理等，基于HTML语言基础之上，制定出来的HTML5标准。本章首先对HTML5进行了概要叙述，简单介绍了HTML5的目标、新特性、受欢迎的原因，以及HTML5文档的构成；其次，简单陈述了HTML5设计原理；接着介绍如何

13、搭建一个编写和运行HTML5的环境，如何编写一个HTML5文档；最后介绍HTML5页面的特征。希望通过本章的学习，读者能够对HTML5有一个总体的认识。第25页第2章 HTML、XHTML、HTML5本章概述 本章的学习目标主要内容第26页本章概述 1993年，HTML首次以草案的形式发布，20世纪90年代是HTML发展速度最快的时期，直到1999年的4.01版。在这个过程中，W3C主要负责HTML规范的制定。HTML4.01发布之后，业界普遍认为HTML已经到了穷途末路，对Web标准的焦点也开始移到了XML和XHTML上，HTML被放在了次要的位置。HTML以HTML为基础，对HTML进行了

14、大量的修改。本章将从总体上介绍HTML5与以往版本的不同，以及HTML5和HTML4之间的区别。第27页本章的学习目标 了解H TML语言的作用、结构和语法 了解XHTML和XML的关系，及XHTML的语法特点 掌握HTML5的语法和元素 掌握HTML5中新增的以及废除的元素 掌握HTML5中新增的和废除的属性 掌握HTML5新增的全局属性 掌握HTML5新增的事件第28页主要内容2.1 HTML基础2.2 XHTML基础2.3 HTML5基础2.4 新增和废除的属性2.5 全局属性2.6 新增的事件 2.7 本章小结第29页2.1 HTML基础 2.1.1 HTML简介 2.1.2 HTML

15、结构 2.1.3 HTML语法第30页2.1.1 HTML简介 HTML是Hypertext Markup Language的缩写，中文翻译为超文本标识语言。使用HTML标签编写的文档称为HTML文档，目前最新版本为HTML 5.0，这是目前使用得最广泛的版本。HTML 4.01已逐步淘汰。第31页2.1.2 HTML结构 HTML文档一般都应包含两个部分：头部区域和主体区域。HTML文档基本结构由3个标签负责组织：、和。其中标签标识HTML文档,标签标识头部区域，而标签标识主题区域。第32页2.1.3 HTML语法 所有标签都包含在“”起止标识符中，构成一个标签如、和等。绝大多数元素都有起始

16、标签和结束标签。起始标签包含元素的名称以及可选属性。元素的属性包含属性名称和属性值两部分，中间通过等号进行连接，多个属性之间通过空格进行分隔。少数元素的属性也可能不包含属性值，仅包含一个属性名称。一般属性值应该包含在引号内。属性是可选的。标签可以相互嵌套。HTML文档所有信息必须包含在标签中，所有元素的元信息应包含在子标签中，而HTML传递信息和网页显示内容应包含在子标签中。第33页主要内容2.1 HTML基础2.2 XHTML基础2.3 HTML5基础2.4 新增和废除的属性2.5 全局属性2.6 新增的事件 2.7 本章小结第34页2.2 XHTML基础 2.2.1 XHTML结构 2.2

17、.2 XHTML语法 2.2.3 XHTML类型 2.2.4 DTD解析 2.2.5 命名空间第35页2.2.1 XHTML结构 下面是Dreamweaver自动生成的一个标准XHTML页面模板文件，包含以下代码：第36页2.2.2 XHTML语法 在文档的开头必须定义文档类型。在根元素中应声明命名空间，即设置xmlns属性。所有标签都必须是闭合的。所有元素和属性都必须小写。所有的属性必须用引号括起来。所有标签都必须合理嵌套。所有属性都必须被赋值，没有值的属性就用自身来赋值。XHTML规范废除了name属性，而使用id属性作为统一的名称。第37页2.2.3 XHTML类型 XHTML文档类型有

18、3种：STRICT（严格类型）、TRANSITIONAL（过渡类型）、FRAMESET（框架类型）。第38页2.2.4 DTD解析 DTD是一套关于标签的语法规则。DTD文件是一个ASCII的文本文件，后缀名为.dtd。利用DOCTYPE声明中的URL可以访问指定类型的DTD详细信息。例如，在XHTML1.0过渡型DTD的URL为http:/www.w3.org/TR/XHTML1/DTD/xhtml1-transitional.dtd第39页2.2.5 命名空间 在XHTML文档中，还有一句常见的代码：xmlns，即XHTML Namespace的缩写，即命名空间。该属性声明了html顶级元

19、素的命名空间，用来定义该顶级元素以及其包含的各级子元素的唯一性。由于XML语言允许用户自定义标签，使用命名空间，可以避免自己定义的标签和别人定义的标签发生冲突。比如，如果两个人定义了一个一模一样的文档，若文件头部没有xmlns命名空间的区分，就会发生冲突，如果在文档头部加上了不同的命名空间，则文档不会冲突。通俗地讲，命名空间就是给文档做一个标签，标明该文档是属于哪个网站的。对于HTML文档来说，由于它的元素是固定的，不允许用户进行定义，所以指定的命名空间永远是http:/www.w1.org/1999/xhtml。第40页主要内容2.1 HTML基础2.2 XHTML基础2.3 HTML5基础

20、2.4 新增和废除的属性2.5 全局属性2.6 新增的事件 2.7 本章小结第41页2.3 HTML5基础 2.3.1 HTML5语法 2.3.2 HTML5元素第42页2.3.1 HTML5语法 HTML5的文件扩展名仍然是.html或者.htm，内容类型仍然为text/html。HTML5的文档类型声明为：。在HTML5中，使用charset属性来指定字符编码，例如：。HTML5力图兼容旧版本的语法。省略引号。第43页2.3.2 HTML5元素 HTML5中引入了新标记元素被分成七大类，如表所示。标记类型说明内嵌在文档中添加其他类型的内容，如audio、video、canvas和ifram

21、e等流在文档和应用的body中使用的元素，如form、h1和small等标题段落标题，如h1、h2和hgroup等交互与用户交互的内容，如音频和视频的控件、button和textarea等元数据通常出现在页面的head中，设置页面其他部分的表现和行为，如script、style和title等短语文本和文本标记元素，如mark、kbd、sub和sup等第44页主要内容2.1 HTML基础2.2 XHTML基础2.3 HTML5基础2.4 新增和废除的属性2.5 全局属性2.6 新增的事件 2.7 本章小结第45页2.4 新增和废除的属性 2.4.1 新增的属性 2.4.2 废除的属性第46页2.

22、4.1 新增的属性 HTML5中新增的属性主要体现在表单属性、链接属性以及其他属性。第47页2.4.1 新增的属性 增加的表单属性属性名称说明autofocusinput、select、textarea和button元素拥有，以指定属性的方式让元素在画面打开时自动获得焦点placeholderinput、textarea元素拥有，提示用户可以输入的内容forminput、output、select、textarea、button与fieldset拥有，声明这些控件属于哪个表单，然后放置在页面上的任何位置，而不是表单之内required表示必填项autocomplete、min、m a x、m

23、u l t i p l e、pattern、step为input元素新增的属性。datalist元素和autocomplete属性配合使用。multiple允许在上传文件时一次上传多个文件formactionformenctypeformmethodformnovalidateformtargetinput和button元素拥有，重载form元素的action、enctype、method、novalidate、target属性novalidate取消提交时进行的有关检查，表单可以被无条件提交第48页2.4.1 新增的属性 增加的链接属性属性名称说明media规定目标URL是为哪种类型的媒介和

24、设备进行优化的，只能在href属性存在时使用hreflangrel为area元素增加的属性，以保持和a、link元素保持一致sizes为link元素增加的属性，可以和icon元素结合使用，指定关联图标的大小target为base元素增加的属性，目的是保持和a元素一致第49页2.4.1 新增的属性 增加的其他属性属性名称说明reversed为ol元素增加的属性，用于指定列表倒序显示charset为meta元素增加的属性typelabel为menu元素新增的属性，label属性为菜单定义一个可见的标注，type属性让菜单可以以上下文菜单、工具条和列表菜单形式出现scoped为style元素增加的属

25、性，规定样式的作用范围async为script元素增加的属性，定义脚本是否异步执行manifest为html增加的属性，开发离线Web应用程序时，与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息sandboxseamlesssrcdoc为iframe元素增加的属性，用来提高页面安全性，防止不信任的Web页面执行某些操作第50页2.4.2 废除的属性 HTML5废除了HTML4中过时的属性，而采用其他属性或其他方案进行替代（详见课文）第51页主要内容2.1 HTML基础2.2 XHTML基础2.3 HTML5基础2.4 新增和废除的属性2.5 全局属性2.6 新增的事件 2.7

26、 本章小结第52页2.5 全局属性 2.5.1 contentEditable属性 2.5.2 designMode属性 2.5.3 hidden属性 2.5.4 spellcheck属性 2.5.5 tabindex属性第53页2.5.1 contentEditable属性 contentEditable属性的主要功能是允许用户在线编辑元素中的内容。contentEditable是一个布尔值属性，可以被指定为true或false。此外，该属性还有个隐藏的inherit状态，属性值为true时，元素被指定为允许编辑；属性值为false时，元素被指定为不可编辑；未指定true和false时，则由

27、inherit状态来决定，如果元素的父元素是可编辑的，则该元素就是可编辑的。第54页2.5.2 designMode属性 designMode属性用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持上文所述的contentEditable属性的元素都变成了可编辑状态。designMode属性只能在JavaScript脚本里被编辑修改。该属性值有两个值：on和off。属性被指定为on时，页面可编辑；被指定为off时，页面不可编辑。第55页2.5.3 hidden属性 在HTML5中，所有的元素都允许使用一个hidden属性。该属性类似于input元素中的hidden元素，功能是通知浏览器是

28、否渲染该元素。但是元素中的内容还是浏览器创建的。也就是说，页面装载后，允许使用JavaScript脚本把该属性取消，取消后该元素变为可见状态，同时元素中的内容也即时显示出来。hidden属性是一个布尔值的属性，当设为true时，元素处于不可见状态；当设为false时，元素处于可见状态。第56页2.5.4 spellcheck属性 spellcheck属性是HTML5针对input（type=text）和textarea元素提供的一个拼写和语法检查属性。该属性取值布尔值，true或者false，书写时需注意，必须明确声明属性值为true或者false。需要注意的是，如果元素的readOnly属性

29、或disabled属性设为true，则不执行拼写检查。第57页2.5.5 tabindex属性 tabindex是开发中的一个基本概念，当不断按Tab键让窗口或页面中的控件获得焦点，对窗口或页面中的所有控件进行遍历的时候，每一个控件的tabindex表示该控件是第几个被访问到的。第58页主要内容2.1 HTML基础2.2 XHTML基础2.3 HTML5基础2.4 新增和废除的属性2.5 全局属性2.6 新增的事件 2.7 本章小结第59页2.6 新增的事件 HTML5中对页面、表单、键盘元素新增了许多事件，见课文的表2-9所示。第60页主要内容2.1 HTML基础2.2 XHTML基础2.3

30、 HTML5基础2.4 新增和废除的属性2.5 全局属性2.6 新增的事件 2.7 本章小结第61页2.7 本章小结 本章从语法上对HTML、XHTML、HTML5进行了深入介绍，方便读者对HTML语言体系的语法有一个深入的了解。首先介绍了HTML语言的基础，分别从HTML语言本身、其结构和语法，进行介绍；然后介绍了HTML和XML发生碰撞结合的产物XHTML的结构、语法、类型、DTD和命名空间等内容；最后详细介绍了HTML5语法，HTML5新增和废除的属性，HTML5新增的全局属性和事件等内容。通过本章的学习，希望读者能熟悉HTML语言的语法结构，能够熟练写出一份完整的HTML5文档。第62

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

32、1 认识HTML5文档结构文档标题HTML5文档的头部区域文档的头部区域HTML5文档的导航区域文档的导航区域HTML5文档的主要内容区域文档的主要内容区域HTML5文档的主要内容区域的侧文档的主要内容区域的侧边导航或菜单区边导航或菜单区HTML5文档的主要内容区域的文档的主要内容区域的内容区内容区以下是一个以下是一个section和和article嵌套嵌套HTML5文档的嵌套区域，可以对某个文档的嵌套区域，可以对某个article区域进行头部和脚部的定义，这样做，可以有非常清晰和严谨的文区域进行头部和脚部的定义，这样做，可以有非常清晰和严谨的文档目录结构关系档目录结构关系HTML5文档的脚部

33、区域文档的脚部区域第67页主要内容3.1 认识HTML5文档结构3.2 HTML5元素分类 3.3 构建主体内容3.4 添加语义模块3.5 本章小结 第68页3.2 HTML5元素分类 HTML5新增了27个元素，废弃了16个元素，根据现有的标准规范，下面把HTML5的元素分为结构性元素、级块性元素、行内语义性元素和交互性元素4大类。结构性元素：section,header,footer,nav,article。级块性元素：aside,figure,code,dialog。行内语义性元素：meter,time,progress,video,audio。交互性元素：details,datagri

34、d,menu,command。第69页主要内容3.1 认识HTML5文档结构3.2 HTML5元素分类 3.3 构建主体内容3.4 添加语义模块3.5 本章小结 第70页3.3 构建主体内容 3.3.1 标识文章：article元素 3.3.2 给内容分段：section元素 3.3.3 设计导航信息：nav元素 3.3.4 设计辅助信息：aside元素 3.3.5 设计微格式：time元素 3.3.6 添加发布日期：pubdate属性第71页3.3.1 标识文章：article元素 标签是HTML5新增的元素。article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内

35、容。它可以是论坛帖子、报纸文章、博客条目、用户评论或者一个独立的插件，或者其他任何独立的内容。除了内容部分，一个article元素通常有自己的标题（一般放在一个header元素里面），有时还有脚注。下面以一篇博客文章为例来看article元素的使用。第72页3.3.2 给内容分段：section元素 section元素主要用来对网站或应用程序中页面上的内容进行分块。section元素通常由标题和内容组成。但section元素并不是容器元素，所以不能用CSS来渲染。当一个容器需要直接定义样式或通过脚本控制行为时，一般使用div元素。第73页3.3.3 设计导航信息：nav元素 nav元素是一个可

36、以用来作为页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。一般情况下，只需要将主要的、基本的链接组放进nav元素即可。例如，在页脚中通常会有一组链接，其中放着服务条款、首页和版权声明等，这时使用nav元素来组织并不适合，而使用footer最恰当。一个页面中可以拥有多个nav元素，作为页面整体或不同部分的导航。一般地说，nav元素适用于以下场景：传统导航条、侧边栏导航条、页内导航、翻页操作。第74页3.3.4 设计辅助信息：aside元素 aside元素表示跟这个页面的其他内容关联性不强或者没有关联的内容，一般是一些附属信息。aside元素通常用来在侧边栏显示一些定义，比如目

37、录、索引、术语表等；也可以用来显示相关的广告宣传、作者的介绍、Web应用、相关链接、当前页内容简介等。但不要使用元素标记括号中的文字，因为这种类型的文本被认为是主内容的一部分。aside元素有以下两种使用情景：aside元素作为内容的附属信息部分呈现，这种情况下，aside元素放在article元素中，内容是和当前文章有关的参考资料和名词解释等。aside元素作为页面或站点全局的附属信息部分，在article元素之外使用。最典型的形式是侧边栏，其中的内容可以是友情链接，博客中其他文章列表、广告单元等。第75页3.3.5 设计微格式：time元素 微格式是一种利用HTML的class属性来对网页

38、添加附加信息的方法。附加信息如新闻事件的发生日期和时间、个人电话号码、企业邮箱等。第76页3.3.6 添加发布日期：pubdate属性 pubdate属性是可选的、布尔值的属性。它可以用到time元素上，表示文章或整个网页的发布日期。比如：2017年05月11日 需要注意的是，time元素不能直接代表发布日期，只有增加了pubdate属性才代表发布的日期。第77页主要内容3.1 认识HTML5文档结构3.2 HTML5元素分类 3.3 构建主体内容3.4 添加语义模块3.5 本章小结 第78页3.4 添加语义模块 3.4.1 添加标题块：header元素 3.4.2 给标题分组：hgroup元

39、素 3.4.3 添加脚注块：footer元素 3.4.4 添加联系信息：address元素第79页3.4.1 添加标题块：header元素 header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含其他内容，如数据表格、搜索表单或相关的logo图片，因此整个页面的标题应该放在页面的开头。例如：页面标题第80页3.4.2 给标题分组：hgroup元素 hgroup元素可以为标题或者子标题进行分组，通常与h1h6元素组合使用，一个内容块中的标题及子标题可以通过hgroup元素组成一组。但是，如果文章只有一个主标题，则不需要hgroup元素。第8

40、1页3.4.3 添加脚注块：footer元素 footer元素可以作为内容块的脚注，如在父级内容块中添加注释，或者在网页中添加版权信息等。脚注信息的形式有作者、相关阅读链接及版权信息等。第82页3.4.4 添加联系信息：address元素 address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、文档作者或者文档维护者的网站链接、电子邮箱、真实地址、电话号码等。address应该不只是用来呈现电子邮箱或真实地址，还可以用来展示跟文档相关的联系人的所有联系信息。譬如，以下实例展示了一些博客中某篇文章评论者的名字及在博客中的网址链接。第83页主要内容3.1 认识HTML5文档结构

41、3.2 HTML5元素分类 3.3 构建主体内容3.4 添加语义模块3.5 本章小结 第84页3.5 本章小结 为了增强Web的实用性，HTML5引入了许多新技术，对传统HTML文档进行了大幅度的修改，使得文档结构更加清晰明了、易读，降低了学习难度，这样既方便了浏览者的访问，也提高了Web的开发速度。本章详细介绍了HTML5中元素的分类，以及新增的主体元素、语义元素，并通过这两大类元素设计一个综合性强的网页。第85页第4章 HTML5表单本章概述 本章的学习目标主要内容第86页本章概述 表单在网页设计中起到了数据采集的功能，即用户输入的信息主要通过表单来接收，然后提交到服务器。通过使用表单，可

42、以采集访问者的信息，如姓名、性别、年龄、职业、联系方式等，也可以用作调查表、留言板等，从而从浏览器端获取需要的信息。访问者和后台的交互主要通过单击按钮来实现，而与前台的交互则通过输入数据或选择选项来实现。HTML5在表单方面增加了许多功能，如增加input输入类型、表单元素、form属性和input属性等。这些属性主要是在总结以往表单常用操作的基础上提炼而来，以使前端设计人员的工作更加高效。第87页本章的学习目标 了解HTML5表单及新增的form属性 掌握新增的form元素 掌握新增的input类型 掌握新增的input属性 熟悉表单验证操作第88页主要内容4.1 新增的form属性4.2

43、新增的form元素 4.3 新增的input类型4.4 新增的input属性4.5 表单验证4.6 本章小结第89页4.1 新增的form属性 4.1.1 autocomplete属性 4.1.2 novalidate属性第90页4.1.1 autocomplete属性 autocomplete属性，可以指定on、off和空值（不指定）这3种值。在不进行指定时，使用浏览器的默认值。设置为on值时，可以显式指定候补输入的数据列表。使用datalist元素与list属性提供候补输入的数据列表，在执行自动完成时，可以将该datalist元素与list属性提供候补输入的数据列表（datalist元素将

44、在后面介绍）。使用datalist元素与list属性提供候补输入的数据列表，在执行自动完成时，可以将该datalist元素中的数据作为候补输入的数据在文本框中自动显示。autocomplete属性的使用方法如下：第91页4.1.2 novalidate属性 form元素的novalidate属性用于在提交表单时取消整个表单的验证，即关闭对表单内所有元素的有效性检查。如果要只取消表单中较少部分内容的验证而不妨碍提交大部分内容，则可以将novalidate属性单独用于form中的这些元素。第92页主要内容4.1 新增的form属性4.2 新增的form元素 4.3 新增的input类型4.4 新增

45、的input属性4.5 表单验证4.6 本章小结第93页4.2 新增的form元素 4.2.1 datalist元素 4.2.2 keygen元素 4.2.3 output元素第94页4.2.1 datalist元素ldatalist元素用于为输入框提供一个可选的列表，用户可元素用于为输入框提供一个可选的列表，用户可以直接选择列表中的某一项预设的项，从而免去了输入的以直接选择列表中的某一项预设的项，从而免去了输入的麻烦。该列表由麻烦。该列表由datalist中的中的option元素创建。如果用户元素创建。如果用户不希望从列表中选择某项，也可以自行输入其他内容。不希望从列表中选择某项，也可以自行

46、输入其他内容。l在实际使用中，如果要把在实际使用中，如果要把datalist提供的列表绑定到某输提供的列表绑定到某输入框，则需要使用输入框的入框，则需要使用输入框的list属性来引用属性来引用datalist元素的元素的id。第95页4.2.2 keygen元素lkeygen元素是密钥对生成器，主要用于验证。用户提交元素是密钥对生成器，主要用于验证。用户提交表单时会生成两个键，一个私钥，一个公钥。其中，私钥表单时会生成两个键，一个私钥，一个公钥。其中，私钥存储在客户端，公钥被发送到服务器。公钥可用于验证用存储在客户端，公钥被发送到服务器。公钥可用于验证用户的客户端证书。户的客户端证书。第96页

47、4.2.3 output元素loutput元素主要用于显示计算结果或脚本输出。元素主要用于显示计算结果或脚本输出。第97页主要内容4.1 新增的form属性4.2 新增的form元素 4.3 新增的input类型4.4 新增的input属性4.5 表单验证4.6 本章小结第98页4.3 新增的input类型 4.3.1 email类型 4.3.2 url类型 4.3.3 number类型 4.3.4 日期检出器类型 4.3.5 search类型 4.3.6 tel类型 4.3.7 color类型第99页4.3.1 email类型 email类型的input元素是一种专门用于输入E-mail地址

48、的文本输入框，在提交表单的时候，会自动验证email输入框的值。如果不是一个有效的E-mail地址，则该输入框不允许提交该表单。第100页4.3.2 url类型 url类型的input元素提供用于输入url地址这类特殊文本的文本框。当提交表单时，如果所输入的内容是url地址格式的文本，则会提交数据到服务器，如果不是url地址格式的文本，则不允许提交。第101页4.3.3 number类型 number类型的input元素提供用于输入数值的文本框。实际使用中，可以设定对所接受的数字进行限制，例如，规定允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不符合限制要求，则会出现错误提示

49、。第102页4.3.4 日期检出器类型 日期检出器(Date Pickers)是网页中经常要用到的一种控件。HTML5提供了多个可用于选取日期和时间的输入类型，即6种日期检出器控件，分别用于选择以下日期格式：日期、月、星期、时间、日期+时间和日期+时间+时区。输入类型HTML代码功能说明date选取日、月、年month选取月、年week选取周和年time选取时间，包括小时和分钟datetime选取时间、日、月、年（UTC时间）datetime-local选取时间、日、月、年（本地时间）第103页4.3.5 search类型 search类型是HTML5中专门用于搜索的。search类型的inp

50、ut元素提供用于输入搜索关键词的文本框。从外观上看，search类型的input元素和普通的text元素只是稍微有区别。search类型提供的搜索框不只是Google或百度的搜索框，而是任意网页中的任意一个搜索框。第104页4.3.6 tel类型 tel类型的input元素提供专门用于输入电话号码的文本框，它并不限定只输入数字，因为很多的电话号码还包括其他字符，如“+”、“-”、“（）”、“）”等，比如086-010-62349797。第105页4.3.7 color类型 color类型的input元素提供专门用于设置颜色的文本框。通过单击文本框，可以快速打开调色器面板，方便用户可视化选择一种