新的WEB时代HTML5.docx

1、新的WEB时代HTML5 课题组号 01 密 级 公 开 湖南科技职业学院软件学院信息检索与分析文档课 题 名 称 新的WEB时代HTML5 专 业 软 件 技 术 班 级 CMU3124 学 期 第四学期 指 导 教 师 胡胜丰 课题组长 毛创业 课题组成员 黄涛、王明军、刘锋、龙佳俊 二一四年五月前 言HTML5 是万维网联盟（W3C）推出的最新的超文本标记语言。第一稿出版于2008年，但是直到2011年才真正的发展起来。在2011年的时候，HTML5开始 发布，人们逐渐开始使用它，但是相关的浏览器对它的支持仍很贫乏。直到今日，几乎所有主流浏览器 （Chrome，Safari，Firefo

2、x，Opera，IE）都提供了对 HTML5的支持，现在才是HTML5真正发挥它特性的时候。目录任务分配表1主题一 HTML5的发展历史21.HTML5的发展 22.HTML5蹊径图 23.HTML5目前支持的平台 34.小结 4主题二 HTML5的特性5简介 51、新标记 51.1、结构性标记 51.2、语义性标记 51.3、语义性内联元素 51.4、内嵌的媒体 61.5、交互 62.新表单元素 62.1 新标签 62.2 表单元素的新特性 72.3 验证支持 83.JS的增强 83.1 查询选择器(querySelector) 83.2 原生JSON支持 84.Canvas 84.1 Ht

3、ml5中的绘图技术 85.稳健的数据存储 96.无需插件支持的视频/音频 97.可编辑内容、拖放 108.小结 10主题三 HTML5 VS Flash.11简介 111.Flash 111.1 优势： 111.2 劣势： 112.HTML5 122.1 优势： 122.2 劣势： 123.HTML5取代Flash？ 124.未来趋势 134.1 HTML5 135.小结 13主题四 HTML5的应用现状.151.HTML5的现状分析 152. HTML5的应用领域 152.1 移动应用开发的使用 152.2 优势 152.3 阻碍 162.4 跨界领域的应用 162.5 指定站点浏览器中的应

4、用 162.6 桌面中的应用 163.小结 16主题五 HTML5的性能优化.18简介 181.更简洁的标签 182.图片优化 183.预取 184.DNS解析 195.Web Worker 196.小结 19总结.20任务分配表序号研究内容成果物责任人1HTML5的发展历史提交分析报告黄 涛2HTML5的特性提交分析报告毛创业3HTML5 VS FLASH提交分析报告王明军4HTML5的应用现状提交分析报告龙佳俊5HTML5的性能优化提交分析报告刘 锋主题一 HTML5的发展历史黄涛1.HTML5的发展HTML5是用于取代1999年所制定的 HTML 4.1和 XHTML 1.0 标准的超文

5、本标记语言(html)标准版本；后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做Web超文本应用技术工作组的组织（WHATWG）。该组织致力于Web 表单和应用程序。关于Web超文本应用技术工作组的组织（WHATWG），是由2004年Opera的，伊恩希克森（Ian Hickson）发起的HTML新标签扩展以适应新的web应用，该发起遭到W3C的拒绝，而W3C凭空杜撰的作风引起了部分人的不满，来自Opera,Apple，以及Mozilla的代表开始表达反对声，于是他们自发创建了超文本应用技术工作组，便是WHATWG。而万维网联盟（W3C）专

6、注于XHTML2.0。XHTML2.0不向前兼容，乃至不兼容之前得 HTML。它是一种全新得语言，赤条条来去无牵挂。这着实是一场灾祸。于是，在 2006 年于Web超文本应用技术工作组的组织（WHATWG）决定进行合作，来创建一个新版本的 HTML。HTML5草案的前身名为 Web Applications 1.0，于2004年被Web超文本应用技术工作组（WHATWG）提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。在2008年1月22日，第一份正式草案发布.WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。2012年9月，W3C提出计划要在2014年底前发布一个

7、HTML5推荐标准，并在2016年底前发布HTML5.1推荐标准。2.HTML5蹊径图HTML 5得近况是，它不再象过去那样让人怀疑，然而仍不敷开阔开朗。有两个构造在同时订定它得范例，这两个构造有着完全不同得行事风格，WHATWG 是先买后尝，W3C是先尝后买，他们形成了一个不太靠谱得联姻，终极人们必将面对一个HTML5还是HTML 5的问题。更让开辟者怀疑得是，他们什么时间才可以试HTML 5。在一次访谈中，负责编纂标准格式文件的Google员工伊恩希克森（Ian Hickson）提到了2022，表现要到当时HTML 5才会形成“保举标准”，此话一出，顿时招来Web计划者们得末路怒，只管他们

8、不知道保举标定时什么意思，但他们大该明白，2022已经是猴年马月得事了。这还不算，更重要得是，这个保举标准涉及两套范例，思量到HTML 5标准得范围，这个日期还是太乐不都雅了，毕竟太久了，各大浏览器以往对既有标准得兼容并不遂人意，想当初，IE花了10年才采取abbr这个标签。2012 年，HTML 5会被采取为候选标准，这将是HTML 5真正开始发力得日子。对Web开辟计划者来说，这并不重要，重要得是浏览器的支持。就像CSS 2.1，当有浏览器开始支持这一范例得时间，就有开发者使用了，假使倘若必需比及全部浏览器都支持才开始入手，恐怕我们如今还在等待中。HTML 5也一样，并不会有一个时候点，颁

9、布发表HTML5已经筹办妥当，相反，我们会先开始利用它得部分成果，HTML 5并不是一个从零开始全新得东西，它是旧得HTML标准得改进，毕竟上，不管你正在利用得HTML是哪个版本，你已经在利用HTML 5。3.HTML5目前支持的平台支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器）等；国内的傲游浏览器（Maxthon），以及基于IE或所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力,以后支持HTML5是一个趋势了。在移动设备开发HTML5应用只有两种方法，要不就是全使用HTML5的语法，要不就

10、是仅使用JavaScript引擎。纯HTML5手机应用运行缓慢并错漏百出，但优化后的效果会好转。尽管不是很多人愿意去做这样的优化，但依然可以去尝试。JavaScript引擎的构建方法让制作手机网页游戏成为可能。由于界面层很复杂，已预订了一个UI工具包去使用。HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原先应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试和运行，这是首先得解决的一个问题。因此也有许多手机杂志客户端是基于HTML5标准，开发人员可以轻松调试修改。4.小结总的来说的，HTML5的主要由万维网联盟（W3C）和Web超文本应用技术工作组

11、的组织（WHATWG）共同合作开发的，虽然2个行事风格不同，但我相信在不远的将来，HTML5将会给我们带来更好的网络体验。主题二 HTML5的特性毛创业简介考虑到让用户可以在低功率的设备上运行繁重的内容，许多特性伴随HTML5衍生而来。其中主要体现在这些方面：新标记、新表单元素、Canvas、JS的增强、稳健的数据存储、无需插件支持的视频/音频、可编辑内容、拖放等。1、新标记1.1、结构性标记header：页面的头部或者文章的头部。footer：页面的尾部或者文章的尾部。section：网页中的一节。article：独立的文章内容。nav：导航。1.2、语义性标记aside代表说明、提示、边栏

12、、引用、附加注释等，也就是叙述主线之外的容。figure代表一个块级图像，还可以包含说明。dialog表示几个人之间的对话。1.3、语义性内联元素m或者mark表示文本被“加上标志”，但是不一定要强调。time表示一个时间值，time元素可以帮助浏览器和其他程序识别出HTML页面中的时间。每个time元素都应该有一个datetime属性，其中包含更适合机器识别的时间值，适合机器读取的时间值可能对搜索引擎、日历程序等有帮助。meta表示指定范围内的数字值；meter元素帮助浏览器和其他客户机识别HTML页面中的数量。它不要求对元素内容应用任何特定的格式。但是，每个 meter 元素可以有最多6个

13、属性，它们按照更适合机器识别的形式表示这个数量：value 、 min 、 low 、high 、max 、optimum； 这些属性都应该包含一个十进制数字。menu元素实际上在 HTML 2 中就出现了,在 HTML 4 中废弃了它，但是 HTML 5 又恢复了它并指定了新的意义。在 HTML 5 中，menu包含command 元素，每个command元素引发一个操作 菜单可以嵌套在其他菜单中，形成层次化的菜单结构。 progress表示一个正在进行的过程的状态，就像图形用户界面（GUI）应用程序中的进度条。1.4、内嵌的媒体video用来嵌入任意视频格式。audio用来嵌入音频格式。a

14、udio和video元素可以包含额外的标记，用来描述音频和视频的内容。1.5、交互details元素表示在默认情况下可能不显示的详细信息。可选的legend元素可以提供详细信息的摘要。details元素的用途之一是提供脚注和尾注。datagrid元素提供一个网格控件。可以用它显示树、列表和表格，用户和脚本可以更新这些界面元素。与之相反，传统的表格主要用来显示静态数据。2.新表单元素2.1 新标签search：搜索控件，可以看作是不同风格的文本输入控件。浏览器应该将搜索控件设置为特定于操作系统的搜索功能。除了纯粹美学方面的考虑，还可以在将来为搜索提供辅助技术或类似自动完成的功能提供接口和实现的可

15、能性。number：它创建了一个用于输入数字项的特殊输入框，在支持的浏览器中，你会看到一个文本输入框，其右侧附带了一个微调控件用于增加或减少输入数字的数值。range：创建一个滑动控件从而允许选择一个范围内的数值，在以往这是一个复杂的、语义含糊的话题，但现在通过HTML5非常简单，只需要定义一个range类型的输入控件就可以了。date、time:日期时间选择控件。color：颜色选择器。和input的list特性目前为止，我们通常使用和元素创建下拉列表供用户选择。如果我们需要的不仅仅是创建一个可供用户选择的列表，同时我们还允许用户通过输入来完成呢？这需要通过繁琐的Javascript编程来实

16、现，但是现在，通过HTML5提供的input的list属性绑定一个datalist元素，可以轻松的实现我们想要的功能2.2 表单元素的新特性Placeholder：Web表单中一个经常使用的技巧是在文本域放置提示信息（placeholder），比如显示我们期望用户输入内容的提示信息，当文本域获得焦点时，隐藏这些信息。完成这样的功能需要借助Javascript（获得焦点时清除提示内容，失去焦点时再显示出来），现在我们可以通过简单的增加placeholder特性来完成这样的功能。Autofocus：另一个常用的功能是当页面加载完毕时让某个文本域获得焦点，在以前也必须借助于Javascript来实现

17、，如今可以通过autofocus特性来完成。min和max：顾名思义，这对特性允许为表单域设置最小和最大值，它们可以被用在number、range、time或date等类型的表单控件上。Step：step特性用来定义表单域微调的粒度。举个例子，你希望用户输入特定的时间值，但在点击微调箭头时希望按照30分钟的粒度进行增加或减少，我们可以使用step特性，注意在time类型的表单域上step值是按秒为单位的。2.3 验证支持required：最常见的表单验证是必填项的校验，即表单中的某项必须输入内容才可以被提交，否则提示用户必须输入内容。这样的需求可以通过在input、select和textare

18、a元素上增加required特性来完成。type和pattern：正如前面我们看到的，通过为input指定不同的type，可以创建数字域、Email地址和url等，作为客户端验证的一部分，浏览器能检查用户输入是否匹配该类型表单域的预期模式。对于用户输入项不符合浏览器内建模式定义的，则给出提示。3.JS的增强3.1 查询选择器(querySelector)JS中终于加入了查询选择器querySelector()和querySelectorAll()，其行为类似jQuery或者CSS选择器。 querySelector()返回第一个匹配元素，querySelectorAll()返回所有的匹配元素，

19、两个选择器的查询规则类似，如：querySelector(“input.error”)，querySelectorAll(“#results td”)等。3.2 原生JSON支持window.JSON ，提供parse()和stringify()方法，相比JS实现极大的提高了性能。4.Canvas4.1 Html5中的绘图技术Web之前有三种绘图的方式，Adobe Flash，SVG(w3c)和VML(微软)。此次HTML5元素新添加的Canvas实际上是一个像素画布（bitmap canvas），和SVG不同，画在Canvas上的元素无法进行缩放，同时也不是DOM的一部分。WHATWG的HT

20、ML5选择Canvas作为标准原因有二：1)、由于不用存储画出的每一个元素，所以性能更好。2)、和其他语言的二维绘图API类似，更容易实现。对于不支持canvas的浏览器，会显示canvas标签中间的备选文字。注意：还有两点不足的地方，在canvas中绘制的图片不能设置备选文字。 在Canvas可以画直线，弧线，支持各种线条样式和使用纯色或图片填充，可以绘制文字和阴影等，API和一般语言的2D绘图API类似。Canvas有两点需要注意：1)、可以以像素的方式读写Canvas对象；2)、可以跨站在canvas中载入图片，但是跨站载入的图片不可以以像素的方式编辑。也就是说跨站载入的图片可以显示，但

21、是不能读取和复制。5.稳健的数据存储除了常规的页面存储，HTML5 规范还定义了离线存储规范，当用户的网络被断开后如何让它们继续与网页程序和文档进行交互。这个特性现在被 Firefox 3.5+, Chrome 4.0+, Safari 4.0+ and Mobile Safari 3.1+ 所支持。你可以通过提供一个 manifest 文件来定义哪些文件需要被缓存，哪些需要在离线的时候有折衷方案替代。当用户访问这个页面，支持的浏览器将会猎取一个 manifest 版本。它将下载并缓存所有的涉及到的文件，并且当 manifest 相对于用户上次的浏览的版本有变化，它将会再次下载并缓存所有的文件

22、。6.无需插件支持的视频/音频使用HTML5的 和 标签，我们将不再需要使用插件或者工具即可直接播放视频和音频。当然，不同的浏览器提供商对音频/视频格式的也是不同。目前已知格式：音频: ogg (ogg, oga), mp3, wav, AAC 视频: ogg (ogv), H.264 (mp4)。7.可编辑内容、拖放使用HTML5你可以在页面的某个地方，允许用户编辑页面，使用该特性之后，你的页面将允许用户编辑、删除、插入内容，并且你可以用 Javascript 来添加保存或应用样式的功能。 HTML5 的拖放将会把与用户交互带向别一个等级，并将会对你如何设计用户交互产生重大影响。图片和超链接

23、默认是可拖放的。对于所有的元素，HTML5 引进了一个新的属性”draggable”，这将用来设置元素是否接受拖放。8.小结HTML5所增加的这些新的特性，无疑给HTML5带来了更多的丰富色彩；简化了WEB的开发，提高了系统的性能，使得HTML5更上一个台阶；但HTML5的新特性并不止于此，我们期待HTML5能够添加更多更好的特性与功能。主题三 HTML5 VS Flash王明军简介在新的网络时代，现有的HTML技术已经不能满足富互联网应用程序的需求，这让Web开发人员对HTML 5的期待愈发的强烈，HTML 5是响应互联网最新变化的产物，尽管离这一标准的通过及实施还是一个长期的过程。同时也有

24、很多人预言在HTML 5告诉发展的几年里，flash将会销声匿迹？1.Flash1.1 优势：1）借助时间线（Time Line）和Action Script 3.0可以方便地制作出任意效果动画。2）完备的开发工具。（Flash Pro CS系列开发工具）3）完备的工作流。（Adobe CS系列全线工具均可以导入到Flash并可二次编辑）4）多年的积累，众多设计人员和开发者集中在Flash平台5）普及率高1.2 劣势：1）Flash Player不支持iOS。2）Flash Player不支持Android 4.1+。（Android 4.0以下系统均可支持。2012-8-5，Flash退出A

25、ndroid平台，正式告别移动端。）3）耗电、性能不佳。4）封闭，收费2.HTML52.1 优势：1）完备的技术人员储备。（前端开发人员的数量完全可以跟Java、.Net程序员媲美）2）借助HTML 5的诸多新特性，在某些层面完全可以取代Flash技术。（Flash属于Plug-in方式，而HTML则是浏览器原生支持）3）不逊色于Flash的大量控件。（Bootstrap、基于jQuery的控件比比皆是）4）真正意义上全平台支持。5）不用再依赖插件来观看视频6）提供直接的交互式的动画7）HTML5可以更有效的引入音频编码8）比Flash拥有更大、更全面、更活跃的社区。2.2 劣势：1）作为企业

26、开发，不具有媲美Flash的工作流及开发流程。2）作为游戏开发，在支持3D及运行效率方面，不如Flash Stage3D。3）编写HTML 5的应用程序，很大程度上还要编写CSS与JavaScript，对初学者来说，学习曲线较Flash高一些。4）HTML 5依然存在浏览器兼容问题。（随着W3C与WHATWG的分裂，估计这种情况会被进一步加深）5）在大型HTML 5的项目中，Flash遇到的问题在HTML 5中依然存在（例如：效率问题），在此基础上还增加了浏览器兼容性、Ajax跨域通讯等新问题。3.HTML5取代Flash？3.1 Flash占据市场97%的份额，长达10年之久，这样一个平台会

27、消失？我们先从HTML5和Flash的各种优缺点说起来分析一下。Flash号称跨平台运行，不管你是linux还是windows，就连现在的一些安卓手机设备也能流畅运行Flash，很多网站也是运用Flash架构。简而言之，Flash已经普及了长达10年之久，各种网站教程，开发工具也到处都有，学习成本较低，开发工具虽然大部分是收费，但是在中国没用，Flash很多高级特性，比如多文件上传等，是很多HTML 5望尘莫及的，Flash在各种平台上运行，只需要安装相应的浏览器插件，虽然安卓手机部分CPU不支持Flash，但是不影响其跨平台的特点。HTML5短时间内不能完全取代Flash，只是在web游戏和

28、动画方面会给Flash一个不小的冲击。HTML5必然会成为新的网页标准并影响Flash在网页特效网页动画的地位。但是不会取代Flash。HTML5甚至会取代一部分js代码。但是不同的是HTML5的发展更加依赖JS，因为不管怎么说HTML5都是执行者依然不够“智能”。它能做的事情越多就越以来JS的智能判断。 Flash与HTML5并没有这种依存关系，所以就使得他们看起来水火不容，其实Flash更像是HTML+JS的组合。HTML5的发展只能动摇Flash的动画表现，只有HTML5+JS的共同发展才能最终击倒Flash。而那也不是一朝一夕的事，而且Adobe也不是坐等挨打的。4.未来趋势4.1 H

29、TML51）移动优先2）游戏开发者领衔“主演”3）响应式设计&自动变化屏幕尺寸4）离线缓存4.2 Flash 1）游戏制作2）网络构件3）广告设计4）工控界面5.小结HTML5不是用户应用的迫切需求，更多是厂商试图改变软件生态格局的战略需求。 它的兼容性鉴于各大浏览器的以往表现，有待观望，不宜立即迁移应用。并且需要一个成熟完整的开发环境，记事本+浏览器对付不了。它功能的暴增，浏览器必须有一个高效的图形引擎和脚本引擎。它需要杀手级应用来吸引和引导用户升级浏览器，最终完成HTML5终端的部署。 Flash是一个不断在发展的技术，有很强的灵活性，HTML5不可能完全取代Flash，众多的开发人员也不

30、会断然抛弃Flash。主题四 HTML5的应用现状龙佳俊1.HTML5的现状分析现今，各大浏览器对 HTML5 的支持各有千秋，我们期待着他们在一两年内趋向一致，你可能以为，既然这样，现在大概很少人在使用这个未来的标准，事实并不如此，HTML5 现在已经被广泛应用。尽管HTML5的实现还有很长的路要走，但HTML5正在改变Web。酝酿已久的HTML5正致力于成为Ajax、Flash和Silverlight的替代者。它承诺将带给互联网浏览器更丰富的交互性。在重量级的苹果电脑公司和Adobe下一代移动设备的接口格式之争中，HTML5正是争论的焦点。2. HTML5的应用领域2.1 移动应用开发的使用HTML5的出现让移动平台的竞争由系统平台转向了浏览器之间：移动端的IE、Chrome、FireFox、Safari，亦或是新出现的浏览器，谁能达到在移动端对HTML5更好的支持，谁就能在以后的移动应用领域占据更多的市场。2.2 优势跨平台：一次开发，到处使用，不需要考虑兼容性。这可以极大减少跨平台开发人员