Html5 学习系列(一)认识HTML5

引言,认识两个标准制定的组织

        在讲什么是Html5之前得先了解两个组织;WHATWG :网页超文本技术工作小组(英语:Web Hypertext Application Technology Working Group,缩写为WHATWG),是一个以推动网络 HTML 5 标准为目的而成立的组织。在2004年,由OperaMozilla基金会苹果这些浏览器厂商和一些相关团体形成的一个松散的、非正式的协作组织,这些团体希望发展一些新的技术,从而开发人员可以在互联网上编写并部署应用。 另外一个就是大家熟悉的W3C :万维网联盟(World Wide Web Consortium,W3C),又称W3C理事会,它主要是为解决web应用中不同平台、技术和开发者带来的不兼容问题,保障Web信息的顺利和完整流通,万维网联盟制定了一系列标准并督促Web应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范,开发中使用的导则和解释引擎的行为等等。W3C也制定了包括XMLCSS等的众多影响深远的标准规范。

那什么是HTML5呢?

         HTML 5草案的前身名为Web Applications 1.0,是在2004年WHATWG提出,再于2007年W3C接纳,并成立了新的HTML工作团队。在2008年1月22日,第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作,仍须多年的努力。目前FirefoxGoogle ChromeOperaSafari(版本4以上)、Internet Explorer 9已支援HTML5技术。 

HTML5本质并没有对之前HTML4版本的规范进行彻底的变革,更令人欣喜的是,HTML5一开始设计就考虑了跟之前的标准进行兼容。而且把最新的WEB开发的一些新技术新的规范引入进了新版本的标准中。那么它的本质是什么呢?其实HTML5的发展就是html,css,jsapi的发展,用另外一句话解释就是:HTML5=HTML+CSS+JSAPI。

HTML5带给我们的是什么呢?

1、让Web再次回归到富客户端地步,而且更加的独立,减少了对第三方插件的依赖。

     比如:之前的HTML4的标准中并没有对于视频、音频以及其他的富客户端技术支持的非常好,这就使得Flash和SilverLight变得异常的成功。而在HTML5新标准中原生的就支持音频、视频、画布等技术。让我们的WEB程序拥有更多富客户端表现的方式,而且让我们的WEB程序更加独立,更好的适应多种形式的客户端。

2、对本地离线存储的更好的支持 

     由于之前想在客户端保存一些数据都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。 

HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。有了本地数据库的支持,让一些简单的离线应用也成为了可能。 

3、新的特殊内容元素,更好的支持SEO以及方便视障人士使用

     现在所有的站点基本上都是Div+CSS布局,几乎所有的文章标题、内容、辅助介绍等都用Div容器来承载。搜索引擎在抓取页面内容时,因为没有明确的容器的含义只能去猜测这些标签容器承载的是文章标题还是文章内容等,HTML5新标准中直接添加了拥有具体含义的HTML标签比如:article、footer、header、nav、section 

4、更加智能的表单标签

     之前的表单标签,仅仅是简单的类型的约束,比如文本框、文本域、下拉列表等,而跟业务结合紧密的表单标签数据校验等控制都没有很好的支持,而是用这些技术都基本上都是跟第三方的JS控件进行结合使用,但是这些第三方总会涉及到版本控制、浏览器兼容性、非标准等一系列的问题,而在HTML5的标准中直接添加了智能表单,让这一切都变得那么的简单,比如 calendar、date、time、email、url、search。

5、HTML5即时二维绘图 ,也就是画布的引入,让Javascript子弹飞

     画布的引入使得:Web端生成动画效果、制作Web游戏、更好的交互体验设计都增加了无限的变数,当社区充斥着乱七八糟超炫的HTML5的JS控制的效果的时候,让人无限的赞叹。HTML5 的canvas 元素使用JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

6、JS嗑药了,支持多线程

     在不影响UI update 及 浏览器与用户交互的情况下, 前端做大规模运算,只能通过 setTimeout 之类的去模拟多线程 。而新的标准中,JS新增的HTML5 Web Worker对象原生的就支持多线程。 

7、WebSockets让跨域请求、长连接、数据推送等一切都变得那么简单,Web不仅仅是Ajax

      WebSockets是在一个(TCP)接口进行双向通信的技术,PUSH技术类型。WebSocket是html5规范新引入的功能,用于解决浏览器与后台服务器双向通讯的问题,使用WebSocket技术,后台可以随时向前端推送消息,以保证前后台状态统一,在传统的无状态HTTP协议中,这是“无法做到”的。  

8、更好的异常处理

      HTML5(text/html)浏览器将在错误语法的处理上更加灵活。HTML5在设计时保证旧的浏览器能够安全地忽略掉新的HTML5代码。与HTML4.01相比,HTML5给出了解析的完整规则,让不同的浏览器即使在发生语法错误时也能返回完全相同的结果。 

9、文件API让文件上传和操纵文件变得那么简单

      由于项目中经常遇到用Web应用中控制操作本地文件,而之前都是使用一些富客户端技术比如flash,ActiveX,Silverlight等技术,面对文件JS就是个shit,就是个鸡肋。在HTML5的新的提供的FHTML5 File API 让JS可以轻松上阵了。

10、编辑、拖放、微数据、浏览历史管理、地理信息接口API、设备硬件操作API等很多的新功....

HTML5的未来?

       当然HTML5不是孤立的,Javascript API的增强,让JS变成异常强大的未来的编程武器。CSS3带给未来Web应用也是极大的新的挑战。相信由于HTML5标准化的支持,相信未来Web技术真正的可以跑在任何的端,也让我们的Web应用更加的独立,更加的轻松的融入到各个端中,HTML5 就是未来!

总结:

        通过上面HTML5的新特点,不难总结出HTML5=Javascript+HTML+CSS。HTML5的新特性带给开发者的是更友好更丰富的本地处理的API,更智能的更优雅的HTML标签,更强的本地处理的功能,通信也进一步加强。Google很早之前就意识到了,客户只要拥有一个浏览器就可以了,相信不久的将来现在的Web的应用不在对本地处理那么鸡肋,CS形式的客户端相信也会越来越少。

        作为开发者,当Adobe公司宣布放弃Flash,把最大的精力放到HTML5的开发上的时候,那你可能会看到这些趋势,当微软选择了HTML5而放弃了Silverlight继续升级的时候,那你基本上也没有什么好选择的了。HTML5的发力,的确带给我们每个开发者都带来了机会。

当然以上只是笔者的观点,每个人都有阅读新技术的角度,欢迎大家转载讨论。

我参与的厚德IT团队也同步更新,希望大家关注。(厚德IT专注于IT最新技术分享

此文章在另外一个blog同步:http://www.cnblogs.com/houodeit/archive/2012/05/22/2513655.html

时间: 2024-10-23 17:07:42

Html5 学习系列(一)认识HTML5的相关文章

Html5 学习系列(二)HTML5新增结构标签

引言 在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签. HTML5时代的召唤 HTML4与HTML5的区别 HTML5新结构标签 HTML5时代的召唤 上一代的HTML的标准: HTML 4.01 和 XHTML 1.0 距离今天已经发布了10多年了,而Web端的应用也已经翻天覆地的变换.而且Web前端没有一个统一的通用的互联网标准,各个浏览器间拥有太多的不兼容,在维护这些浏览器兼容性浪费了太多的时间.再有就是之前的多媒

Html5 学习系列(五)Canvas绘图API快速入门(1)

  引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏动画效果的原理是怎样的?本篇文章将带您在20分钟内快速了解和上手HTML5游戏开发的神器:Canvas绘制API. 一.Canvas是什么? Canvas就是一个画布,可以进行画任何的线.图形.填充等一系列的操作,而且操作的画图就是js,所以让js编程到了嗑药的地步.另外Canvas不仅仅提供简

Html5 学习系列(六)Html5本地存储和本地数据库

一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cookie的限制也就逼迫网站存储数据尽量精简,想存储复杂的.关系型的用户数据就根本不可能了.但是进入Html5时代,这一切都不叫事... 一.本地存储由来的背景       众所周知Html4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cook

Html5 学习系列(四)文件操作API

引言     在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或者跨浏览器.跨设备等情况下实现统一的表现,从另外一个角度来说就是让我们的web应用依赖了第三方的插件,而不是很独立,不够通用.在HTML5标准中,默认提供了操作文件的API让这一切直接标准化.有了操作文件的API,让我们的Web应用可以很轻松的通过JS来控制文件的读取.写入.文件夹.文件等一系列的操作,让Web应用不再那么蹩脚,而之前Web应

Html5 学习系列(五)Canvas绘图API快速入门(2)

Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片.图片处理等...如果想获得更好的阅读效果请点击老马的独立博客地址. 一.Canvas绘制线条     Context对象的beginPath方法表示开始绘制路径,moveTo(x, y)方法设置线段的起点,lineTo(x, y)方法设置线段的终点,stroke方法用来给透明的线段着色.movet

HTML5 学习总结(一)——HTML5概要与新增标签

一.HTML5概要 1.0.写在最前面 1.0.1.行业前景 https://www.lagou.com/ http://www.51job.com/ 1.0.2.课程中用到的开发工具 HBuilder.IntelliJ IDEA.MySQL.NodeJS.Spring MVC.PHP.Photoshop HBuilder:www.dcloud.com,其它(webstorm,sublime...) MySQL:http://www.cnblogs.com/best/p/6517755.html

HTML5学习资源网址收集

HTML5学习资源整理收集,相信对html5学习者有用. W3C HTML5 规范: http://www.w3.org/TR/html5/ HTML5 与 HTML4的差异:http://www.w3.org/TR/html5-diff/ Opera dev: Improve your forms with HTML5: http://dev.opera.com/articles/view/improve-your-forms-using-html5/ Comparison of layout

推荐html5学习教程:HTML5高级程序设计

今天,大多数现代浏览器都已经支持HTML5.学习体验HTML5带给Web开发的便捷.快速和强大功能,是每一位Web设计和开发人员的当务之急. 本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由.发展和现状,全面展示了如何使用 WebSocket.Geolocation.Web Storage.Canvas及音频视频等前所未有的新特性构建先进的Web应用,并以大量的示例涵盖全部HTML5 API.此外,还介绍了当今浏览器对HTML5特性的支

前端学习系列教程

Bootstrap学习系列教程 本系列教程是自己在工作中使用到而记录的,如有错误之处,请给与指正 第一章 Bootstrap简介 第二章 时间控件(DateTime Picker) 第三章 续:时间控件(TimePicker) 第四章 标签页 第五章 使用 Bootstrap Typeahead 组件(百度下拉效果) 第六章 使用 Bootstrap Typeahead 组件(百度下拉效果)(续) 第七章 模态框 第八章 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法 第