《Web前端开发》课程理论教学部分 第五讲:认识HTML5 学时计划:2学时理论,0学时实验 (无实验教学内容) 教学大纲: 1、HTML简介 2 3、HTML5新特征 4、创建HTML5网站和网页 5、现场演示:使用HTML5的应用 6、讨论与思考 HTML5规范已经发布,各浏览器厂商更是纷纷推出支持HTML5 规范的浏览器。 Firefox、 Opera、 Chrome、IE等浏览器已很好地支 持各种HTML5规范 HTML5时代到来了! 本讲从发展历程着手详细介绍HTML,并重点介绍HTM5的概念、 优势、新特征,让读者对HTML5有一个全面的了解。在此基础上, 尽量详细和系统的介绍HTML5涉及的内容体系,对深入学习HTML5 奠定基础。 本讲的最后,介绍并向读者演示使用HTML5开发的典型网站, 让读者在实际的应用场景中体验HML5的优秀特征,加深对HTML5 的认识。 HTML筒介 1.1Web技术的时间点 1991年:HTML 1994年:HTML2 1996 F: CSS 1+JavaScript 1997年:HTML4 1《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51 xuewebcn
1 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 《Web 前端开发》课程理论教学部分 第五讲：认识 HTML 5 学时计划：2 学时 理论，0 学时 实验 （无实验教学内容） 教学大纲： 1、HTML 简介 2、HTML 5 3、HTML 5 新特征 4、创建 HTML 5 网站和网页 5、现场演示：使用 HTML 5 的应用 6、讨论与思考 HTML 5 规范已经发布，各浏览器厂商更是纷纷推出支持 HTML 5 规范的浏览器。Firefox、Opera、Chrome、IE 等浏览器已很好地支 持各种 HTML 5 规范。 HTML 5 时代到来了！ 本讲从发展历程着手详细介绍HTML，并重点介绍HTML 5的概念、 优势、新特征，让读者对 HTML 5 有一个全面的了解。在此基础上， 尽量详细和系统的介绍 HTML 5 涉及的内容体系，对深入学习 HTML 5 奠定基础。 本讲的最后，介绍并向读者演示使用 HTML 5 开发的典型网站， 让读者在实际的应用场景中体验 HTML 5 的优秀特征，加深对 HTML 5 的认识。 一、HTML 简介 1.1Web 技术的时间点 1991 年：HTML 1994 年：HTML 2 1996 年：CSS 1+JavaScript 1997 年：HTML 4
1998年:CSS2 2000年: XHTML1 2002年:使用DIV+CSS进行网页布局 2005年:AJAX 2009年:HTML5 1.2HTML5的诞生 HTML5的发展其实是HTML、CSS、 JSApi的共同发展。 HTML标准自1999年12月发布HTM4.01后,后继的HTM5和其 它标准被束之高阁。为了推动Web标准化运动的发展,一些公司联合 起来,成立了一个叫做 Web Hypertext application Technology Working group(Web超文本应用技术工作组,简称 WHATWG)的组织。 WHATWG致力于Web表单和应用程序的技术研究和标准化推进工 作,而W3C( World wide Web Consortium,万维网联盟)则专注于 TML2.0的研究和标准制定。在2006年, WHATWG和W3C双方决定 进行合作,共同创建新版本的HTML,即HTML5。 HTML5草案的前身为 Web applications1.0,于2004年被 WHAT阳G提出,于2007年被W3C接纳,并成立了新的HTML工作团队。 HTML5的第一份正式草案于2008年1月22日公布,但是HTML5 仍处于完善之中。目前 Firefox、 Chrome、 Opera、 Safari(版本4 以上)、 Internet Explorer(版本9以上)已开始支持HTML5技术。 2012年12月17日,万维网联盟(W3C)正式宣布凝结了大量网 络工作者心血的HTM5规范已经正式定稿。根据W3C的发言稿称: “HTML5是开放的Web网络平台的奠基石 关于浏览器对HTML5、CSS3的支持情况,可以通过访问网站 http://htm15test.com来进行详细查看。 二、HTML5 2.1什么是HTML5? HTML5将成为HTML、 XHTML以及 HTML DOM的新标准。 HTML5仍处于完善之中。 2《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
2 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 1998 年：CSS 2 2000 年：XHTML 1 2002 年：使用 DIV+CSS 进行网页布局 2005 年：AJAX 2009 年：HTML 5 1.2HTML 5 的诞生 HTML 5 的发展其实是 HTML、CSS、JSApi 的共同发展。 HTML 标准自 1999 年 12 月发布 HTML4.01 后，后继的 HTML5 和其 它标准被束之高阁。为了推动 Web 标准化运动的发展，一些公司联合 起来，成立了一个叫做 Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组，简称 WHATWG）的组织。 WHATWG 致力于 Web 表单和应用程序的技术研究和标准化推进工 作，而 W3C（World Wide Web Consortium，万维网联盟）则专注于 XHTML 2.0 的研究和标准制定。在 2006 年，WHATWG 和 W3C 双方决定 进行合作，共同创建新版本的 HTML，即 HTML 5。 HTML 5 草案的前身为 Web Applications 1.0，于 2004 年被 WHATWG 提出，于 2007 年被 W3C 接纳，并成立了新的 HTML 工作团队。 HTML 5 的第一份正式草案于 2008 年 1 月 22 日公布，但是 HTML 5 仍处于完善之中。目前 Firefox、Chrome、Opera、Safari（版本 4 以上）、Internet Explorer（版本 9 以上）已开始支持 HTML5 技术。 2012 年 12 月 17 日，万维网联盟（W3C）正式宣布凝结了大量网 络工作者心血的 HTML5 规范已经正式定稿。根据 W3C 的发言稿称： “HTML5 是开放的 Web 网络平台的奠基石。” 关于浏览器对 HTML 5、CSS 3 的支持情况，可以通过访问网站 http://html5test.com 来进行详细查看。 二、HTML 5 2.1 什么是 HTML 5？ HTML 5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 5 仍处于完善之中
HTML5是W3C与 WHATWG合作的结果。 W3C和 WHATWG在联合创建HTML5时,为HTML5建立一些基础 规则,这些规则也是HTML5最基本的特性。主要包含: ①新特性应该基于HTML、CSS、DOM以及 JavaScript ②减少对外部插件的需求(比如 Flash) ③更优秀的错误处理 ④更多取代脚本的标记 ⑤HTML5应该独立于设备 ⑥开发进程应对公众透明 HTML5目前已经得到了广泛的认可,并且在开发者中也得到了 重视和支持,但是作为一个新的技术规范,并且是在上一个规范发布 十余年之后发布的新版本,在选择HTML5时,应该更多的了解一些 现状。 (1)HTML5虽然很新,并不表示它安全 在学习新技术的同时需要时刻记住网络安全。HTM5所购建的网 页和其他语言编写的网页一样容易泄露一些敏感数据。例如,2013 年3月4日,HIML5编程语言的一个最新漏洞被发现,它允许网站利 用数GB垃圾数据对用户展开轰炸,甚至会在短时间内将硬盘填满。 多款主流浏览器均会受此影响。 (2)可能会消灭 Flash等RIA,但近期不可能 HTML将会最终代替多媒体框架,如 Adobe的 Flash,但是短期看 来还不可能。HTM5目前尚不成熟,而且将现有应用 Flash的网络 开发完全转向HTML5还需要一段时间。尽管HIML5包含许多优点, 但是还可能有某些应用更适合于更灵活的框架。现在,一些主流互联 网服务厂商都逐步转向使用HTML5,但是这个转变的过程也不是 蹴而就的。 (3)移动应用的开发将会得到HTM5的重点支持 由于HML5将应用的功能直接加入其内核,这很可能引导移动 技术潮流重新回到浏览器时代。HTML5允许开发者在移动浏览器内 开发应用。移动互联网的开发将因为HM5得到极大的简化。 (4)跨平台的支持 3《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
3 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn HTML 5 是 W3C 与 WHATWG 合作的结果。 W3C 和 WHATWG 在联合创建 HTML 5 时，为 HTML 5 建立一些基础 规则，这些规则也是 HTML 5 最基本的特性。主要包含： ①新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 ②减少对外部插件的需求（比如 Flash） ③更优秀的错误处理 ④更多取代脚本的标记 ⑤HTML5 应该独立于设备 ⑥开发进程应对公众透明 HTML 5 目前已经得到了广泛的认可，并且在开发者中也得到了 重视和支持，但是作为一个新的技术规范，并且是在上一个规范发布 十余年之后发布的新版本，在选择 HTML 5 时，应该更多的了解一些 现状。 （1）HTML 5 虽然很新，并不表示它安全 在学习新技术的同时需要时刻记住网络安全。HTML5 所购建的网 页和其他语言编写的网页一样容易泄露一些敏感数据。例如，2013 年 3 月 4 日，HTML5 编程语言的一个最新漏洞被发现，它允许网站利 用数 GB 垃圾数据对用户展开轰炸，甚至会在短时间内将硬盘填满。 多款主流浏览器均会受此影响。 （2）可能会消灭 Flash 等 RIA，但近期不可能 HTML 将会最终代替多媒体框架，如 Adobe 的 Flash，但是短期看 来还不可能。HTML 5 目前尚不成熟，而且将现有应用 Flash 的网络 开发完全转向 HTML 5 还需要一段时间。尽管 HTML 5 包含许多优点， 但是还可能有某些应用更适合于更灵活的框架。现在，一些主流互联 网服务厂商都逐步转向使用 HTML 5，但是这个转变的过程也不是一 蹴而就的。 （3）移动应用的开发将会得到 HTML 5 的重点支持 由于 HTML 5 将应用的功能直接加入其内核，这很可能引导移动 技术潮流重新回到浏览器时代。HTML 5 允许开发者在移动浏览器内 开发应用。移动互联网的开发将因为 HTML 5 得到极大的简化。 （4）跨平台的支持
HTML5会带来一个统一的网络,无论是笔记本、台式机还是智 能手机都能够很方便的浏览基于HTML5的网站。 (5)更加适合云计算 HTML5得到了一些重要的企业的重视,例如 Microsoft、SAP Sybase、 Adobe、亚马逊等,他们都在积极地构建基于HTML5的开发 工具和云服务平台,未来HTML5对于企业的SaS平台的建设将起到 积极而重要的作用。 2.2可以放心使用的HTML5 Web开发者最担心的就是新技术推出时由于其不成熟所产生的问 题。虽然Web开发者目前都广泛的接受了HTML5,但是依然会有 些疑问,例如“对于老版本的浏览器,是否能够正常运行?”,“安全 漏洞是否很多?”,“是否需要从零开始全新的学习?”等等。 鉴于HTML5的设计原则,下述的三个理由能够告诉你,完全可 以放心的使用HTML5。 (1)理由一:兼容性 HTML5在老版本的浏览器上也可以正常运行。 (2)理由二:实用性 HTML5内部并没有封装什么复杂的、不切实际的功能,而只是 增加了许多简单实用的新功能。 (3)理由三:非革命性的发展 HTML5的内部功能不是革命性的,而只是对HTML4的补充和改 进,只是发展性的变化。 对于现有的Web前端开发者来将,自己目前掌握的知识也不会被 淘汰,学习HTML更早的版本也是有意义的。 实际上来讲,HTML5的增强并不是在结构上和表现上的增强, 主要体现在JS方面的扩展。 2.3HTML5要解决的问题 HTML5的出现,对于Web来说意义是非常重大的。因为它要把 目前Web上存在的主要问题一并解决掉,它是一个目标明确的HTML 4《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ labs. 51xueweb cn
4 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn HTML 5 会带来一个统一的网络，无论是笔记本、台式机还是智 能手机都能够很方便的浏览基于 HTML 5 的网站。 （5）更加适合云计算 HTML 5 得到了一些重要的企业的重视，例如 Microsoft、SAP Sybase、Adobe、亚马逊等，他们都在积极地构建基于 HTML 5 的开发 工具和云服务平台，未来 HTML 5 对于企业的 SaaS 平台的建设将起到 积极而重要的作用。 2.2 可以放心使用的 HTML 5 Web开发者最担心的就是新技术推出时由于其不成熟所产生的问 题。虽然 Web 开发者目前都广泛的接受了 HTML 5，但是依然会有一 些疑问，例如“对于老版本的浏览器，是否能够正常运行？”，“安全 漏洞是否很多？”，“是否需要从零开始全新的学习？”等等。 鉴于 HTML 5 的设计原则，下述的三个理由能够告诉你，完全可 以放心的使用 HTML 5。 （1）理由一：兼容性 HTML 5 在老版本的浏览器上也可以正常运行。 （2）理由二：实用性 HTML 5 内部并没有封装什么复杂的、不切实际的功能，而只是 增加了许多简单实用的新功能。 （3）理由三：非革命性的发展 HTML 5 的内部功能不是革命性的，而只是对 HTML 4 的补充和改 进，只是发展性的变化。 对于现有的 Web 前端开发者来将，自己目前掌握的知识也不会被 淘汰，学习 HTML 更早的版本也是有意义的。 实际上来讲，HTML 5 的增强并不是在结构上和表现上的增强， 主要体现在 JS 方面的扩展。 2.3 HTML 5 要解决的问题 HTML 5 的出现，对于 Web 来说意义是非常重大的。因为它要把 目前 Web 上存在的主要问题一并解决掉，它是一个目标明确的 HTML
版本。 (1)问题一:Web浏览器之间的兼容性很低 现在,Web浏览器之间的兼容性非常低,在某个版本上正常运行 的Web页面和应用程序,在另一个浏览器上不正常是非常常见的问题。 在HTML5中,浏览器的兼容性问题将得到基本的解决。HTML5 分析了各浏览器所具有的功能,并以此为基础,要求这些浏览器在内 部都遵循一个统一的标准。 (2)问题二:文件结构不够明确 以前的ⅢML文档,文档的结构不够清晰、明确。例如,一个页 面中“标题”“正文”使用的都是元素。严格的讲,div>元素 不是一个能够把文档结构表达的很清楚的元素,如果页面使用了大量 的,不仔细研究是很难看出文档结构的 为了解决这个问题,HTML5追加了很多跟结构有关的元素。并 且还结合微格式、无障碍应用的情况,增加了各种各样的周边元素 使其在各种情况下都能够清晰地表示文件结构。 (3)问题三:Web应用程序的功能受到了限制 在以往的版本上,HTML和Web应用程序的关系非常薄弱,HTML 对于Web应用程序的支持非常差。例如,在HTML中,一次选择多个 文件都不能够实现。 HTML5已经开始提供各种各样的支持Web应用程序的API,各浏 览器也在积极的封装这些API,未来HTML5将能够使得富Web应用 的实现变为现实。 现场演示: HIML5的应用案例 http://adamlu.com/demo/speech/demo/html5.html 三、HTM5新特征 3.1HTML5的语法 HTML5以HTML4为基础,但是对HTML4进行了大量的修改。 HTML的语法是在SGML( Standard Generalized Markup language 语言的基础上建立起来的。但是SGML语法非常复杂,要开发能够解 5《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
5 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 版本。 （1）问题一：Web 浏览器之间的兼容性很低 现在，Web 浏览器之间的兼容性非常低，在某个版本上正常运行 的 Web 页面和应用程序，在另一个浏览器上不正常是非常常见的问题。 在 HTML 5 中，浏览器的兼容性问题将得到基本的解决。HTML 5 分析了各浏览器所具有的功能，并以此为基础，要求这些浏览器在内 部都遵循一个统一的标准。 （2）问题二：文件结构不够明确 以前的 HTML 文档，文档的结构不够清晰、明确。例如，一个页 面中“标题”“正文”使用的都是元素。严格的讲，元素 不是一个能够把文档结构表达的很清楚的元素，如果页面使用了大量 的，不仔细研究是很难看出文档结构的。 为了解决这个问题，HTML 5 追加了很多跟结构有关的元素。并 且还结合微格式、无障碍应用的情况，增加了各种各样的周边元素， 使其在各种情况下都能够清晰地表示文件结构。 （3）问题三：Web 应用程序的功能受到了限制 在以往的版本上，HTML 和 Web 应用程序的关系非常薄弱，HTML 对于 Web 应用程序的支持非常差。例如，在 HTML 中，一次选择多个 文件都不能够实现。 HTML 5 已经开始提供各种各样的支持 Web 应用程序的 API，各浏 览器也在积极的封装这些 API，未来 HTML 5 将能够使得富 Web 应用 的实现变为现实。 现场演示： HTML 5 的应用案例： http://adamlu.com/Demo/Speech/Demo/html5.html 三、HTML 5 新特征 3.1 HTML 5 的语法 HTML 5 以 HTML 4 为基础，但是对 HTML 4 进行了大量的修改。 HTML 的语法是在 SGML（Standard Generalized Markup Language） 语言的基础上建立起来的。但是 SGML 语法非常复杂，要开发能够解
析SGML语法的程序也很不容易,因此Web浏览器没有一个统一的HTML 的分析器和标准。HTML5为了提高兼容性,就围绕着Web标准,重 新定义了一套在现有HTML的基础上修改而来的新的语法标准,使得 各浏览器在对HTML5进行解析时能够有一个统一的规范和标准。 HTML5对于HTM5语法的解析的算法也都提供了详细的规范, 各浏览器只要按照这个规范,就能够把HTML5分析器集中封装在自 己的软件中,进而实现了严格的兼容性 3.1.1HML5的标记方法 (1)内容类型( ContentType) HTML5的文件扩展符和内容类型保持不变。 HTML5文件的扩展符仍然为“.htm1”或者“.htm”。HTML5的 内容类型仍然为“text/html” (2) DOCTYPE声明 DOCTYPE声明是HTML文件中必不可少的部分,它位于文件的第 一样,用于说明文件采用的规范。 在HTML5中, DOCTYPE声明方法为: YPE html> 在使用工具时,可以在 DOCTYPE声明中增加 SYSTEM识别符。 需要说明的是, DOCTYPE声明是不区分大小写、不区分单引号和 双引号的。 (3)字符编码 在HTML4中,使用meta元素的形式指定文件中的字符编码。具 体如下: content="text/html charset=UTF-8> 在HTML5中,可以使用元素直接追加 charset属性的方 式来指定字符编码,具体如下 需要说明的是,在HTML5中,上述两种写法都是合法的。但是 不能够同时写。例如下面的写法就是错误的 在HTML5中,推荐所有的字符编码使用UTF-8。 6《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
6 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 析SGML语法的程序也很不容易，因此Web浏览器没有一个统一的HTML 的分析器和标准。HTML 5 为了提高兼容性，就围绕着 Web 标准，重 新定义了一套在现有 HTML 的基础上修改而来的新的语法标准，使得 各浏览器在对 HTML 5 进行解析时能够有一个统一的规范和标准。 HTML 5 对于 HTML 5 语法的解析的算法也都提供了详细的规范， 各浏览器只要按照这个规范，就能够把 HTML 5 分析器集中封装在自 己的软件中，进而实现了严格的兼容性。 3.1.1 HTML 5 的标记方法 （1）内容类型（ContentType） HTML 5 的文件扩展符和内容类型保持不变。 HTML 5 文件的扩展符仍然为“.html”或者“.htm”。HTML 5 的 内容类型仍然为“text/html”。 （2）DOCTYPE 声明 DOCTYPE 声明是 HTML 文件中必不可少的部分，它位于文件的第 一样，用于说明文件采用的规范。 在 HTML 5 中，DOCTYPE 声明方法为： 在使用工具时，可以在 DOCTYPE 声明中增加 SYSTEM 识别符。 需要说明的是，DOCTYPE 声明是不区分大小写、不区分单引号和 双引号的。 （3）字符编码 在 HTML 4 中，使用 meta 元素的形式指定文件中的字符编码。具 体如下： 在 HTML 5 中，可以使用元素直接追加 charset 属性的方 式来指定字符编码，具体如下： 需要说明的是，在 HTML 5 中，上述两种写法都是合法的。但是 不能够同时写。例如下面的写法就是错误的。 在 HTML 5 中，推荐所有的字符编码使用 UTF-8
3.1.2元素和属性的语法 HTML5充分考虑到了现存网页的元素和属性的写法,并尽量对 现有的语法进行了支持。 (1)元素 在HTML5中,元素的标记可以省略。HTM5中,所有的元素分 为三类:不允许写结東标记、可以省略结東标记、开始标记和结束标 记全部可以省略。 不允许写结束标记是指,不允许使用开始标记与结束标记将元素 括起来的形式,只允许使用“”的形式进行书写。例如 ”的写法是错误的,“”的写法是正确的。 可以省略全部标记是指,该元素可以完全被省略。即使标记被省 略,该元素还是以隐式的方式存在的。例如将元素“ 下属写法表示属性值为 false。 7《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ labs. 51xueweb cn
7 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 3.1.2 元素和属性的语法 HTML 5 充分考虑到了现存网页的元素和属性的写法，并尽量对 现有的语法进行了支持。 （1）元素 在 HTML 5 中，元素的标记可以省略。HTML 5 中，所有的元素分 为三类：不允许写结束标记、可以省略结束标记、开始标记和结束标 记全部可以省略。 不允许写结束标记是指，不允许使用开始标记与结束标记将元素 括起来的形式，只允许使用“”的形式进行书写。例如 “”的写法是错误的，“”的写法是正确的。 可以省略全部标记是指，该元素可以完全被省略。即使标记被省 略，该元素还是以隐式的方式存在的。例如将元素“”省略不 写，在文档中该元素还是存在，依然可以使用 document.body 进行访 问。 不允许写结束标记的元素有：area、base、br、col、command、 embed、hr、img、input、keygen、link、meta、param、source、track、 wbr。 可以省略结束标记的元素有：li、dt、dd、p、rt、rp、optgroup、 option、colgroup、thead、tbody、tfoot、tr、td、th。 可以省略全部标记的元素有：html、head、body、colgroup、tbody。 （2）属性 HTML 5 中属性的写法和 HTML 前期版本一直。对于具有 boolean 值的属性来讲，有一些详细的定义。 当只写属性名称而不指定属性值时，表示属性值为 true；如果 想要将该属性值设为 false，可以不写该属性名称。如果需要将属性 值设置为 ture，也可以将属性名或者空值作为属性值设置。 例如： 下属写法表示属性值为 true。 下属写法表示属性值为 false
ut type="checkbox" (3)属性值 HTML5中,当属性值不包括空字符串、“”、“=”、单引号、 双引号等字符时,属性值两边的引号可以为双引号、单引号,也可以 省略。 例如,下面的写法都是正确的。 3.1.3第一个HTML5页面 根据前面的介绍,撰写第一个HTML5页面。 写法 ≤htm> shead tle。我的第一个HTML5网页欢迎访问我的第一个HTML5网页 我是张三,是河南中医学院的一名学生。您喜欢我的网页么? 不喜欢 写法二 我的第一个HTML5网页欢迎访问我的第一个HTML5网页 我是张三,是河南中医学院的一名学生。您喜欢我的网页么? input type="rado"name=" Youlove" checked>喜欢 8《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
8 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn （3）属性值 HTML 5 中，当属性值不包括空字符串、“”、“=”、单引号、 双引号等字符时，属性值两边的引号可以为双引号、单引号，也可以 省略。 例如，下面的写法都是正确的。 3.1.3 第一个 HTML 5 页面 根据前面的介绍，撰写第一个 HTML 5 页面。 写法一： 我的第一个 HTML 5 网页 欢迎访问我的第一个 HTML 5 网页 我是张三，是河南中医学院的一名学生。 您喜欢我的网页么？ 喜欢 不喜欢 写法二： 我的第一个 HTML 5 网页 欢迎访问我的第一个 HTML 5 网页 我是张三，是河南中医学院的一名学生。 您喜欢我的网页么？ 喜欢
input type="rado"name=" Youlove">不喜欢 3.2新增的内容 3.2.1新增的元素 多媒体元素: video, audio. 交互式元素: details,menu, command 结构元素: header, footer, section, article,nav. 块级语义及行内元素: aside, figure, dialog、time, meter, mark, progress 表单控件:emai1,ur1, datetime, number, range, color. 3.2.2新增的属性 contenteditable. contextmenu. data*, hidden item, itemprop, sub ject, role, aria-*, spellcheck, draggable, irrelevant, template, placeholder, autofocus required, async, manifest 3.2.3新增的事件 onabort, onbeforeunload, oncontextmenu, ondrag ondragend, ondragenter, ondragleave, ondragover ondragstart, ondrop, onerror, onmessage, onmousewheel onresize. onscroll, onunload 3.2.4新增内容举例:播放视频与音频 在HTML中,不支持视频和音频的播放,必须使用插件来实现。 例如 Flash、WP等。HM5增加了和两个多媒体元 素,使得播放视频和音频变得容易。 播放视频的实例 9《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
9 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 不喜欢 3.2 新增的内容 3.2.1 新增的元素 多媒体元素：video, audio... 交互式元素：details, menu, command... 结构元素：header, footer, section, article, nav... 块级语义及行内元素：aside, figure, dialog、time, meter, mark, progress... 表单控件：email, url, datetime, number, range, color... 3.2.2 新增的属性 contenteditable, contextmenu, data-*, hidden, item, itemprop, subject, role, aria-*, spellcheck, draggable, irrelevant, template, placeholder, autofocus, required, async, manifest... 3.2.3 新增的事件 onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload... 3.2.4 新增内容举例：播放视频与音频 在 HTML 中，不支持视频和音频的播放，必须使用插件来实现。 例如 Flash、WMP 等。HTML 5 增加了和两个多媒体元 素，使得播放视频和音频变得容易。 播放视频的实例：
te。>HTML5直接播放视频 您的浏览器不支持HTML5,或者是不支持视频播放。请使用更高版本的浏 览器,推荐使用10、 Firefox15+、 Chrome20+ 播放音频的实例: tte>HTML5播放音频文件 您的浏览器不支持audo元素,请使用更高版本的浏览器。 3.3移除的内容 3.3.1移除的元素 HTML5中移除了许多元素,主要包括四类:能够使用CSS替代 的元素、不再使用 Frame框架而不需要的元素、部分浏览器支持的元 素、其他部分元素。 能够使用CSS替代的元素而被移除的有: basefont、big font、s、 strike、tt、u。 不再使用 Frame框架而不需要而移除的有: frame、 frameset noframes o 只有部分浏览器支持因而移除的有: applet、 blink、 bgsound marquee 其他被废除的元素有:rb、 acronym、dir、 isindex、 listing、 10《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
10 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn HTML 5 直接播放视频 您的浏览器不支持 HTML 5，或者是不支持视频播放。请使用更高版本的浏 览器，推荐使用 IE 10、Firefox 15+、Chrome 20+。 播放音频的实例： HTML 5 播放音频文件 您的浏览器不支持 audio 元素，请使用更高版本的浏览器。 3.3 移除的内容 3.3.1 移除的元素 HTML 5 中移除了许多元素，主要包括四类：能够使用 CSS 替代 的元素、不再使用 Frame 框架而不需要的元素、部分浏览器支持的元 素、其他部分元素。 能够使用 CSS 替代的元素而被移除的有：basefont、big、center、 font、s、strike、tt、u。 不再使用 Frame 框架而不需要而移除的有：frame、frameset、 noframes。 只有部分浏览器支持因而移除的有：applet、blink、bgsound、 marquee。 其他被废除的元素有：rb、acronym、dir、isindex、listing