HTML5

什么是 HTML5?

HTML5 是下一代 HTML 标准。

HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。

HTML5 是如何起步的?

HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。。

WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。

HTML5 中的一些有趣的新特性:

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

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

新的特殊内容元素,比如 article、footer、header、nav、section

新的表单控件,比如 calendar、date、time、email、url、search


HTML5 特性

 语义特性(Class:Semantic)   
HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。 
本地存储特性(Class: OFFLINE & STORAGE) 
基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一)和API说明文档。 
设备兼容特性 (Class: DEVICE ACCESS) 
从Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。 
连接特性(Class: CONNECTIVITY) 
更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。 
网页多媒体特性(Class: MULTIMEDIA) 
支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。 
三维、图形及特效特性(Class: 3D, Graphics & Effects) 
基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。 
性能与集成特性(Class: Performance & Integration) 
没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术,帮助您的Web应用和网站在多样化的环境中更快速的工作。 
CSS3特性(Class: CSS3) 
在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。 
编辑本段现状在移动设备开发HTML5应用只有两种方法,要不就是全使用HTML5的语法,要不就是仅使用java script引擎。 
java script引擎的构建方法让制作手机网页游戏成为可能。由于界面层很复杂,已预订了一个UI工具包去使用。 
纯HTML5手机应用运行缓慢并错漏百出,但优化后的效果会好转。尽管不是很多人愿意去做这样的优化,但依然可以去尝试。 
HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原生应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果,不断地重复编码、调试和运行,这是首先得解决的一个问题。 
HTML5的移植非常简单,但假设每个人都会让这变成一个自动化操作。 


HTML5 <!DOCTYPE>

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:

HTML5 的改进

新元素

新属性

完全支持 CSS3

Video 和 Audio

2D/3D 制图

本地存储

本地 SQL 数据

Web 应用

HTML5 多媒体

使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。

HTML5 <video>

HTML5 <audio>

HTML5 应用

使用 HTML5 你可以简单地开发应用

本地数据存储

访问本地文件

本地 SQL 数据

缓存引用

Javascript 工作者

XHTMLHttpRequest 2

HTML5 图形

使用 HTML5 你可以简单的绘制图形:

使用 <canvas> 元素。

使用内联 SVG。

使用 CSS3 2D 转换、CSS3 3D 转换。

HTML5 使用 CSS3

新选择器

新属性

动画

2D/3D 转换

圆角

阴影效果

可下载的字体

了解更多CSS3知识请查看本站的 CSS3 教程。

HTML5 浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

HTML5 的优势和不足

HTML5的优势

  1、提高可用性和改进用户的友好体验;

  2、新标签这将有助于开发人员定义重要的内容;

  3、可以给站点带来更多的多媒体元素(视频和音频);

  4、可以很好的替代FLASH和Silverlight;

  5、当涉及到网站的抓取和索引的时候,对于SEO很友好;

  6、大量应用于移动应用程序和游戏。

 HTML5的不足

  1、HTML5 本身还在发展中,它不是用户应用的最迫切需求,更多是厂商试图改变软件生态格局的战略需求。

  2、HTML5的兼容性受限于各大浏览器表现,例如微软的IE和fireforx之间存在很多差别。

  3、HTML5需要一个成熟完整的开发环境,目前还缺少。

  4、HTML5功能的暴增,浏览器必须有一个高效的图形引擎和脚本引擎。

  5、HTML5需要杀手级应用来吸引和引导用户升级浏览器,最终完成HTML5终端的部署。


继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5圆角例子</title> <style type="text/css"> body{ background-color: #000000; } div{ width: 100px; height: 100px; margin: 5px; border: 5px solid white; background-color: #efefef; } #dv-all{ border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px; } #dv-top-left{ border-top-left-radius:15px; -webkit-border-top-radius:15px; -moz-border-top-radius:15px; } #dv-top-right{ border-top-right-radius:15px; -webkit-border-top-right-radius:15px; -moz-border-top-right-radius:15px; } #dv-bottom-left{ border-bottom-left-radius:15px; -webkit-border-bottom-left-radius:15px; -moz-border-bottom-left-radius:15px; } #dv-bottom-right{ border-bottom-right-radius:15px; -webkit-border-bottom-right-radius:15px; -moz-border-bottom-right-radius:15px; } </style> </head> <body> <div id="dv-all">全圆角例子</div> <div id="dv-top-left">左上圆角例子 </div> <div id="dv-top-right">右上圆角例子</div> <div id="dv-bottom-left">左下圆角例子</div> <div id="dv-bottom-right">右下圆角例子</div> </body> </html>
提交重置代码