代码改变世界

HTML5 概述

2012-02-23 10:16  @影子@  阅读(250)  评论(0编辑  收藏  举报

微软承诺在IE9中持续增加对HTML5的支持。实际上,通过使用新的浏览器和改进的模拟技术意味着用户现在和不就的将来便可以使用更多的HTML5功能。

HTML5的开发者

WHATWG:APPLE Mozilla Google Opera

W3C

IETF(因特网工程任务组):这个任务组下辖HTTP等负责internet协议的团队。HTML5定义的一种新的API依赖于新的WebSocket协议,IETF正在开发这个协议。

设计理念

兼容性 实用性 互通性 通用访问性

效率和用户优先

遇到无法解决的冲突时,1 用户 2 页面作者 3 实现者(浏览器)4 规范制定者 5 理论的纯粹性

表现和内容分离

简单至上

  1 以浏览器的原生能力替代复杂的JS代码

  2 新的简化的DOCTYPE

  3 新的简化的字符集声明

  4 简单而强大的HTML API

通用访问

  可访问性:WAI (web accessity initiative)

  媒体中立

  支持所有的语种 新的<ruby>元素支持在东亚页面排版中会用到的ruby注释

无插件范式

  提供了对插件功能的原生支持

  可以直接用CSS和JS的方式控制页面

  添加了对脚本和布局之间的原生交互能力

    canvas画对角线

     从video元素中抓取的帧可以显示在canvas,点击canvas即可播放这帧对应的视频s文件

HTML5包括神马

  核心的标记元素

  Canvas(2D和3D)

  Channel消息传送

  Cross-document 消息传送

  Geolocation

  MathML

  Microdata

  Sever-Sent Events

  Scalable Vector Graphics(SVG)

  WebSocket API

  Web Origin Concept

  Web Storage

  Web SQL database

  Web Workers

  XMLHttpRequest Level 2

最后,可以使用Modernizr检查浏览器是否支持HTML5和CSS3特性

http://www.modernizr.com/

CSS3的新特性:圆角 旋转 变换 动画 过渡

有了新的selectors API 之后,可以用更精确的方式来指定希望获取的元素,而不必再用标准DOM的方式循环遍历

querySelector()  根据指定的选择规则,返回在页面中找到的第一个匹配元素querySelector("input.error")

 浏览器的console.log API 要比 alert()好用很多 。ctrl+shift+j是chrome开发者工具的快捷方式。

JSON 成为 HTML5 应用内部数据交换的事实标准。典型的JSON API 包含两个函数 , parse() 将字符串序列化成DOM对象 和 stringify() 将DOM对象转换成字符串。

 

DOM Level 3

在所有支持IE5的浏览器中,我们可以使用相同的代码来实现DOM操作和事件处理,例如:

addEventListener()和dispatchEvent()

位置应用 GeoLocation  实时更新 WebSocket