html5论文Word文档下载推荐.docx
- 文档编号:19281591
- 上传时间:2023-01-05
- 格式:DOCX
- 页数:12
- 大小:1.56MB
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html5 论文
![提示](https://static.bdocx.com/images/bang_tan.gif)