`
housen1987
  • 浏览: 344941 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

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

    博客分类:
  • HTML
阅读更多

    对于一个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系统中使用拖拽功能也是一大趋势,更能增强系统易操作性。

   

    样例地址:http://www.zhangxinxu.com/study/201102/html5-drag-and-drop.html


以上便是本人遇到并实践过的HTML5的一些新功能,其实HTML5说到底只是提供了一些基本的页面元素内容而已,有了它,我们可以更方便地实现更多的功能,优化我们的系统,但是,它毕竟不是脚本型语言,用它来实现业务逻辑有点异想天开了,期待javascript3.x的到来!


我们可以做的:

    拿HTML5原生的一些方法或属性,代替js中的部分代码,加快系统运行速度,或实现以前未能实现的功能!

3
0
分享到:
评论

相关推荐

    构建实时Web应用:基于HTML5 WebSocket、PHP和jQuery(对应英文版)

    在开发实时Web应用之前,需要进行周密的规划。首先需要确定是开发Web应用还是原生应用,因为它们各自有不同的优缺点。接着,需要确定应用的功能性和结构,这包括定义应用的核心功能、用户界面布局以及如何管理后端...

    用HTML5开发ios应用

    开发者可以创建一个纯HTML5的Web应用,然后在iOS应用中通过WebView加载。 ### 关键技术 1. **HTML5的新特性**:如离线存储(localStorage)、拖放功能、媒体元素(video/audio)、canvas绘图、geolocation定位等,...

    HTML5漂亮的web系统一整套图标

    HTML5的引入使得Web应用程序可以拥有更强大的功能,例如离线存储、媒体元素、canvas画布、svg矢量图以及geolocation地理位置等。这些图标集的出现,正是为了配合HTML5的特性,提供一套与现代网页技术相匹配的图形...

    WebQQ_3.0:让html5改变你对Web的看法

    WebQQ 3.0 的推出,借助 HTML5 技术,为用户带来了全新的网络体验,一改之前对Web应用的固有看法。HTML5的出现,不仅改变了Web开发的方式,也拓展了Web应用的功能与性能。WebQQ 3.0 中HTML5的应用主要集中在以下几个...

    HTML5高仿Win10桌面,可快速开发web界面

    HTML5是一种先进的Web技术,它在过去的十年里极大地改变了...开发者可以通过学习和利用这个项目,不仅可以快速开发出具有现代感和桌面级体验的Web应用,同时也能深入理解Web技术的最新进展,提升自身的前端开发技能。

    HTML5 WebGL 3D 仓储管理系统

    HTML5 WebGL 3D 仓储管理系统是一种利用现代网络技术实现的高效、直观的库存管理解决方案。这个系统通过在网页上...这种系统不仅提高了工作效率,还提升了用户体验,预示着未来更多领域可能受益于3D技术的创新应用。

    System.Web.Mvc.Html5.dll .net html5开发必备

    《深入理解System.Web.Mvc.Html5.dll:.NET HTML5开发的核心组件》 在.NET框架的Web开发领域,ASP.NET MVC(Model-View-...通过理解和掌握这个库的使用,开发者可以更好地利用HTML5提升Web应用的功能和用户体验。

    提升网页性能:HTML5 Web Workers的深入应用与代码实践

    HTML5 Web Workers作为一种在浏览器后台线程中执行JavaScript代码的技术,为提升页面性能提供了有力支持。通过合理应用Web Workers,开发者可以优化数据处理、复杂计算和长时间运行任务等场景的性能表现,从而提升...

    HTML5移动Web开发指南

    HTML5移动Web开发指南是一本由唐俊开编著的专业书籍,主要针对的是利用HTML5技术进行移动Web应用开发的领域。HTML5是超文本标记语言(HyperText Markup Language)的第五个重大版本,它的出现极大地提升了Web开发的...

    HTML5移动Web开发实战教程

    HTML5是下一代网页标准,它的出现极大地扩展了Web应用程序的功能,使得开发者能够在移动设备上创建更强大、更富交互性的应用。本教程聚焦于HTML5在移动Web开发中的实际应用,旨在帮助初学者和有一定经验的开发者提升...

    基于 HTML5 移动 Web App 开发.pdf

    HTML5是互联网核心技术之一,它自20世纪90年代诞生以来,经过多次迭代,目前的HTML5版本已经成为Web应用程序开发的重要工具,特别是在移动Web App开发领域。HTML5的主要特征包括语义化的结构化标签、离线存储功能、...

    HTML5+CSS3 Web前端设计基础教程-PPT.rar

    在这个PPT教程中,你可能会学到如何使用HTML5的新特性,如 Semantic Elements(语义化元素)来提高网页可读性和可访问性,Canvas和SVG(可缩放矢量图形)用于创建图形和动画,以及Web Storage和Web Workers来优化...

    HTML5应用开发技术-移动互联中的Web应用.pptx

    HTML5应用开发技术是当前移动互联领域的重要组成部分,它极大地推动了移动Web应用的发展。HTML5作为一种先进的标记语言,为移动设备提供了丰富的功能和优化的性能,使得开发者能够创建出更具交互性和响应性的Web应用...

    基于html5的web前端设计(旅游景点介绍)

    这个项目不仅涵盖了Web开发的基础知识,还涉及到用户体验设计和数据交互,对于初学者来说,它是一个很好的实践平台,可以帮助理解和应用HTML5、CSS和JavaScript的实际技能。通过分析和修改这个项目,学生可以深入...

    Java Web数据库系统应用开发与实例源代码

    2. **数据库系统**:在Java Web应用中,常见的数据库管理系统如MySQL,它是一个开源、轻量级的关系型数据库,适合中小规模应用。连接MySQL通常使用JDBC(Java Database Connectivity),它是Java平台的标准接口,...

    HTML5 and JavaScript Web Apps

    HTML5和JavaScript Web应用主要介绍了如何使用HTML5和W3C标准在各种设备和浏览器上构建跨平台的Web应用程序。本书适合那些将更多代码转移到前端,利用JavaScript、CSS和HTML进行开发的程序员,同时提供了支持离线...

    非常实用的html5实现问答系统源码下载

    HTML5是一种先进的网页开发语言,它在Web应用领域有着广泛的应用。这个"非常实用的HTML5实现问答系统源码下载"提供了一个基于HTML5构建的交互式问答平台的源代码,可以帮助开发者理解和学习如何利用HTML5特性来创建...

Global site tag (gtag.js) - Google Analytics