分享人：空雁

互联网的发展总是在不断地催生新技术的产生，而HTML5和CSS3是最近不断被讨论的抢手话题，对于每个互联网开发者尤其是前端开发者而言，都充满了猎奇与渴望。那么HTML5和CSS3究竟有哪些让我们眼前一亮的东西呢？我在WebRebuild北京交流会和珍珠奶茶帮上给大家分享了《揭秘 HTML5和CSS3》，PPT在这里：
http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8

HTML5

HTML 5草案的前身名为Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML任务团队。在2008年1月22日，第一份正式草案发布。 HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的使用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。那么我们来看一下HTML5的技术概览有哪些：

HTML5新增和移除的元素

HTML5新增了很多多媒体和交互性元素如video, audio，在HTML4当中如果要嵌入一个视频或是音频的话需求引入一大段的代码，还有兼容各个浏览器，而HTML5只需求通过引入一个标签就可以，就像img标签一样方便。在页面规划和内容实现方面HTML5新增了很多结构化标签元素以及块级及语义元素，如果你要用HTML表示一个文件的上传进度条，在 HTML5中你可以用progress这个元从来表示，它有一个value属性描述了曾经完成了多少任务，还有一个属性max描述了这个任务一共需求多少，还可以通过DOM接口得到这个进度条的position属性(只读)，也就是任务完成的百分比。Youtube在HTML5技术上曾经做了一个尝试，http://www.youtube.com/html5(需求翻墙) 是用HTML5做的一个DEMO，从整个页面源代码来看，非常简约。当然HTML5也对一些元素新增了一些属性，如input和textarea的placeholder属性，相当于输入框的输入提示，script有一个async属性会影响脚本的加载和执行。对于所有的HTML共有的属性我们通常把它称作是“全局属性”，如class, id, tabindex, title，HTML5也新增了一些全局属性，如contenteditable, contextmenu, hidden等属性。HTML5还添加了对于微数据的支持，如HTML5新增的item, itempro, subject等属性。

当然HTML5也移除了一些表示页面展现的元素，如font, center, strike等，这些本应该是CSS来做的，所以还是很好理解的，也移除了一些影响网站可访问性的元素如frame, frameset, noframe以及一些不常用的元素如acronym，而采用abbr来表示缩写。HTML5还移除了一些影响客户端兼容性的HTML熟悉，如link的rev属性，td的scope属性；HTML5也移除了一些表示页面展现的属性如一些元素的align,bgcolor属性。

HTML5对表单的支持

HTML5 提供了强大的控件类型如url, email, date, tel等，强大的约束属性，如required表示必填，文件上传的accept属性，以及一些表单反复元素模型的支持，HTML5在提交表单的时候还可以设置提交的方式为XML提交方式，这样服务器端接收到的数据将是XML格式，HTML5的表单被定义为“Web Forms 2.0”，目前opera9.5+对Web Forms 2.0的支持较为完满。

点此查看Web Forms 2.0 DEMO，需求Opera9.5+

HTML5 DOM变化

HTML5在DOM LEVEL 2 HTML方面很多都是承继自HTMLDocument的接口，当然HTML5在DOM上也有一些值得留意的新成员，如：支持 getElementsByClassName，可以依据class类名选择元素，getSelection()将会前往当前选中的对象，在选择器上面有两个方法querySelector和querySelectorAll可以依据 css选择符来获取要查询的元素，相当于YUI3中的Y.one和Y.all。

HTML5的Javascript APIs

HTML5在Javascript上面新增了哪些API呢？

• Video/Audio: HTML5为Video和Audio提供了API来让开发者控制他们本人的用户界面，如可以播放或暂停媒体内容。
• Canvas: Canvas是一个新的HTML元素，这个元素可以被Script言语(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。Canvas是一个神奇的东西，它给我的第一感觉就像是在用Photoshop一样，它的每一个方法跟Photoshop 是那么地类似，通过canvas.getContext(’2d’)就可以得到这个canvas的API，你可以通过fillStyle设置其填充颜色或是通过strokeStyle设置其描边颜色，甚至它画路径的操作跟Photoshop的钢笔操作更是不谋而合。Canvas在很多网站都曾经有使用，如Firefox的实时下载形状统计，甚至还可以用canvas来编写Web Game。
• Drag&Drop: 在指示设备的视觉媒体中，”Drag”的操作就是鼠标按下(mousedown)并伴随着鼠标挪动(mousemove)的事件，而”Drop”则是鼠标释放时触发的事件。在Drag&Drop里定义了DataEvent和DataTransfer接口，同时当拖拽操作发生时会触发如 dragstart, dragenter, dragleave, drop, dragend等事件。
• Web Workers: 让Javascript多线程，可以在后台做很多任务而不会阻断当前的浏览器操作。
• Geolocation: 地理位置定位，运转navigator.geolocation.getCurrentPosition(success,error)这个方法时浏览器会提示能否要共享你的地理位置，如果选择共享，则会回调success函数，success函数有一个参数是position对象，这个position对象有一个coords对象，coords对象包含了很多地理位置信息如latitude(维度)和longitude(经度)，这样就可以知道你的具体位置了，这个功用在一些手机如Iphone上曾经有广泛的使用了。
• Application Cache: 这是HTML5对于离线使用的支持，通过在html元素上加一个属性manifest，浏览器会提示你能否要将数据缓存到客户端，如果用户选择了允许，则会按照指定的manifest文件列表缓存需求的文件，当你的网络不可用时，你还是可以使用这个使用的。对于离线使用，Google也开发了Google Gears浏览器扩展，不过最后Google转投HTML5可能也是看到了HTML5存储和离线使用的这种优势。
• Storage: Webkit曾经实现了database storage，你可以像后端操作数据库一样查询数据并执行一些操作。还有一种存储是键值对存储，如sessionStorage和localStorage，可以通过setItem和getItem来存储与获取值，绝对于Cookie的