# 介紹好用 Visual Studio 2010 擴充套件：Web Standards Update for Microsoft Visual Studio 2010 SP1 ![W3C HTML5 標誌](https://stwillblogassets.blob.core.windows.net/files/images/2026/10/external-image-repairs/html5-logo.png)[HTML5](http://zh.wikipedia.org/zh-tw/HTML_5) 雖然還在[草案階段](http://dev.w3.org/html5/spec/Overview.html "HTML5 - A vocabulary and associated APIs for HTML and XHTML ( Editor's Draft 17 June 2011 )")，不過 [HTML5](http://zh.wikipedia.org/zh-tw/HTML_5) 這名詞實在越來越熱，熱到連不熟網路技術的客戶都指明要求網站要用 HTML5 來製作，是有沒有這麼誇張？這件事還真的發生了！HTML5 除了新增的元素(標籤)之外，還包括許多 JavaScript API，如果沒有 Intellisense 還真的不太方便，如果你已經升級到 Visual Studio 2010 SP1 的話，那已經有支援部分 HTML5 的語法，不過並不夠完整，微軟最近推出的 [Web Standards Update for Microsoft Visual Studio 2010 SP1](http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83) 擴充套件就是打算用來定期提供 Visual Studio 2010 SP1 最新版的 Web 標準更新，未來預計每三個月就會更新一次 W3C 提出的相關規格變更。 HTML5 標誌：[W3C](https://www.w3.org/html/logo/)，[CC BY 3.0](https://creativecommons.org/licenses/by/3.0/)。 要安裝 [Web Standards Update for Microsoft Visual Studio 2010 SP1](http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83) 擴充套件可以透過擴充管理員進行下載，各位只要搜尋 Web Standards Update for Microsoft Visual Studio 2010 SP1 就能找到該套件： [![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/dbb445dac95ac968c383-SNAGHTML12a70021_thumb.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/51ba76ef00ab70344661-SNAGHTML12a70021.png) 點選**下載**後並不會自動安裝，由於是補足 Visual Studio 2010 SP1 的更新，因此下載的會是一個 **Web Standards Update.msi** 安裝檔，各位只要關閉 Visual Studio 2010 後把該安裝檔安裝完畢即可。 ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/5fe992d9ac2ded4096c0-SNAGHTML12a64cca.png) 安裝之後其實不太感覺得出來已經安裝，基本上這個更新會影響到的地方就是 Visual Studio 2010 的文字編輯器，最主要有三個地方會有效果： **1\. 編輯網頁檔案時提供最新的 HTML5 支援 ( \*.htm, \*.aspx, \*.ascx, \*.cshtml, \*.master, … )** 開啟網頁時，透過「HTML 原始檔編輯」工具列即可切換至 HTML5 版本，切換過去後就能啟用最新的 HTML5 Intellisense，如下圖示： ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/d41e7bc32f34f0620732-image_897.png) 切換到 HTML5 之後，你就能開始在網頁中享用 HTML5 的新元素，以及 HTML5 新增的新元素屬性 ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/264af2233696b62ec173-image_898.png) ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/511c10669e0f9bc9e777-image_899.png) 不只有 HTML5 的標籤元素而已，包括 W3C 定義的最新版 JavaScript API 規格也同時提供 Intellisense 支援，如下圖就是 [Geolocation API Specification](http://dev.w3.org/geo/api/spec-source.html) 的 Intellisense 支援圖示： ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/85657e4addc8368580a7-image_900.png) 除了基本的 HTML5 標籤支援外，此擴充套件還支援 [WAI-ARIA 標準](http://www.w3.org/WAI/intro/aria)，可以讓你的網頁能夠更進一步提供無障礙網頁的支援程度。 ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/8125ddd3a3c533872786-image_901.png) 所有 **aria-\*** 的元素屬性也都完整支援： ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/27f993768b09df5b02d8-image_902.png) 像一些很新的 [HTML Microdata](http://www.w3.org/TR/microdata/) 規格，在這次的更新中也都有支援。[HTML Microdata](http://www.w3.org/TR/microdata/) 讓網頁可以新增一些簡單的 Metadata，去更明確的定義賦予網頁內容更清楚的意義(語意)，如下圖例，假設我定義了一個 div 要放置跟**網站路標有**關的內容，那麼我們可以在這個 div 寫上 itemtype 屬性，並設定 http://data-vocabulary.org/Breadcrumb 內容，如果你非常在乎 [SEO](http://zh.wikipedia.org/zh-tw/SEO) 的話，適當的使用 [HTML Microdata](http://www.w3.org/TR/microdata/) 在你的網頁中或許有幫助！ ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/4ff78bd98b1a40f09d2b-image_903.png) **2\. 編輯 JavaScript 檔案時 ( \*.js )** 編輯 js 檔時一樣可以使用各式 W3C 定義的各式 API 支援： ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/840fa85161ed00e6a7e7-image_904.png) **3\. 編輯 CSS 樣式檔時 ( \*.css )** 在編輯 CSS 樣式時，也能讓 Visual Studio 2010 讓編輯 CSS 時支援 CSS 3.0 規格： ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/c2326bb7ee3cdeef05bf-image_905.png) 如下圖是 CSS 3.0 多欄位 (Multi-columns) 支援的樣式屬性： ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/c886130b2dfe86684f9e-image_906.png) 雖說是支援 CSS 3.0 標準，但很神奇的只有在各家瀏覽器才支援的語法 Visual Studio 2010 SP1 也全部通通加進來支援了： **僅支援 IE 的樣式** ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/eeb60c029abc55b3d012-image_907.png) **僅支援 Firefox 的樣式** ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/4289f0e937cc5aaa5c42-image_908.png) **僅支援 Google Chrome、Safari 的樣式** ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/24385346786258fbdfba-image_909.png)  以下我節錄 [Scott Hanselman 的文章](http://www.hanselman.com/blog/AnnouncingTheWebStandardsUpdateHTML5SupportForTheVisualStudio2010Editor.aspx)，他列出了這次 [Web Standards Update for Microsoft Visual Studio 2010 SP1](http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83) 所有支援 Intellisense 與驗證的範圍： **HTML 5 features** - [Video & related tags](https://www.w3.org/wiki/HTML/Elements/video) - [Audio & related tag](https://www.w3.org/wiki/HTML/Elements/audio) - [New input types like email, url, date etc](https://www.w3.org/wiki/HTML/Elements/input) - [Drag & Drop support](https://www.w3.org/TR/2010/WD-html5-20101019/dnd.html) - [Accessibility standard WAI-ARIA](http://www.w3.org/WAI/intro/aria) - [Microdata](http://www.w3.org/TR/microdata/) - [Schema.org & more SEO friendly goodness](http://schema.org/docs/gs.html) **Browser APIs** - [Geo-Location](http://dev.w3.org/geo/api/spec-source.html) - 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](https://web.archive.org/web/20150430101111/http://ie.microsoft.com:80/testdrive/HTML5/Geolocation/Default.html). - [Local Storage](http://www.w3.org/TR/webstorage/) – IE has been supporting [local storage from IE8](http://msdn.microsoft.com/en-us/library/cc197062%28VS.85%29.aspx), 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](http://html5demos.com/storage) **CSS3** - [2D Transforms](http://www.w3.org/TR/css3-2d-transforms/) - [3D Transforms](http://www.w3.org/TR/css3-3d-transforms/) - [Animations](http://www.w3.org/TR/css3-animations/) - [Background & Borders](http://www.w3.org/TR/css3-background/) - [Basic Box Model](http://www.w3.org/TR/css3-box/) - [Basic UI](http://www.w3.org/TR/css3-ui/) - [Behavior](http://www.w3.org/Talks/2004/0519-CSS-WWW2004/all.htm) - [Color](http://www.w3.org/TR/css3-color/) - [Flexible Box Layout](http://www.w3.org/TR/css3-flexbox/) - [Fonts](http://www.w3.org/TR/css3-fonts/) - [Generated Content for Paged Media](http://www.w3.org/TR/css3-gcpm/) - [Hyperlink Presentation](http://www.w3.org/TR/css3-hyperlinks/) - [Line](http://www.w3.org/TR/css3-linebox/) - [Lists](http://www.w3.org/TR/css3-lists/) - [Marquee](http://www.w3.org/TR/css3-marquee/) - [Media Queries](http://www.w3.org/TR/css3-mediaqueries/) - [Multi Column](http://www.w3.org/TR/css3-multicol/) - [Namespaces](http://www.w3.org/TR/css3-namespace/) - [Paged Media](http://www.w3.org/TR/css3-page/) - [Presentations Levels](http://www.w3.org/TR/css3-preslev/) - [Ruby](http://www.w3.org/TR/css3-ruby/) - [Selectors](http://www.w3.org/TR/css3-selectors/) - [Speech](http://www.w3.org/TR/css3-speech/) - [Syntax](http://www.w3.org/TR/css3-syntax/) - [Template Layout](http://www.w3.org/TR/css3-layout/) - [Text](http://www.w3.org/TR/css3-text/) - [Transitions](http://www.w3.org/TR/css3-transitions/) 快下載回來玩玩吧～ ^\_^ **相關連結** - [Web Standards Update for Microsoft Visual Studio 2010 SP1](http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83) (Visual Studio Gallery) - [Web Standards Update for Microsoft Visual Studio 2010 SP1](https://web.archive.org/web/20110619023705/http://blogs.msdn.com/b/webdevtools/archive/2011/06/15/web-standards-update-for-visual-studio-2010-sp1.aspx) (Visual Web Developer Team Blog) - [Announcing the Web Standards Update - HTML5 Support for the Visual Studio 2010 Editor](http://www.hanselman.com/blog/AnnouncingTheWebStandardsUpdateHTML5SupportForTheVisualStudio2010Editor.aspx) - [Web Standards Update - behind the scenes](https://www.madskristensen.net/blog/web-standards-update-behind-the-scenes/) - [HTML5 Support for the Visual Studio 2010 Editor](https://dotblogs.com.tw/codeman/2011/06/16/28677) (點部落) - [HTML5 - A vocabulary and associated APIs for HTML and XHTML](http://dev.w3.org/html5/spec/Overview.html)  ( Editor's Draft 17 June 2011 ) - [Cascading Style Sheets (CSS) Snapshot 2010](http://www.w3.org/TR/CSS/) ( W3C Working Group Note 12 May 2011 ) - [WAI-ARIA Overview](http://www.w3.org/WAI/intro/aria) - [HTML Microdata](http://www.w3.org/TR/microdata/) ( W3C Working Draft 25 May 2011 )