【HTML5活动】使用HTML5对web应用系统进行提升

最新推荐文章于 2020-08-20 15:43:26 发布

housen1987

最新推荐文章于 2020-08-20 15:43:26 发布

阅读量131

点赞数

分类专栏： HTML 文章标签： HTML5 web系统拖拽

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

对于一个web应用系统来说，javascript似乎是首选，近几年兴起的flex也渐渐占据一席之地，笔者是电信BI系统软件开发人员，对于web系统开发来说，拥有一套完备的、易使用的web框架（主要指前台），真的是太有必要了。

js方面就不多说了，一个强大的脚本语言，现在哪个网站或系统没用到js，那真的是太强悍或太简单了，flex那么牛叉，还是得用js垫脚。

笔者的web系统并不是很成熟，一些常用的控件或布局都是使用js编写的，优点是能实现功能，至于缺点，那就太多了：

1 速度慢

js再牛叉，也没html快，可惜html能实现的东西太少了，满足不了现实需求啊！

2 理解困难

js不是一门简单的语言，比起java来讲，js更具挑战性，想成为一个合格的js开发人员，那可是要3-5年的功夫的。

3 大量代码堆砌

再牛的js框架，也是需要添加业务的，因此，一个页面中包含4,5千行js代码，那是太平常的事情了。

4 弱小的图形功能

ie的vml和ff的svg

然而，HTML5的出现，似乎给我们指出一条明路：

1 全新的输入表单

2 Canvas 对象，具有矢量绘图能力

3 编辑、拖放功能

4 内置视频、音频播放功能

...

下面，主要看一下那些功能是web系统所能用到的：

1 input的required属性

Name: <input type="text" name="usr_name" required="required" />

样例地址：http://www.w3school.com.cn/tiy/loadtext.asp?f=html5_form_required

说起这个required，真的是让人爱不起来啊，空内容必须提示，要不用户怎么知道什么内容必填呢？平时都用js的value=''判断了，还得写div层，现在好了，有HTML5，这个部分要告别js了。

2 input的placeholder属性

输入域为空时，要显示一个默认的提示，比如：‘请填入11位电话号码’等，这个在查询时很有必要，现在很多漫画网站上也有这个提示的。

<input type="search" name="user_search"  placeholder="Search W3School" />

样例地址：http://www.w3school.com.cn/tiy/loadtext.asp?f=html5_form_placeholder

3 input的pattern属性

当一个文本框只能输入数字或某些特定字符时，该怎么办呢？在HTML5以前，恐怕又是js显威了。现在不怕了，HTML5有新方法了，只要你会写正则，想怎么控制文本框都行！

只能输入3位字符的文本框：

Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />

样例地址：http://www.w3school.com.cn/tiy/loadtext.asp?f=html5_form_pattern

4 form属性

只有写在form内部才能算是本form的表单元素？

那是以前，现在不一样了，只要有form的id，怎么写都能指向特定的form，跑不了的！

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

例如以上代码：lname不是form内部的元素，也可以是form的元素。

5 list属性

相当于文本框形式的select元素，暂时来看，用处不是很大。

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

测试地址：http://www.w3school.com.cn/tiy/loadtext.asp?f=html5_form_datalist

6 video属性

优点：浏览器内置程序，不需要外部插件，而且加载速度稍微快一点。

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

测试地址：http://www.w3school.com.cn/tiy/loadtext.asp?f=html5_video_all

7 canvas元素

绘制HTML图形，目前出了几款比较漂亮的HTML5图表，渲染速度快，而且拖动起来也很流畅。

iGrapher：基于web的股票预测分析图形

8 本地存储数据

如果要在前台使用js字符串储存一部分数据的话，那是相当消耗内存的，等不了多久，浏览器就会因为内存耗尽而死掉了，HTML5提供的客户端存储解决了这个问题。

这样一来，即使是做大数据量的前台分页，也是有可能的。

测试地址：www.w3school.com.cn/tiy/loadtext.asp?f=html5_webstorage_local_pagecount

9 email类型input

如果你会写正则表达式的话，使用input的pattern也能实现这个功能。

E-mail: <input type="email" name="user_email" />

测试地址：http://www.w3school.com.cn/tiy/loadtext.asp?f=html5_form_email

10 拖拽功能

HTML5的拖拽不是什么新鲜物，IE版本早已有之，只是HTML5将其“拿来”了，以前我们使用div层做拖拽，一样做得顺风顺水，说到底，HTML5的拖拽的本质是增强了浏览器动作监听：ondragstart,ondragend,ondragenter,ondrop,ondragover，虽然使用mouse的over、down、up监听一样可以模拟此功能，但是个人觉得还是标准的好，HTML5算是把IE的一大优势集合进来了。

PS：web系统中使用拖拽功能也是一大趋势，更能增强系统易操作性。