Html5 学习利器 Web Standards Update for Microsoft Visual Studio 2010 SP1

HTML5然还在草案阶段，不过 HTML5 这名词实在越来越热，互联网上很多产品都深度应用了HTML5，比如WebQQ，可以看看http://www.infoq.com/cn/news/2011/06/html5-in-china 文章了解下。

HTML5 除了新增的元素(卷标)之外，还包括许多 JavaScript API，如果没有 Intellisense 还真的不太方便，如果你已经升级到 Visual Studio 2010 SP1 的话，那已经有支持部分 HTML5 的语法，不过并不够完整，微软最近推出的 Web Standards Update for Microsoft Visual Studio 2010 SP1 扩展套件就是打算用来定期提供 Visual Studio 2010 SP1 最新版的 Web 标准更新，未来预计每三个月就会更新一次 W3C 提出的相关规格变更，也期望微软能够尽快建立市场上最好的HTML5工具，因为现在很清楚，微软将穿着HTML5的外衣，坚定地致力于网络技术。

HTML5感知包括以下几个特性支持：

WAI-ARIA—— 一个无障碍标准
Microdata——语义标记语言
修复了video和audio标签
新的输入类型如email、URL、date
拖拽
Schema.org

更新带来许多了CSS3功能，包括：多列、圆角边框、动画、过渡和转换。Scott Hanselman的博客上发布了支持功能的完整列表。关于JavaScript，更新了关于Geolocation(地址位置)、DOM存储，包括本地和绘画存储，还有其他web API的感知和验证。

要安装 Web Standards Update for Microsoft Visual Studio 2010 SP1 扩展套件可以通过扩展管理器进行下载，各位只要查找 Web Standards Update for Microsoft Visual Studio 2010 SP1 就能找到该套件：

点选下载后并不会自动安装，由于是 Visual Studio 2010 SP1 的更新，因此下载的会是一个 Web Standards Update.msi 安装包，各位只要关闭 Visual Studio 2010 后把该安装档安装完毕即可。

这个更新会影响到的地方就是 Visual Studio 2010 的文本编辑器，最主要有三个地方会有效果：

编辑网页文件时提供最新的 HTML5 支持 ( *.htm, *.aspx, *.ascx, *.cshtml, *.master, … )

打开网页时，通过“HTML 源代码编辑”工具栏即可切换至 HTML5 版本，切换过去后就能启用最新的 HTML5 Intellisense，如下图示：

切换到 HTML5 之后，你就能开始在网页中享用 HTML5 的新元素，以及 HTML5 新增的新元素属性

不只有 HTML5 的卷标元素而已，包括 W3C 定义的最新版 JavaScript API 规格也同时提供 Intellisense 支持，如下图就是 Geolocation API Specification 的 Intellisense 支持图示：

除了基本的 HTML5 标签支持外，此扩展套件还支持 WAI-ARIA 标准，可以让你的网页能够更进一步提供无障碍网页的支持程度。像一些很新的 HTML Microdata 规格，在这次的更新中也都有支持。HTML Microdata 让网页可以新增一些简单的 Metadata，去更明确的定义赋予网页内容更清楚的意义(语意)。

编辑Javascript文件时( *.js )

编辑 js 文件时一样可以使用各种 W3C 定义的各种API 支持：

编辑 CSS 样式文件时 ( *.css )

在编辑 CSS 样式时，也能让 Visual Studio 2010 让编辑 CSS 时支持 CSS 3.0 规范：

如下图是 CSS 3.0 多字段 (Multi-columns) 支持的样式属性：

很神奇的只有在各家浏览器才支持的语法 Visual Studio 2010 SP1 也全部通通加进来支持了。

Scott Hanselman 的文章列出了这次 Web Standards Update for Microsoft Visual Studio 2010 SP1 所有支持 Intellisense 与验证的范围：

HTML 5 features

Browser APIs

Geo-Location - Location aware websites are a clear, growing trend and now you've got full intellisense and validation within Visual Studio. For a nice sample, view source on the IE9 test drive demo.
Local Storage – IE has been supporting local storage from IE8, so now Visual Studio will provide you with full-fidelity intellisense to create sites which can save state within the browser. For sample of this, do a view source on HTML5 Demo Site

CSS3

Alternate Rows in ASP.NET GridView, Tables using HTML5 / CSS3

HTML5 Web Socket in Essence

微软SkyDrive弃Silverlight用HTML5