联网的发展总是在不断地催生新技术的产生，而 HTML5 和 CSS3 是最近一直被讨论的热门话题，对于每个互联网开发者尤其是前端开发者而言，都充满了好奇与渴望。那么 HTML5 和 CSS3 究竟有哪些让我们眼前一亮的东西呢？

HTML5

HTML 5 草案的前身名为 Web Applications 1.0，于 2004 年被 WHATWG 提出，于 2007 年被 W3C 接纳，并成立了新的 HTML 工作团队。在 2008 年 1 月 22 日，第一份正式草案发布。HTML5 是近十年来 Web 开发标准最巨大的飞跃。和以前的版本不同，HTML5 并非仅仅用来表示 Web 内容，它的新使命是将 Web 带入一个成熟的应用平台，在 HTML5 平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。那么我们来看一下 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”，目前 Opera 9.5+ 对 Web Forms 2.0 的支持较为完美。

HTML5 DOM 变化

HTML5 在 DOM LEVEL 2 HTML 方面很多都是继承自 HTMLDocument 的接口，当然 HTML5 在 DOM 上也有一些值得注意的新成员，如：支持 getElementsByClassName，可以根据 class 类名选择元素，getSelection() 将会返回当前选中的对象，在选择器上面有两个方法 querySelector 和 querySelectorAll 可以根据 CSS 选择符来获取要查询的元素，相当于 YUI 3 中的 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 在很多网站都已经有应用，甚至还可以用 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 的存储来说，存储的容量要大很多。
• X-Document Messaging：浏览器因为安全和隐私的原因，阻止了不同域之间文档的通信，虽然这是一个安全限制，但是对于那些没有危害的不同域的文档通信带来了很多问题，但是 HTML5 可以实现这种跨文档通信，让我们可以不用管源域是来自哪里，同时可以防止脚本攻击。

HTML5 让你心动了吗？那么 HTML5 什么时候会成为标准呢？据说要等到 2022 年，这有一个很有意思的网站 http://ishtml5readyyet.com/ 告诉你还有多少天 HTML5 会真正到来。

CSS3

CSS3 对于我们 Web 开发者来说不只是新奇的技术，更重要的是这些全新概念的 Web 应用给我们带来更多无限的可能性，也极大地提高了我们的开发效率。我们将不必再依赖图片或者 JavaScript 去完成圆角、多背景、用户自定义字体、3D 动画、渐变、盒阴影、文字阴影、透明度等提高 Web 设计质量的特色应用。

CSS3 在选择器上面的支持

利用属性选择器我们可以根据属性值的开头或结尾很容易选择某个元素，利用兄弟选择器可以选择同级兄弟结点或紧邻下一个结点的元素，利用伪类选择器可以选择某一类元素，CSS3 在选择器上的丰富支持让我们可以灵活的控制样式，而不必为了选择某些元素给他们加上如”odd”或”even”这样的类名。

CSS3 在样式上的支持

有一个调查说开发者最期待 CSS3 的特性是什么，最后票数最多的是“圆角”，不错，圆角这个功能可以给我们这些前端工程师省去很多时间和精力去切图拼凑一个圆角。CSS3 还支持阴影，盒阴影以及文本阴影，渐变，之前你可能是通过IE的滤镜看到过，其实 CSS3 实现起来更加方便。@font-face 可以自定义字体，如果用传统的方式，VD 把一个带有特殊文字的设计图给你让你来实现的话你可能会把它做成一个图片，而通过 CSS3 用 @font-face 就可以了。CSS3 对于连续文本换行也新增了一个属性 word-wrap，你可以设置其为 normal（不换行）或 break-word（换行），这解决了连续英文字符出现页面错位的问题，也不需要后端去截取这个连续字符。使用 CSS3 你还可以给边框加背景，这在 iPhone 上也有应用的例子。CSS3 在背景上支持背景调整大小，如当你用一张大图要做一个小的元素背景时可以通过 background-size 来调整背景图的大小来适应这个元素。CSS3 支持 opacity，rgba 和 hsl/a，opacity 和 rgba 的区别是 opacity 设置的透明对其内容也会产生影响，而 rgba 只对你应用的元素产生影响。CSS3 在布局上对于盒模型提供了支持，可以设置 box-sizing 为 content-box 或 border-box，应用为 content-box 就是正常的模式，而应用为 border-box 和 IE5.5 的盒模型很相似，即元素的宽度包括 border 和 padding，这个在布局上可能会比较方便，不用去管到底这个元素会占用多大的宽度，而用 content-box 还需要手动计算一下这个元素实际占用的宽度。

CSS3 对于动画的支持

CSS3 支持的动画类型有：transform（变换）、transition（过渡）和 animation（动画）。你可以对特定的属性设置 transition，transiton 和 animation 的区别不大，animation 的动画是自己定义的，面向的更多的是脚本开发者，往往更加复杂。

为了使用大部分 CSS3 特性，我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在，大部分浏览器只支持部分 CSS3 属性。最常见的私有属性是用于 Webkit 核心浏览器的（比如 Safari），它们以 -webkit- 开始，以及 Gecko 核心的浏览器（比如，Firefox），以 -moz- 开始，还有 Konqueror（-khtml-）、Opera（-o-）以及 Internet Explorer（-ms-）都有它们自己的属性扩展（目前只有 IE 8 支持 -ms- 前缀）。

那我们在开发中该如何去用 CSS3 呢？

我觉得首先是遵循一个优雅降级的原则，比如前面谈到的圆角，我们可以针对 Firefox 和 Safari 等这些支持圆角的浏览器中应用 CSS 圆角，而那些不支持 CSS 圆角的浏览器则显示为直角。其次就是对于不支持 CSS3 的浏览器可以使用 JavaScript 来实现，如 CSS3 任何元素支持 :hover 伪类，我们就可以对只支持链接 :hover 的 IE6 用 JS 来实现。最后就是在向用户或老板推广新技术的同时也要关注他们的目标与可行性，不能为了技术而技术。

希望本文能帮助到您！

点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）

关注 ｛我｝，享受文章首发体验！

每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”！

原文链接：https://fed.taobao.org/blog/2009/12/18/html5-and-css3-demystification/

作者：空雁