《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>元素。严格的讲,div>元素 不是一个能够把文档结构表达的很清楚的元素,如果页面使用了大量 的<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 文档，文档的结构不够清晰、明确。例如，一个页 面中“标题”“正文”使用的都是<div>元素。严格的讲，<div>元素 不是一个能够把文档结构表达的很清楚的元素，如果页面使用了大量 的<div>，不仔细研究是很难看出文档结构的。 为了解决这个问题，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 语法非常复杂，要开发能够解