HTML5能为我们带来什么

原创 2015年11月20日 22:52:04

说起HTML5,表面上是说它是HTML更新的第五个版本,而实际上,HTML5有很多内在的东西。正是因为HTML5的出现,使得web应用的开发变得更加方便快捷,更加标准化,提高了web应用的性能。可以说HTML5web应用现在能够被广泛接受。

首先我们来看一下HTML5给我们带来了哪些新功能。

• 本地缓存

本地存储Web storage的作用是在网站中把有用的信息存储到本地的计算机或移动设备上,然后根据实际需要从本地读取信息。它提供两种存储类型API接口,分别是sessionStorage和localhostStorage,其中前者在会话期间内有效,后者就存储在本地,并且存储是永久的,但是两个的API使用基本上是相同的。

利用HTML5的本地存储功能,我们可以进行用户信息的保存(类似于HTML4中的cookie)、数据存储与读取等诸多功能。注意Web Storage官方建议每个网站的本地缓存大小为5MB,这相比于HTML4中cookie的几kb要大得多,功能也更强大。

接下来利用代码来具体解释一下Web Storage的使用方式,以localStorage为例,js代码如下:
    window.onload = function(){

localStorage.clear();//清除之前localStorage存储的全部数据

localStorage.setItem(“userData”,”storage demo”)//setItem方法可以设定缓存数据的值,采用键值对的形式

}

除了基本操作,还可以对Storage事件进行监听:

window.onload = function(){

window.addEventListener(“storage”,function(e){

console.log(e);

},true);

}

• 离线缓存

离线缓存可以在即使没有网络的状态下web应用仍能正常运行,非常有实用价值。HTML5的离线缓存功能为web应用(尤其是移动应用)的开发建立了良好的条件。

开始使用离线缓存功能很简单,只要在html标签中加入mainfest属性,并指定mainfest文件即可。mainfest文件的作用是告诉浏览器哪些文件需要进行离线缓存操作。举例说明.mainfest文件的应用:

CACHE MAINFEST

index.html

test.js

NETWORK

/images/

这些内容就表明,index.html和test.js这两个文件被定义为缓存文件,跟在CACHE MAINFEST后面。当网络不可用或不在线时,此部分文件会通过本地缓存直接读取。NETWORK后面的文件定义为无论这些文件是否已经被缓存,都必须从网络中下载。

除此之外,还要对.mainfest文件进行必要的配置,在web.xml中

<mime-mapping>//.mainfest文件是MIME类型文件

<extension>mainfest</extension>

<mime-type>text/cache-mainfest<mime-type>

</mime-mapping>

有了HTML5离线缓存技术,就可以使网站或者web开发的应用在无网络的情况下也可以进行访问,大大减少了网络消耗,也让利用web开发出来的app性能大幅提升了。

• 新型标签

①布局语义化标签

HTML5新增了许多语义化的布局标签,用以代替之前每个布局都要使用div的无语义性的混乱局面。HTML5提供的新标签包括<head>、<footer>、<aside>、<article>等,基本一个页面的每个布局部分,都有一个对应的标签。

HTML5语义化标签的主要作用主要体现在以下三个方面:

◎对移动端设备更加友好

◎使用语义化的布局标签更有利于搜索引擎的的抓取

◎语义化标签简洁,便于软件的维护和二次开发

使用语义化标签,更加符合现在的web标准。

②其他标签

HTML5增加了许多新功能,这些功能有的对应标签。

多媒体标签。比如<video>标签可以支持视频播放功能,使用HTML5的video标签配合一些web视频播放器制作插件可以制作出效果很好的网页播放器。这里推荐video.js,比较美观,性能较好,且学习成本比较低。

<canvas>画布,将在后面进行详细介绍。

表单相关的新标签,将在后面进行详细介绍。

• Geolocation地理定位

目前,地理定位基本上是每个移动app都支持的功能。而HTML5也开始支持地理定位功能,这给利用HTML5开发移动app提供了极大帮助。

Geolocation的使用方法很简单,主要有三个方法:

getCurrentPosition():获取当前用户的地理位置信息

watchPosition():定期轮询设备的位置

clearWatch():用于停止watchPosition()的轮询

目前大部分浏览器都支持Geolocation API。

• 表单

表单一直都是一个web不可缺少的部分。HTML5中提供了非常丰富的表单标签和属性。首先我们来了解几个HTML5为表单控件新添加的标签。

<meter>/<progress>:用于设置进度条,配合js即可方便的搭建出一个动态进度条。

<details>+<summary>:零js即可创建折叠内容,结构如下:

<details>

<summary>This is the summary</summary>

This contains detail things.

<details>

除了新的标签,input标签还增加了许多类型(type),包括search/email/number/type/range/url等。

表单标签的新增属性有placeholder/autofocus/list/autocomplete等。

HTML5极大地丰富了表单内容,让编写代码变得更加简单,实现功能更加快捷。

• canvas

个人认为canvas是HTML5中最强大的功能,有了canvas,HTML5在图像这方面变得无所不能(有关canvas的具体实例请见其他博客)。

canvas可以进行切图、画图、图像的像素级操作等一系列功能,十分强大。说起canvas,应用最多的应该是基于HTML5的游戏。利用HTML5的canvas功能,配合js,可以开发出各种各样的游戏。同时,像素级的操作也让HTML5 canvas可以处理许多细致的图像问题。

创建一个canvas画布很容易,在html中使用<canvas>标签,js代码如下:

var canvas = document.getElementById(canvas1);

var context = canvas.getContext(“2d”);

canvas可以创建丰富的图形,包括基本图形、函数曲线等。具体的使用技巧可以查看http://blog.csdn.net/clh604/article/details/8536059这篇博客。

综上,HTML5提供的新功能,使HTML5在移动应用开发、游戏开发、规范开发等方面,都有了质的飞跃。深入学习HTML5,十分必要。

 

 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML5能为我们带来什么?(二)

3. 手机里没有Flash了 在HTML5之前,Flash是一个能够集中展示视频、音频等各种媒体形式的插件,它是部署在亿万浏览器里的商业插件,这已经成为事实上的网页标准。但是,HTML5把这个标准打...
  • bwf_erg
  • bwf_erg
  • 2017年02月13日 18:46
  • 54

HTML5能为我们带来什么? 面试必备!

说起HTML5,表面上是说它是HTML更新的第五个版本,而实际上,HTML5有很多内在的东西。正是因为HTML5的出现,使得web应用的开发变得更加方便快捷,更加标准化,提高了web应用的性能。可以说...
  • i10630226
  • i10630226
  • 2015年12月08日 10:08
  • 736

HTML5能为我们带来什么?(一)

HTML5仿佛在一夜之间,成为了技术的翘楚,HTML5能给我们带来什么呢?   1. 手机里原生的APP将会减少 原生的app使用比较多的就是安卓和iOS,在HTML5出现之前,我们手机里安装的...
  • bwf_erg
  • bwf_erg
  • 2017年02月13日 18:41
  • 52

大数据能为我们带来什么

原文:http://www.cognoschina.net/home/space.php?uid=28587&do=blog&id=47311      很久没有写东西了,将近1年的...
  • bailin710258
  • bailin710258
  • 2014年12月12日 10:48
  • 1143

LBS能为我们带来什么

LBS,基于地理位置的服务。我认为lbs还是很有发展潜力的,该类型的软件主要是运用于手机平台上,对手机的智能化有一点要求,相信不计的将来大家都能玩上真正的智能手机,那时移动应用将是主流,就目前的趋势也...
  • haojianfeng11
  • haojianfeng11
  • 2011年05月05日 02:05
  • 338

工作到底都能给你带来哪些好处?

在离开一家公司之前,你的心态是充满感恩和不舍,还是愤恨和怨念?无论你留还是走,给自己列一个list,原来它还有这么多值得感恩的地方。 1每月工资,供你生活 无论你现在实习还是在做全职工...
  • u010794281
  • u010794281
  • 2015年09月05日 18:23
  • 1088

HTML5将给我们带来什么

HTML5原本是由Opera、苹果和火狐(Mozilla基金会)早在2004年就已经推出的标准,但直到2008年时才被国际组织W3C(万维网联盟)定名为HTML5。  由于HTML5标准强化了Web网...
  • playkid123
  • playkid123
  • 2015年03月23日 11:57
  • 151

什么是数据挖掘?有什么用?

定义数据挖掘(Data Mining),就是从存放在数据库,数据仓库或其他信息库中的大量的数据中获取有效的、新颖的、潜在有用的、最终可理解的模式的非平凡过程有什么用?数据挖掘,简单的说就是有历史数据,...
  • wenjie847
  • wenjie847
  • 2010年10月10日 11:09
  • 1878

游戏给我们带来了什么……?

我是一个游戏爱好者(不是很疯狂的那种),没事的时候就玩玩游戏。不知道是怎么的玩游戏的时候时间过的很快(比上课的时间快的多呢),虽然不是样样都玩的好,但是至少在这个过程中得到了不少东西(当然有好有坏啦)...
  • vr86472922
  • vr86472922
  • 2006年03月09日 17:03
  • 790

HTML5 将为我们带来什么商业价值

HTML5 将为我们带来什么商业价值 http://www.javaeye.com/news/17249  2010年上半年的苹果与Adobe的冲突,使HTML5的存在一夜之间被 很多 人所...
  • warlen
  • warlen
  • 2010年08月12日 11:48
  • 310
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5能为我们带来什么
举报原因:
原因补充:

(最多只允许输入30个字)