html5论文Word文档下载推荐.docx
《html5论文Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《html5论文Word文档下载推荐.docx（12页珍藏版）》请在冰豆网上搜索。
localStorage.setItem（data.name,str）;
alert（“数据已保存！
”）；
HTML5甚至增加了支持SQLLite的文件类型的SQL数据库，让用户的数据直接保存在本地的数据库中，进一步的减轻了服务器的负担和用户的流量，但是目前这一功能浏览器支持度不够高。
3WebWorker多线程处理
WebWorker是在HTML5中新增的、用来在Web应用程序中实现后台处理的一项技术。
使用这个JavaScriptAPI，开发人员可以很容易的创建在后台运行的线程（在HTML5中称为worker），如果将可能耗费较长时间处理交给后台去处理，对用户在前台页面中执行的操作就完全没有影响了，让用户的体验更加流畅。
HTML5创建后台线程的方式很简单，而且可以实现线程的嵌套和多个子线程之间的通信。
下面的代码展示了线程的创建和接收的机制：
varworker=newWorker（"
work.js"
）;
/在HTML文档中创建线程
worker.postMessage（"
halloworld"
//发起一个消息给线程
onmessage=function（event）//在work.js里面可以接收到这个信息：
{
vardata=event.data;
//接收到的信息赋值给data
close（）;
//关闭线程
}
4离线应用程序
在web应用中使用本地缓存的原因之一是为了支持离线应用，所谓的离线应用，是指当浏览器无法上网时，web应用可以继续使用，而不影响正常的工作生活。
这里需要强调，本地缓存和浏览器网页缓存是有区别的，本地缓存是对整个web应用程序服务的，而浏览器网页缓存只服务于单个的网页，并且任何网页都可以进行浏览器网页缓存，而本地缓存只缓存那些你指定缓存的网页。
创建HTML5离线应用步骤如下：
（1）创建离线清单（manifest）
创建一个minifest格式的文件，在里面说明哪些资源需要离线缓存，哪些资源需要在线访问，如设置一个demo.manifest文件，代码如下：
CREATEMANIFEST
#需要离线缓存的文件
CACHE:
other.js
jQuery.js
#必须连接服务器在线访问的文件
NETWORK
ex.php
aaa.php
（2）配置服务器
在服务器中增加Mine类型，如需要在Apache服务器中的mine.types文件中添加如下内容：
text/cache-manifestmanifest
（3）获取manifest清单
需要在离线缓存的网页中指定manifest属性的manifest文件的URL地址：
<
htmlmanifest=”demo.manifest”>
/html>
5获取地理位置信息
在HTML5中，为navigator对象增加了一个geolocation属性，可以使用geolocationAPI来获取当前的位置，以下示例用来获取当前位置的经度和维度：
navigator.geolocation.getCurrentPosition（
function（position）
{
document.write（“经度：
”+position.coords.latitude+”维度：
”+position.coords.longititude）;
}）;
进一步的，在获取位置的经度纬度后，可以通过XX地图API来获取当前位置的周边的商铺信息、街道信息等，下图为获取南京师范大学周边的饭店等信息，由于代码繁杂，就不在这里做演示。
图2：
当前位置的经度纬度
图3：
当前位置的周边信息
6文件读取与拖放
在HTML5中，从web网页上访问本地文件系统变得十分的简单。
HTML5提供了FileAPI接口，通过这个接口，我们可以很容易的获取文件的信息，如文件的类型、文件的大小等等，
例如：
varfile;
file=document.getElementById（“file”）.files[0];
//得到用户上传选择的第一个文件
alert（“上传文件的类型：
”+file.type+“上传文件的大小：
”+file.size）;
同时可以通过FileReader来创建对象，从而能够读取上传文件的内容。
HTML5同时支持文件的拖拽功能，可以把元素的属性设置为draggable，通过拖放操作的API实现网页元素甚至是外部文档的任意拖拽，很方便的实现了网页的拖拽布局与外部文档的上传处理。
二HTML5的浏览器兼容性
HTML5新增了一些标签,通过测试这些新增标签的浏览器兼容性,我们能够知道哪些标签浏览器能够支持,哪些标签浏览器不支持,当我们知道了浏览器的兼容性后,我们就能够根据特定的浏览器做兼容性处理,接下来我们从以下几个方面对浏览器的兼容性进行测试.
1HTML5Web应用程序
HTML5为支持Web应用程序开发新增了包括本地存储、离线存储、地理定位、Workers和WebSockets等特性,从图中我们可以看出,Chrome浏览器的对这方面的支持性最好，它乎支持全部特特性,因为WebSQLDatabase已经被W3C放弃了，所以浏览器不支持也没关系，
在中国用户量最大的IE浏览器,从IE6到IE9开始逐步支持HTML5的这方面的特性,相信在以后的版本里IE浏览器对HTML5的支持度会逐步增加。
图4web应用程序的浏览器兼容性
2HTML5图形和内嵌内容
HTML5的画图功能是较HTML其他的版本的一个亮点，内置了Canvas，Audio，Video，SVG、WebGL和SMIL等重要特性对象。
从图中我们可以看出Chrome、Firefox、Safari、Opera以及IE9/IE10都支持这些图形功能,这让开发HTML5人员无需在为某个浏览器单独写代码,大大的缩减了开发工作。
图5图形和内嵌内容浏览器兼容性
3HTML5音频编码
通过对音频编码识别能力的测试，我们可以看出，Chrome依然表现出色，对
HTML5
音频格式又是全部支持，Safari除OggVorbis格式外也都全部支持。
而令人不解的是IE竟不支持自己的wav格式,在写HTML5代码的时候应该注意这点。
图6HTML5音频编码浏览器兼容性
4HTML5视频编码
对
视频的支持最好的还是Chrome，又是全部支持。
Firefox和Opera仅支持OggVorbis和WebM两种视频格式，不支持H.264，相反的IE9/，IE10和Safari只支持H.264。
目前
80%的视频使用H.264编码，期待H.264早日统一的视频编码标准，让更多的浏览器实现对它的支持。
图7视频编码浏览器兼容性
5HTML5表单输入
新增了很多新的input类型，例如datetime、range、color等等，以前这些都是需要使用JavaScript才能实现的功能，如今只需要设置input类型就能实现。
有点让人惊奇的是，Opera对其全部支持，而一直表现良好的Chrome，还不支持DateTime类型，其它的都支持，IE10和Safari都相当程度的支持，而Firefox支持的标签相对较少，这方面还需努力。
图8表单输入浏览器兼容性
6HTML5表单属性
表单属性也是对表单功能的重要改进，简化了Web应用开发。
在Mac平台，除了Safari还不支持List属性外，其它属性都支持。
在Windows平台，Chrome、Opera和IE10全部支持，与表单相对应，Firefox在支持表单属性方面也很显不足，甚至不如IE10，Min、Max和Step属性都还不支持。
图9表单属性浏览器兼容性
综上分析，对
支持最好的是Chrome，而中国用户量较大的IE10已经能和Safari、Firefox、Opera旗鼓相当了。
概括来说，各大浏览器对HTML5的支持正在不断完善，越来越多的企业和开发者也在尝试在项目中使用
，特别是在移动互联网领域，已经有很多优秀的应用开发出来。
另外，在进行调试HTML5的程序时，笔者建议使用Chrome浏览器，它对标签的支持度最好，使我们不会产生不是代码错误而是浏览器不支持的苦恼，对于不支持的标签，笔者建议可以通过浏览器类型检测然后使用JavaScript等代码进行弥补。
三HTML5与XHTML的对比
1在文档类型声明方面
xhtml的文档声明需要以下代码：
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML
1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
，
而html5只需要以下简单的代码<
doctypehtml>
，由这两者对比可见：
在文档声明上，xhtml有很长的一段代码，并且很难记住，而html5却是不同，只有简简单单的声明，很方便人们的记忆和书写。
2在结构语义方面
html:
没有体现结构语义化的标签，我们通常都是这样<
divid="
header"
/div>
.来表示网站的头部。
而html5，在语义上有很大的优势。
提供了一些新的标签，比如:
header>
、<
nav>
menu>
aside>
section>
article>
figure>
footer>
。
这些新增的标签，能够更加清楚的说明标签内容的在文档中的地位与作用，这样一个结构良好的HTML文件能够更加容易被搜索引擎搜索到，同时，在商业网站进行SEO优化时，使用HTML5无疑提供了巨大的便利，它能够让搜索引擎更加容易的搜索到这个网站，网站也就拥有了更好的排名，所以说，HTML5的新增的结构化标签是让HTML文档的结构更加清晰，也让网站更加容易被搜索引擎搜索到。
3多媒体播放方面
在xhtml中插入多媒体必须使用<
object>
和<
embed>
而且还要为这两个元素添加许多属性和参数，使的代码冗长而笨拙，而且需要使用第三方插件Flash，如果用户没有安装Flash，则无法播放，<
的代码使用如下：
objectclassid="
clsid:
F08DF954-8592-11D1-B16A-00C0F0283628"
id="
Slider1"
width="
100"
height="
50"
<
paramname="
BorderStyle"
value="
1"
/>
MousePointer"
0"
Enabled"
Min"
Max"
10"
/object>
而在HTML5中，插入多媒体只需要<
video>
audio>
两个标签即可，代码量变少，很重要的是无需客户安装Flash插件。
而且提供了许多JavaScriptAPI，方便开发时控制视频的播放，让视频播放更加的随心所欲。
标签的使用示例如下：
videowidth=”300”height=”300”controls=”controls”src=”abc.mp4”>
你的浏览器不支持video标签
/video>
4在表单方面
HTML5对<
form>
表单的标签进行了大量修改，添加了很多新的属性。
如placeholder属性，实例代码如下：
inputtype=”search”placeholder=”请输入要搜素的产品”/>
能够提示用户在搜搜框中的内容。
在XHTML的input的type类型较少，而HTML5的type类型增添了很多，如email、tel、mumber、range、date等类型，这些类型能够更好的控制用户输入，同时也让用户明白应该输入什么内容。
示例代码如下：
inputtype=”email”value=”email”/>
//要求用户输入email地址
与此同时，表单中增加了验证的功能，如使用required属性，检测用户输入内容，当用户输入内容为空时，则无法提交内容。
inputtype=”usrname”value=”username”/>
//要求用户名必须输入
5在修改标签方面
HTML5修改了一些XHTML中的一些标签，让HTML5更加符合当前的web开发应用的现状。
如改良了了dl标签，让dl标签的使用更加的明确，规范，示例代码如下：
dl>
<
dt>
计算机<
/dt>
dd>
用来计算的仪器……<
/dd>
显示器<
以视觉方式显示信息的装置……<
/dl>
对cite标签加以严格限制，只能表示作品，而不能够包括任何作者名；
对small标签则进行了重新的定义。
从仅是一个表现性的元素，变成了表示免则、警告、版权等附属细则的语义元素。
这些标签的修改让开发人员能够更加明确的使用这些标签，能够更符合开发的规范。
6删除标签方面
HTML5在新增了很多功能性标签的同时，HTML5也删除了一些以前XHTML或者是HTML中有的已有的标签,一些标签的删除是因为可以用CSS来替代，如<
b>
font>
等标签，一些标签是因为失去了使用的价值，很多编程人员已经不再使用了，如<
frame>
center>
big>
等标签。
这些标签的删除，更加有利于HTML文档的内容和布局分离，让HTML只负责文档内容，而布局排版使用CSS就好了。
XHTML和HTML5的差别还体现在HTML5的一些特性上，如绘图功能、离线存储等，这些特性体现在标签上，也是XHTML所没有的，因为前面HTML5特性中做过介绍，此处就不在赘述。
结论:
HTML5作为刚刚发布的新的标准,虽然很多标签的浏览器的兼容性并不是那么的好,但是其很多新的特性，对开发web应用有很重要的价值和推动作用。
在移动端,尤其是随着安卓手机的普及,越来越多的网站都开始用HTML5标签书写,对于已经完成的网站,很多也逐步向HTML5标签的过渡,所以对于广大的学习者尤其是编程人员,不应困惑于浏览器兼容性，随着时间的向前发展，相信会有越来越多的浏览器支持HTML5，要应加强对HTML5的学习,以便满足不断变化的社会需求。
参考文献
1.W3CSchool.HTML5教程[EB/OL].
2.效果惊艳的HTML5动画应用.PHP100[EB/OL].
3.杜仁栋.HTML5多线程[EB/OL].
4.XX地图.XX地图API[EB/OL].
5.黑色的咖啡.Canvas中beginPath的重要性[EB/OL].
6.刘欣，王雨竹.（2013年）HTML5入门经典（第一版）.北京：
机械工业出版社
ResearchSummaryofHTML5
（SchoolofEducationalScience,NanjingNormalUniversity,Nanjing,210097,China）
Html5’sstandardhasalreadypublishedin2014year10th,Mamysoftwareshasbeenmadeusinghtml5.Aswell,Manyprogrammersareconfusedinmanyproblems,likeweathertheyshouldlearnhtml5ornot,andweathertheyusehtml5makingwebseiteornotforthebrower’scompatibilityaodlittleknowledgeathtml5.Thepassagewilltalkaboulthtml5’sproperty,brower’scompatibility,andconparehtml5andxhtmlinordertomakewellunderstandofhtml5.Atthesanmetime,thepassageprovidethehelpoftheuseandstudyofhtml5fortheprogrammer.
Keywords:
HTML5,newproperty,compatibility
升级会员 