`
housen1987
  • 浏览: 344595 次
  • 性别: 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应用系统开发课件

    Web应用系统的开发还涉及版本控制工具Git的使用,持续集成/持续部署(CI/CD)流程,以及性能优化和调试技巧。学习者还会接触到测试,包括单元测试、集成测试和端到端测试,确保代码质量。 总之,"Web应用系统开发课件...

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

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

    web应用系统设计课件

    这份资源包含九个章节的PPT课件,分别对Web应用系统的不同方面进行了深入讲解,旨在帮助学习者掌握构建高效、稳定且用户友好的Web应用程序所需的技能。 第1章主要介绍了Web应用系统的基础概念,包括Web服务器、...

    用HTML5开发ios应用

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

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

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

    web应用系统开发课程管理系统

    在IT行业中,Web应用系统开发是一项关键技能,尤其在教育领域,它被广泛应用于课程管理。"Web应用系统开发课程管理系统"是一个专为教学设计的项目,它利用HTML(超文本标记语言)作为基础,构建了一个能够管理和组织...

    HTML5 For Web Designers

    本书还可能探讨了HTML5与CSS3、JavaScript以及其他Web技术的结合使用,展示了如何构建现代、高效、易维护的Web应用程序。通过学习《HTML5 For Web Designers》,设计师不仅能够掌握HTML5的基本语法,还能了解到如何...

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

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

    使用 HTML 5 创建移动 Web 应用程序,第 1 部分: 联合使用 HTML 5、地理定位 API 和 Web 服务来创建移动混搭程序

    这篇博客文章"使用HTML 5创建移动Web应用程序,第1部分:联合使用HTML 5、地理定位API和Web服务来创建移动混搭程序"探讨了如何利用HTML5的新特性,特别是地理定位API,结合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的实际技能。通过分析和修改这个项目,学生可以深入...

Global site tag (gtag.js) - Google Analytics