发布 Web 标准更新 - Visual Studio 2010 Editor 中的 HTML5 支持(转)

http://www.cnblogs.com/msdnchina/archive/2011/06/20/visualstudio2010html5update.html

本篇博客原文Announcing the Web Standards Update - HTML5 Support for the Visual Studio 2010 Editor选自Scott Hanselman的博客，由MSDN中文网站进行了汉化。

许多人在问“VS2010 何时才支持 HTML5？”我曾玩笑式地说，答案是“昨天”，因为今天没有什么能阻止您在 Visual Studio 或 ASP.NET 中创建 HTML5。然而，智能感知的缺乏和大量复杂代码的存在使人们很不舒服。除此之外，还存在这样一个事实，HTML5 是一个不断变化且不明确的目标。我们之前说过，下一个 Visual Studio 版本将更好地支持 HTML5，但如今又如何呢？

今天，Web 平台和工具团队中以 Mads Kristensen 为首的一群特立独行的成员，很高兴地发布了 Visual Studio Web 标准更新。

此更新向所有 Visual Studio 版本增加了对 HTML5、CSS3 和新 JavaScript 功能的更好支持。

 

下载第一个 Visual Studio Web 标准更新

HTML5 正在迅速发展，此更新的目的将与之保持步调一致。它向 Visual Studio 和及其编辑器添加了对 HTML5、CSS3 和新 JavaScript 功能的支持。随着新功能或元素的不断诞生，大约每个季度更新一次目标。我们希望 ASP.NET web 开发人员始终能够使用最新的标准，还能够选择现有标准。请记住，您如今可以结合使用 HTML5 和 Modernizr 等 JavaScript 库，创建可在几乎所有浏览器（包括过时的旧浏览器）上运行的页面。

Visual Studio Web 标准更新为您提供了对以下内容的智能感知和验证：

HTML 5 功能

• 视频和相关标记
• 音频和相关标记
• 新输入类型，比如电子邮件、url、日期等

• 拖放支持
• 可访问性标准 WAI-ARIA

• 微观数据
• Schema.org 和 SEO 更加友好的

浏览器 API

• 地理位置 – 位置感知网站是一种明确的发展趋势，而且现在您能够在 Visual Studio 中获得全面的智能感知和验证功能。关于优秀的示例，请查看 IE9 测试演示上的源代码。
• 本地存储 – IE从 IE8 开始就支持本地存储，所以现在 Visual Studio 将为您提供逼真的智能感知，来创建可在浏览器内保存状态的网站。相关示例请查看 HTML5 演示网站上的源文件。

CSS3

• 2D 变换
• 3D 变换
• 动画
• 背景和边框
• 基本框模型
• 基本 UI
• 行为
• 颜色
• 弹性框布局

• 字体
• 为分页媒体生成的内容
• 超链接表示
• 线
• 列表
• 字幕
• 媒体查询
• 多列
• 命名空间

• 页式媒体
• 表示级别
• Ruby
• 选择器
• 语音
• 语法
• 模板布局
• 文本
• 过渡

此外，如果您尝试创建适合各种平台和浏览器的网站，您将喜欢 Web 标准更新，因为它不仅支持 IE 特定的前缀（比如 –ms），还支持其他供应商前缀（比如 –webkit 和 –moz）。

 

Visual Studio 中的 HTML5

启动 Visual Studio 2010 时，您可以逐个文件选择想要的 HTML 版本，或者设置默认值。

旁注：看到显眼的 IE6 了吗？它很久以前就在这里了。希望它很快就会消失。忽略它。

您也可以在 Tools | Options | Text Editor | HTML | Validation 中将它设为默认值。请留意错误选项。

所有新的 HTML5 语义标记都在那里，比如 section、svg、video 等。这只是第一个版本，尽管它确实很完善，但我敢肯定一定存在一些 bug。但是，它将定期更新，所以请确保您报告了发现的任何错误并期待它在下一个版本中得到修复。

甚至还支持一些重要（但利用不足或未得到足够重视的）属性，比如 WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)

另外，aria-* 属性不仅显示为启用了智能感知的属性，还显示为它们的枚举值：

标记当然非常有趣，那么微观数据又如何呢？Bing、Google 和 Yahoo 都支持微观数据，以及更具体的 schema.org 词汇。因此，此更新将向大部分流行的词汇（包括 schema.org 和 data-vocabulary.org）添加智能感知。

请告诉我这并不是热心过度。伟大的 SEO！

 

Visual Studio 中的 CSS3

前面仅仅介绍了 HTML5。还支持 CSS3。是的，它比 CSS2 更优秀。

它包含所有出色的新 CSS3 功能，比如 column-full，当然还有圆角边框以及动画和变换。还有许多关于 –webkit、-moz 和 –ms 等供应商特定前缀的详细信息。

请注意在我们挑选 -webkit-transform 快捷属性时，下拉框中的参考工具提示。

 

Visual Studio 中的 JavaScript 和 HTML5

此更新中增加了众多 JavaScript 智能感知功能。比如通过 navigator.geolocation 实现的地理位置和通过 window.localStorage 实现的 DOM 存储。

以下是使用一些新的本地存储功能并显示智能感知的一些 HTML5 和 JavaScript 代码片段。

您或许喜欢将智能感知视为一种概念或精神寄托，但我喜欢将它视为一种即时对象浏览器，它可帮助我探索新技术，以及发现我可能未注意到的角落和缝隙。

我们不知道下一个版本的 Visual Studio 或下一个版本的 HTML5 中会出现什么，但是对于有兴趣了解这些内容的人员，我们希望 Visual Studio 的这个 Web 标准支持“实时更新”将对您有所帮助！

亲爱的读者，请尽情体验。

 

备注：此更新适用于希望使用 HTML5、新 JavaScript 功能和 CSS3 的 ASP.NET 和 HTML5 编辑人员。我没有提及 Silverlight，因为它与 Silverlight 没有关系。我曾经说过“只是因为您最喜欢的技术没有在主题演讲中提及，就认为它销声匿迹了，这是不对的。”假设相同的规则也适用于博客文章。

补充备注：右侧的徽标并不是官方徽标，只是觉得有趣就放在这里了。

 

相关链接

• Visual Web 开发人员团队博客 - Visual Studio 2010 SP1 的 Web 标准更新

HTML5的智能提示在VisualStudio2010

最近HTML5浪潮已经开始了，VS2010已经有一个扩展支持在HTML5智能提示。你可以从这里下载这个扩展：

      http://visualstudiogallery.msdn.microsoft.com/d771cbc8-d60a-40b0-a1d8-f19fc393127d

      安装好后，打开VS2010, 通过菜单栏 Tools->Options->Text Editor->HTML->Validation，你可以看到如下图：

  选择HTML 5，验证就可以了。然后你们VS2008/2010 编辑器支持HTML5智能提示。 最后效果如下：

希望对您的开发有帮助。