新的WEB时代HTML5.docx
《新的WEB时代HTML5.docx》由会员分享，可在线阅读，更多相关《新的WEB时代HTML5.docx（20页珍藏版）》请在冰豆网上搜索。
新的WEB时代HTML5
课题组号01
密级公开
湖南科技职业学院软件学院
信息检索与分析文档
课题名称新的WEB时代—HTML5
专业软件技术
班级CMU3124
学期第四学期
指导教师胡胜丰
课题组长毛创业
课题组成员黄涛、王明军、刘锋、龙佳俊
二○一四年五月
前言
HTML5是万维网联盟（W3C）推出的最新的超文本标记语言。
第一稿出版于2008年，但是直到2011年才真正的发展起来。
在2011年的时候，HTML5开始发布，人们逐渐开始使用它，但是相关的浏览器对它的支持仍很贫乏。
直到今日，几乎所有主流浏览器（Chrome，Safari，Firefox，Opera，IE）都提供了对HTML5的支持，现在才是HTML5真正发挥它特性的时候。
目录
任务分配表……………………………………………………………………………1
主题一HTML5的发展历史…………………………………………………………2
1.HTML5的发展2
2.HTML5蹊径图2
3.HTML5目前支持的平台3
4.小结4
主题二HTML5的特性………………………………………………………………5
简介5
1、新标记5
1.1、结构性标记5
1.2、语义性标记5
1.3、语义性内联元素5
1.4、内嵌的媒体6
1.5、交互6
2.新表单元素6
2.1新标签6
2.2表单元素的新特性7
2.3验证支持8
3.JS的增强8
3.1查询选择器（querySelector）8
3.2原生JSON支持8
4.Canvas8
4.1Html5中的绘图技术8
5.稳健的数据存储9
6.无需插件支持的视频/音频9
7.可编辑内容、拖放10
8.小结10
主题三HTML5VSFlash…………………………………………………………...11
简介11
1.Flash11
1.1优势：
11
1.2劣势：
11
2.HTML512
2.1优势：
12
2.2劣势：
12
3.HTML5取代Flash？
12
4.未来趋势13
4.1HTML513
5.小结13
主题四HTML5的应用现状………………………………………………………..15
1.HTML5的现状分析15
2.HTML5的应用领域15
2.1移动应用开发的使用15
2.2优势15
2.3阻碍16
2.4跨界领域的应用16
2.5指定站点浏览器中的应用16
2.6桌面中的应用16
3.小结16
主题五HTML5的性能优化………………………………………………………..18
简介18
1.更简洁的标签18
2.图片优化18
3.预取18
4.DNS解析19
5.WebWorker19
6.小结19
总结…………………………………………………………………………………..20
任务分配表
序号
研究内容
成果物
责任人
1
HTML5的发展历史
提交分析报告
黄涛
2
HTML5的特性
提交分析报告
毛创业
3
HTML5VSFLASH
提交分析报告
王明军
4
HTML5的应用现状
提交分析报告
龙佳俊
5
HTML5的性能优化
提交分析报告
刘锋
主题一HTML5的发展历史
——黄涛
1.HTML5的发展
HTML5是用于取代1999年所制定的HTML4.1和XHTML1.0标准的超文本标记语言（html）标准版本；后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做Web超文本应用技术工作组的组织（WHATWG）。
该组织致力于Web表单和应用程序。
关于Web超文本应用技术工作组的组织（WHATWG），是由2004年Opera的，伊恩·希克森（IanHickson）发起的HTML新标签扩展以适应新的web应用，该发起遭到W3C的拒绝，而W3C凭空杜撰的作风引起了部分人的不满，来自Opera,Apple，以及Mozilla的代表开始表达反对声，于是他们自发创建了超文本应用技术工作组，便是WHATWG。
而万维网联盟（W3C）专注于XHTML2.0。
XHTML2.0不向前兼容，乃至不兼容之前得HTML。
它是一种全新得语言，赤条条来去无牵挂。
这着实是一场灾祸。
于是，在2006年于Web超文本应用技术工作组的组织（WHATWG）决定进行合作，来创建一个新版本的HTML。
HTML5草案的前身名为WebApplications1.0，于2004年被Web超文本应用技术工作组（WHATWG）提出，于2007年被W3C接纳，并成立了新的HTML工作团队。
在2008年1月22日，第一份正式草案发布.WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。
2012年9月，W3C提出计划要在2014年底前发布一个HTML5推荐标准，并在2016年底前发布HTML5.1推荐标准。
2.HTML5蹊径图
HTML5得近况是，它不再象过去那样让人怀疑，然而仍不敷开阔开朗。
有两个构造在同时订定它得范例，这两个构造有着完全不同得行事风格，WHATWG是先买后尝，W3C是先尝后买，他们形成了一个不太靠谱得联姻，终极人们必将面对一个HTML5还是HTML5的问题。
更让开辟者怀疑得是，他们什么时间才可以试HTML5。
在一次访谈中，负责编纂标准格式文件的Google员工伊恩·希克森（IanHickson）提到了2022，表现要到当时HTML5才会形成“保举标准”，此话一出，顿时招来Web计划者们得末路怒，只管他们不知道保举标定时什么意思，但他们大该明白，2022已经是猴年马月得事了。
这还不算，更重要得是，这个保举标准涉及两套范例，思量到HTML5标准得范围，这个日期还是太乐不都雅了，毕竟太久了，各大浏览器以往对既有标准得兼容并不遂人意，想当初，IE花了10年才采取abbr这个标签。
2012年，HTML5会被采取为候选标准，这将是HTML5真正开始发力得日子。
对Web开辟计划者来说，这并不重要，重要得是浏览器的支持。
就像CSS2.1，当有浏览器开始支持这一范例得时间，就有开发者使用了，假使倘若必需比及全部浏览器都支持才开始入手，恐怕我们如今还在等待中。
HTML5也一样，并不会有一个时候点，颁布发表HTML5已经筹办妥当，相反，我们会先开始利用它得部分成果，HTML5并不是一个从零开始全新得东西，它是旧得HTML标准得改进，毕竟上，不管你正在利用得HTML是哪个版本，你已经在利用HTML5。
3.HTML5目前支持的平台
支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器）等；国内的傲游浏览器（Maxthon），以及基于IE或所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力,以后支持HTML5是一个趋势了。
在移动设备开发HTML5应用只有两种方法，要不就是全使用HTML5的语法，要不就是仅使用JavaScript引擎。
纯HTML5手机应用运行缓慢并错漏百出，但优化后的效果会好转。
尽管不是很多人愿意去做这样的优化，但依然可以去尝试。
JavaScript引擎的构建方法让制作手机网页游戏成为可能。
由于界面层很复杂，已预订了一个UI工具包去使用。
HTML5手机应用的最大优势就是可以在网页上直接调试和修改。
原先应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试和运行，这是首先得解决的一个问题。
因此也有许多手机杂志客户端是基于HTML5标准，开发人员可以轻松调试修改。
4.小结
总的来说的，HTML5的主要由万维网联盟（W3C）和Web超文本应用技术工作组的组织（WHATWG）共同合作开发的，虽然2个行事风格不同，但我相信在不远的将来，HTML5将会给我们带来更好的网络体验。
主题二HTML5的特性
——毛创业
简介
考虑到让用户可以在低功率的设备上运行繁重的内容，许多特性伴随HTML5衍生而来。
其中主要体现在这些方面：
新标记、新表单元素、Canvas、JS的增强、稳健的数据存储、无需插件支持的视频/音频、可编辑内容、拖放等。
1、新标记
1.1、结构性标记
header：
页面的头部或者文章的头部。
footer：
页面的尾部或者文章的尾部。
section：
网页中的一节。
article：
独立的文章内容。
nav ：
导航。
1.2、语义性标记
aside代表说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的容。
figure代表一个块级图像，还可以包含说明。
dialog表示几个人之间的对话。
1.3、语义性内联元素
m或者mark表示文本被 “加上标志”，但是不一定要强调。
time表示一个时间值，time 元素可以帮助浏览器和其他程序识别出 HTML 页面中的时间。
每个 time 元素都应该有一个 datetime 属性，其中包含更适合机器识别的时间值，适合机器读取的时间值可能对搜索引擎、日历程序等有帮助。
meta表示指定范围内的数字值；meter元素帮助浏览器和其他客户机识别HTML页面中的数量。
它不要求对元素内容应用任何特定的格式。
但是，每个meter元素可以有最多6个属性，它们按照更适合机器识别的形式表示这个数量：
value、min、low、high、max、optimum；这些属性都应该包含一个十进制数字。
menu元素实际上在HTML2中就出现了,在HTML4中废弃了它，但是HTML5又恢复了它并指定了新的意义。
在HTML5中，menu包含command元素，每个command元素引发一个操作菜单可以嵌套在其他菜单中，形成层次化的菜单结构。
progress表示一个正在进行的过程的状态，就像图形用户界面（GUI）应用程序中的进度条。
1.4、内嵌的媒体
video用来嵌入任意视频格式。
audio 用来嵌入音频格式。
audio 和 video 元素可以包含额外的标记，用来描述音频和视频的内容。
1.5、交互
details 元素表示在默认情况下可能不显示的详细信息。
可选的 legend 元素可以提供详细信息的摘要。
details 元素的用途之一是提供脚注和尾注。
datagrid 元素提供一个网格控件。
可以用它显示树、列表和表格，用户和脚本可以更新这些界面元素。
与之相反，传统的表格主要用来显示静态数据。
2.新表单元素
2.1新标签
search：
搜索控件，可以看作是不同风格的文本输入控件。
浏览器应该将搜索控件设置为特定于操作系统的搜索功能。
除了纯粹美学方面的考虑，还可以在将来为搜索提供辅助技术或类似自动完成的功能提供接口和实现的可能性。
number：
它创建了一个用于输入数字项的特殊输入框，在支持的浏览器中，你会看到一个文本输入框，其右侧附带了一个微调控件用于增加或减少输入数字的数值。
range：
创建一个滑动控件从而允许选择一个范围内的数值，在以往这是一个复杂的、语义含糊的话题，但现在通过HTML5非常简单，只需要定义一个range类型的输入控件就可以了。
date、time:
日期 时间选择控件 。
color：
颜色选择器。
目前为止，我们通常使用
如果我们需要的不仅仅是创建一个可供用户选择的列表，同时我们还允许用户通过输入来完成呢？
这需要通过繁琐的Javascript编程来实现，但是现在，通过HTML5提供的input的list属性绑定一个datalist元素，可以轻松的实现我们想要的功能
2.2表单元素的新特性
Placeholder ：
Web表单中一个经常使用的技巧是在文本域放置提示信息（placeholder），比如显示我们期望用户输入内容的提示信息，当文本域获得焦点时，隐藏这些信息。
完成这样的功能需要借助Javascript（获得焦点时清除提示内容，失去焦点时再显示出来），现在我们可以通过简单的增加placeholder特性来完成这样的功能。
Autofocus：
另一个常用的功能是当页面加载完毕时让某个文本域获得焦点，在以前也必须借助于Javascript来实现，如今可以通过autofocus特性来完成。
min和max ：
顾名思义，这对特性允许为表单域设置最小和最大值，它们可以被用在number、range、time或date等类型的表单控件上。
Step：
step特性用来定义表单域微调的粒度。
举个例子，你希望用户输入特定的时间值，但在点击微调箭头时希望按照30分钟的粒度进行增加或减少，我们可以使用step特性，注意在time类型的表单域上step值是按秒为单位的。
2.3验证支持
required ：
最常见的表单验证是必填项的校验，即表单中的某项必须输入内容才可以被提交，否则提示用户必须输入内容。
这样的需求可以通过在input、select和textarea元素上增加required特性来完成。
type和pattern：
正如前面我们看到的，通过为input指定不同的type，可以创建数字域、Email地址和url等，作为客户端验证的一部分，浏览器能检查用户输入是否匹配该类型表单域的预期模式。
对于用户输入项不符合浏览器内建模式定义的，则给出提示。
3.JS的增强
3.1查询选择器（querySelector）
JS中终于加入了查询选择器querySelector（）和querySelectorAll（），其行为类似jQuery或者CSS选择器。
querySelector（）返回第一个匹配元素，querySelectorAll（）返回所有的匹配元素，两个选择器的查询规则类似，如：
querySelector（“input.error”），querySelectorAll（“#resultstd”）等。
3.2原生JSON支持
window.JSON，提供parse（）和stringify（）方法，相比JS实现极大的提高了性能。
4.Canvas
4.1Html5中的绘图技术
Web之前有三种绘图的方式，AdobeFlash，SVG（w3c）和VML（微软）。
此次HTML5元素新添加的Canvas实际上是一个像素画布（bitmapcanvas），和SVG不同，画在Canvas上的元素无法进行缩放，同时也不是DOM的一部分。
WHATWG的HTML5选择Canvas作为标准原因有二：
1）、由于不用存储画出的每一个元素，所以性能更好。
2）、和其他语言的二维绘图API类似，更容易实现。
对于不支持canvas的浏览器，会显示canvas标签中间的备选文字。
注意：
还有两点不足的地方，在canvas中绘制的图片不能设置备选文字。
在Canvas可以画直线，弧线，支持各种线条样式和使用纯色或图片填充，可以绘制文字和阴影等，API和一般语言的2D绘图API类似。
Canvas有两点需要注意：
1）、可以以像素的方式读写Canvas对象；
2）、可以跨站在canvas中载入图片，但是跨站载入的图片不可以以像素的方式编辑。
也就是说跨站载入的图片可以显示，但是不能读取和复制。
5.稳健的数据存储
除了常规的页面存储，HTML5规范还定义了离线存储规范，当用户的网络被断开后如何让它们继续与网页程序和文档进行交互。
这个特性现在被Firefox3.5+,Chrome4.0+,Safari4.0+andMobileSafari3.1+所支持。
你可以通过提供一个manifest文件来定义哪些文件需要被缓存，哪些需要在离线的时候有折衷方案替代。
当用户访问这个页面，支持的浏览器将会猎取一个manifest版本。
它将下载并缓存所有的涉及到的文件，并且当manifest相对于用户上次的浏览的版本有变化，它将会再次下载并缓存所有的文件。
6.无需插件支持的视频/音频
使用HTML5的
当然，不同的浏览器提供商对音频/视频格式的也是不同。
目前已知格式：
音频:
ogg（ogg,oga）,mp3,wav,AAC视频:
ogg（ogv）,H.264（mp4）。
7.可编辑内容、拖放
使用HTML5你可以在页面的某个地方，允许用户编辑页面，使用该特性之后，你的页面将允许用户编辑、删除、插入内容，并且你可以用Javascript来添加保存或应用样式的功能。
HTML5的拖放将会把与用户交互带向别一个等级，并将会对你如何设计用户交互产生重大影响。
图片和超链接默认是可拖放的。
对于所有的元素，HTML5引进了一个新的属性”draggable”，这将用来设置元素是否接受拖放。
8.小结
HTML5所增加的这些新的特性，无疑给HTML5带来了更多的丰富色彩；简化了WEB的开发，提高了系统的性能，使得HTML5更上一个台阶；但HTML5的新特性并不止于此，我们期待HTML5能够添加更多更好的特性与功能。
主题三HTML5VSFlash
——王明军
简介
在新的网络时代，现有的HTML技术已经不能满足富互联网应用程序的需求，这让Web开发人员对HTML5的期待愈发的强烈，HTML5是响应互联网最新变化的产物，尽管离这一标准的通过及实施还是一个长期的过程。
同时也有很多人预言在HTML5告诉发展的几年里，flash将会销声匿迹？
1.Flash
1.1优势：
1）借助时间线（TimeLine）和ActionScript3.0可以方便地制作出任意效果动画。
2）完备的开发工具。
（FlashProCS系列开发工具）
3）完备的工作流。
（AdobeCS系列全线工具均可以导入到Flash并可二次编辑）
4）多年的积累，众多设计人员和开发者集中在Flash平台
5）普及率高
1.2劣势：
1）FlashPlayer不支持iOS。
2）FlashPlayer不支持Android4.1+。
（Android4.0以下系统均可支持。
2012-8-5，Flash退出Android平台，正式告别移动端。
）
3）耗电、性能不佳。
4）封闭，收费
2.HTML5
2.1优势：
1）完备的技术人员储备。
（前端开发人员的数量完全可以跟Java、.Net程序员媲美）
2）借助HTML5的诸多新特性，在某些层面完全可以取代Flash技术。
（Flash属于Plug-in方式，而HTML则是浏览器原生支持）
3）不逊色于Flash的大量控件。
（Bootstrap、基于jQuery的控件比比皆是）
4）真正意义上全平台支持。
5）不用再依赖插件来观看视频
6）提供直接的交互式的动画
7）HTML5可以更有效的引入音频编码
8）比Flash拥有更大、更全面、更活跃的社区。
2.2劣势：
1）作为企业开发，不具有媲美Flash的工作流及开发流程。
2）作为游戏开发，在支持3D及运行效率方面，不如FlashStage3D。
3）编写HTML5的应用程序，很大程度上还要编写CSS与JavaScript，对初学者来说，学习曲线较Flash高一些。
4）HTML5依然存在浏览器兼容问题。
（随着W3C与WHATWG的分裂，估计这种情况会被进一步加深）
5）在大型HTML5的项目中，Flash遇到的问题在HTML5中依然存在（例如：
效率问题），在此基础上还增加了浏览器兼容性、Ajax跨域通讯等新问题。
3.HTML5取代Flash？
3.1Flash占据市场97%的份额，长达10年之久，这样一个平台会消失？
我们先从HTML5和Flash的各种优缺点说起来分析一下。
Flash号称跨平台运行，不管你是linux还是windows，就连现在的一些安卓手机设备也能流畅运行Flash，很多网站也是运用Flash架构。
简而言之，Flash已经普及了长达10年之久，各种网站教程，开发工具也到处都有，学习成本较低，开发工具虽然大部分是收费，但是在中国没用，Flash很多高级特性，比如多文件上传等，是很多HTML5望尘莫及的，Flash在各种平台上运行，只需要安装相应的浏览器插件，虽然安卓手机部分CPU不支持Flash，但是不影响其跨平台的特点。
HTML5短时间内不能完全取代Flash，只是在web游戏和动画方面会给Flash一个不小的冲击。
HTML5必然会成为新的网页标准并影响Flash在网页特效网页动画的地位。
但是不会取代Flash。
HTML5甚至会取代一部分js代码。
但是不同的是HTML5的发展更加依赖JS，因为不管怎么说HTML5都是执行者依然不够“智能”。
它能做的事情越多就越以来JS的智能判断。
Flash与HTML5并没有这种依存关系，所以就使得他们看起来水火不容，其实Flash更像是HTML+JS的组合。
HTML5的发展只能动摇Flash的动画表现，只有HTML5+JS的共同发展才能最终击倒Flash。
而那也不是一朝一夕的事，而且Adobe也不是坐等挨打的。
4.未来趋势
4.1HTML5
1）移动优先
2）游戏开发者领衔“主演”
3）响应式设计&自动变化屏幕尺寸
4）离线缓存
4.2Flash
1）游戏制作
2）网络构件
3）广告设计
4）工控界面
5.小结
HTML5不是用户应用的迫切需求，更多是厂商试图改变软件生态格局的战略需求。
它的兼容性鉴于各大浏览器的以往表现，有待观望，不宜立即迁移应用。
并且需要一个成熟完整的开发环境，记事本+浏览器对付不了。
它功能的暴增，浏览器必须有一个高效的图形引擎和脚本引擎。
它需要杀手级应用来吸引和引导用户升级浏览器，最终完成HTML5终端的部署。
Flash是一个不断在发展的技术，有很强的灵活性，HTML5不可能完全取代Flash，众多的开发人员也不会断然抛弃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优势
跨平台：
一次开发，到处使用，不需要考虑兼容性。
这可以极大减少跨平台开发人员
升级会员 