创建符合标准的、有语意的HTML页面——ASP.NET 2.0 CSS Friendly Control Adapters 1.0发布

ASP.NET 2.0提供了非常多的Web开发中常用到的复杂控件，例如Menu、GridView、Login等。虽然这些控件使用方法极为简单，且功能异常强大，但若你查看一些由这些控件所生成的HTML代码，将会发现很多地方均违背了Web标准的规定。例如，Menu、TreeView等控件均将输出<table>标签，而基于Web标准中的“有语意的”这一条，显然应该选择<ul>。

ASP.NET开发团队也意识到这个这问题，借助于ASP.NET 2.0框架强大的可配置、可自定义能力，给出了解决问题的完美方案——使用.blowser文件为页面中的控件配置自定义的Adapter，来替代原有的非标准的解决方案。这些自定义的Adapter的集合就是ASP.NET 2.0 CSS Friendly Control Adapters。在发布了若干个测试版本之后，ASP.NET 2.0 CSS Friendly Control Adapters 的1.0版本终于正式发布。

ASP.NET 2.0中这些不符合Web标准的控件如下，每一种都在ASP.NET 2.0 CSS Friendly Control Adapters中提供了符合Web标准的替代实现（点击链接进入演示页面）。

1. Menu
2. TreeView
3. DetailsView
4. FormView
5. GridView
6. DataList
7. Login
8. ChangePassword
9. PasswordRecovery
10. CreateUserWizard
11. LoginStatus

朋友们可以到http://www.asp.net/CSSAdapters/Default.aspx下载ASP.NET 2.0 CSS Friendly Control Adapters。这个页面还提供了一些简要的介绍。

下载的文件为一个Visual Studio安装文件（.vsi），其中包含了ASP.NET 2.0 CSS Friendly Control Adapters 1.0的全部实现源代码，以及一个示例站点（即http://www.asp.net/CSSAdapters）。在这篇文章中，可以看到下载文件使用方法以及如何在自己的站点中使用这些Adapter的简要介绍。

当然，若您想了解更多的关于ASP.NET 2.0 CSS Friendly Control Adapters的架构、每个控件的具体实现方式及其生成的HTML代码的规则，那么可以参考ASP.NET 2.0 CSS Friendly Control Adapters: The White Paper。White Paper中的这一部分用图示的方法详细解释了每个控件生成语意HTML的规则，显得十分专业。如下就是Menu部分的图解：

下面是使用ASP.NET 2.0 CSS Friendly Control Adapters之后Menu控件生成的HTML代码：

<div class="PrettyMenu" id="ctl00_ctl00_MainContent_LiveExample_Menu1">
  <div class="AspNet-Menu-Vertical">
      <ul class="AspNet-Menu">
        <li class="AspNet-Menu-WithChildren">
          <a href="/CSSAdapters/GenericPage.aspx?goto=Products" class="AspNet-Menu-Link" title="Products">
            Products</a>
          <ul>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=ProductsWindows" class="AspNet-Menu-Link" title="Windows">
                Windows</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=ProductsOffice" class="AspNet-Menu-Link" title="Office">
                Office</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=ProductsBusinessSolutions" class="AspNet-Menu-Link" title="Business Solutions">
                Business Solutions</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=ProductsServers" class="AspNet-Menu-Link" title="Servers">
                Servers</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=ProductsDeveloperTools" class="AspNet-Menu-Link" title="Developer Tools">
                Developer Tools</a>
            </li>
            <li class="AspNet-Menu-WithChildren">
              <a href="/CSSAdapters/GenericPage.aspx?goto=ProductSubscriptions" class="AspNet-Menu-Link" title="Subscriptions">
                Subscriptions</a>
              <ul>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=ProductsSubscriptionsSoftware" class="AspNet-Menu-Link" title="Software">
                    Software</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=ProductsSubscriptionsManageYourProfile" class="AspNet-Menu-Link" title="Manage Your Profile">
                    Manage Your Profile</a>
                </li>
              </ul>
            </li>
            <li class="AspNet-Menu-WithChildren">
              <a href="/CSSAdapters/GenericPage.aspx?goto=ProductsMore" class="AspNet-Menu-Link" title="More">
                More</a>
              <ul>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=ProductsMobileDevices" class="AspNet-Menu-Link" title="Mobile Devices">
                    Mobile Devices</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=ProductsGamesXbox" class="AspNet-Menu-Link" title="Games and Xbox">
                    Games and Xbox</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=ProductsHardware" class="AspNet-Menu-Link" title="Hardware">
                    Hardware</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=ProductsMSN" class="AspNet-Menu-Link" title="MSN">
                    MSN</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="AspNet-Menu-WithChildren">
          <a href="/CSSAdapters/GenericPage.aspx?goto=Legal" class="AspNet-Menu-Link" title="Legal">
            Legal</a>
          <ul>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=LegalLicense" class="AspNet-Menu-Link" title="License">
                License</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=LegalTerms" class="AspNet-Menu-Link" title="Terms of Use">
                Terms of Use</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=LegalPrivacy" class="AspNet-Menu-Link" title="Privacy">
                Privacy</a>
            </li>
          </ul>
        </li>
        <li class="AspNet-Menu-WithChildren">
          <a href="/CSSAdapters/GenericPage.aspx?goto=Support" class="AspNet-Menu-Link" title="Support">
            Support</a>
          <ul>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=SupportLifecyclePolicies" class="AspNet-Menu-Link" title="Support Lifecycle and Policies">
                Lifecycle and Policies</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=SupportContact" class="AspNet-Menu-Link" title="Contact Support">
                Contact Support</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=SupportThirdPartyProviders" class="AspNet-Menu-Link" title="Third-Party Services">
                Third-Party Services</a>
            </li>
            <li class="AspNet-Menu-WithChildren">
              <a href="/CSSAdapters/GenericPage.aspx?goto=Research" class="AspNet-Menu-Link" title="Research">
                Research</a>
              <ul>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=SupportProductCenters" class="AspNet-Menu-Link" title="Product Support Centers">
                    Product Info</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=SupportKnowledgeBase" class="AspNet-Menu-Link" title="Knowledge Base">
                    Knowledge Base</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=SupportCommunitiesNewsgroups" class="AspNet-Menu-Link" title="Communities and Newsgroups">
                    Communities</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=SupportITProfessionals" class="AspNet-Menu-Link" title="Support for IT Professionals">
                    IT Pros</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=SupportDevelopers" class="AspNet-Menu-Link" title="Support for Developers">
                    Developers</a>
                </li>
              </ul>
            </li>
            <li class="AspNet-Menu-WithChildren">
              <a href="/CSSAdapters/GenericPage.aspx?goto=Downloads" class="AspNet-Menu-Link" title="Downloads">
                Downloads</a>
              <ul>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=DownloadsWindowsUpdate" class="AspNet-Menu-Link" title="Windows Update">
                    Windows Update</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=DownloadsOfficeUpdate" class="AspNet-Menu-Link" title="Office Update">
                    Office Update</a>
                </li>
              </ul>
            </li>
            <li class="AspNet-Menu-WithChildren">
              <a href="/CSSAdapters/GenericPage.aspx?goto=Learning" class="AspNet-Menu-Link" title="Learning">
                Learning</a>
              <ul>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=LearningBooks" class="AspNet-Menu-Link" title="Books">
                    Books</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=LearningTraining" class="AspNet-Menu-Link" title="Training">
                    Training</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=LearningCertification" class="AspNet-Menu-Link" title="Certification">
                    Certification</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=LearningEvents" class="AspNet-Menu-Link" title="Events">
                    Events</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=LearningWebcasts" class="AspNet-Menu-Link" title="Webcasts">
                    Webcasts</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=LearningPatternsPractices" class="AspNet-Menu-Link" title="Patterns and Practices">
                    Patterns and Practices</a>
                </li>
              </ul>
            </li>
            <li class="AspNet-Menu-WithChildren">
              <a href="/CSSAdapters/GenericPage.aspx?goto=SupportSubscriptions" class="AspNet-Menu-Link" title="Subscriptions">
                Subscriptions</a>
              <ul>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=SupportSubscriptionsNewsletters" class="AspNet-Menu-Link" title="Newsletters">
                    Newsletters</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                  <a href="/CSSAdapters/GenericPage.aspx?goto=SupportSubscriptionsManageYourProfile" class="AspNet-Menu-Link" title="Manage Your Profile">
                    Manage Your Profile</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="AspNet-Menu-WithChildren">
          <a href="/CSSAdapters/GenericPage.aspx?goto=Just for You" class="AspNet-Menu-Link" title="Just for You">
            Just for You</a>
          <ul>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=JustForYouHomeUsers" class="AspNet-Menu-Link" title="Home Users">
                Home Users</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=JustForYouMacintoshUsers" class="AspNet-Menu-Link" title="Macintosh Users">
                Macintosh Users</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=JustForYouITProfessionals" class="AspNet-Menu-Link" title="IT Professionals (TechNet)">
                IT Professionals</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=JustForYouDevelopersMSDN" class="AspNet-Menu-Link" title="Developers (MSDN)">
                Developers (MSDN)</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=JustForYouPartners" class="AspNet-Menu-Link" title="Partners">
                Partners</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=JustForYouSmallBusinesses" class="AspNet-Menu-Link" title="Small Businesses">
                Small Businesses</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=JustForYouLargeBusinesses" class="AspNet-Menu-Link" title="Large Businesses">
                Large Businesses</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=JustForYouGovernment" class="AspNet-Menu-Link" title="Government">
                Government</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=JustForYouEducators" class="AspNet-Menu-Link" title="Educators">
                Educators</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=JustForYouJournalists" class="AspNet-Menu-Link" title="Journalists">
                Journalists</a>
            </li>
          </ul>
        </li>
        <li class="AspNet-Menu-WithChildren">
          <a href="/CSSAdapters/GenericPage.aspx?goto=About" class="AspNet-Menu-Link" title="About">
            About</a>
          <ul>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=AboutAccessibility" class="AspNet-Menu-Link" title="Accessibility">
                Accessibility</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=AboutCareers" class="AspNet-Menu-Link" title="Careers">
                Careers</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=AboutCommunityAffairs" class="AspNet-Menu-Link" title="Community Affairs">
                Community Affairs</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=AboutDiversity" class="AspNet-Menu-Link" title="Diversity">
                Diversity</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=AboutInvestorRelations" class="AspNet-Menu-Link" title="Investor Relations">
                Investor Relations</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=AboutResearch" class="AspNet-Menu-Link" title="Research">
                Research</a>
            </li>
            <li class="AspNet-Menu-Leaf">
              <a href="/CSSAdapters/GenericPage.aspx?goto=AboutSecurityPrivacy" class="AspNet-Menu-Link" title="Security and Privacy">
                Security and Privacy</a>
            </li>
          </ul>
        </li>
      </ul>

  </div>
</div>

下面是Menu控件默认生成的HTML代码，使用<table>布局，不符合Web标准：

<a href="#ctl00_ctl00_MainContent_LiveExample_Menu1_SkipLink"><img alt="Skip Navigation Links" src="/CSSAdapters/WebResource.axd?d=EtGmx8NM08vbAobkhT4brA2&amp;t=632963954623059509" width="0" height="0" style="border-width:0px;" /></a><table id="ctl00_ctl00_MainContent_LiveExample_Menu1" class="Menu-Skin-Vertical ctl00_ctl00_MainContent_LiveExample_Menu1_2" cssselectorclass="PrettyMenu" cellpadding="0" cellspacing="0" border="0">
  <tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="Products" id="ctl00_ctl00_MainContent_LiveExample_Menu1n0">
    <td><table class="Menu-Skin-StaticItem ctl00_ctl00_MainContent_LiveExample_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td style="white-space:nowrap;width:100%;"><a class="ctl00_ctl00_MainContent_LiveExample_Menu1_1 Menu-Skin-StaticItem ctl00_ctl00_MainContent_LiveExample_Menu1_3" href="/CSSAdapters/GenericPage.aspx?goto=Products" style="border-style:none;font-size:1em;">Products</a></td><td style="width:0;"><img src="/CSSAdapters/WebResource.axd?d=ezc31dhyEr-aJlJoVPvSLH5-h2Wn79B30&amp;t=632963954623059509" alt="Expand Products" style="border-style:none;vertical-align:middle;" /></td>
      </tr>
    </table></td>
  </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="Legal" id="ctl00_ctl00_MainContent_LiveExample_Menu1n1">
    <td><table class="Menu-Skin-StaticItem ctl00_ctl00_MainContent_LiveExample_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td style="white-space:nowrap;width:100%;"><a class="ctl00_ctl00_MainContent_LiveExample_Menu1_1 Menu-Skin-StaticItem ctl00_ctl00_MainContent_LiveExample_Menu1_3" href="/CSSAdapters/GenericPage.aspx?goto=Legal" style="border-style:none;font-size:1em;">Legal</a></td><td style="width:0;"><img src="/CSSAdapters/WebResource.axd?d=ezc31dhyEr-aJlJoVPvSLH5-h2Wn79B30&amp;t=632963954623059509" alt="Expand Legal" style="border-style:none;vertical-align:middle;" /></td>
      </tr>
    </table></td>
  </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="Support" id="ctl00_ctl00_MainContent_LiveExample_Menu1n2">
    <td><table class="Menu-Skin-StaticItem ctl00_ctl00_MainContent_LiveExample_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td style="white-space:nowrap;width:100%;"><a class="ctl00_ctl00_MainContent_LiveExample_Menu1_1 Menu-Skin-StaticItem ctl00_ctl00_MainContent_LiveExample_Menu1_3" href="/CSSAdapters/GenericPage.aspx?goto=Support" style="border-style:none;font-size:1em;">Support</a></td><td style="width:0;"><img src="/CSSAdapters/WebResource.axd?d=ezc31dhyEr-aJlJoVPvSLH5-h2Wn79B30&amp;t=632963954623059509" alt="Expand Support" style="border-style:none;vertical-align:middle;" /></td>
      </tr>
    </table></td>
  </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="Just for You" id="ctl00_ctl00_MainContent_LiveExample_Menu1n3">
    <td><table class="Menu-Skin-StaticItem ctl00_ctl00_MainContent_LiveExample_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td style="white-space:nowrap;width:100%;"><a class="ctl00_ctl00_MainContent_LiveExample_Menu1_1 Menu-Skin-StaticItem ctl00_ctl00_MainContent_LiveExample_Menu1_3" href="/CSSAdapters/GenericPage.aspx?goto=Just for You" style="border-style:none;font-size:1em;">Just for You</a></td><td style="width:0;"><img src="/CSSAdapters/WebResource.axd?d=ezc31dhyEr-aJlJoVPvSLH5-h2Wn79B30&amp;t=632963954623059509" alt="Expand Just for You" style="border-style:none;vertical-align:middle;" /></td>
      </tr>
    </table></td>
  </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="About" id="ctl00_ctl00_MainContent_LiveExample_Menu1n4">
    <td><table class="Menu-Skin-StaticItem ctl00_ctl00_MainContent_LiveExample_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td style="white-space:nowrap;width:100%;"><a class="ctl00_ctl00_MainContent_LiveExample_Menu1_1 Menu-Skin-StaticItem ctl00_ctl00_MainContent_LiveExample_Menu1_3" href="/CSSAdapters/GenericPage.aspx?goto=About" style="border-style:none;font-size:1em;">About</a></td><td style="width:0;"><img src="/CSSAdapters/WebResource.axd?d=ezc31dhyEr-aJlJoVPvSLH5-h2Wn79B30&amp;t=632963954623059509" alt="Expand About" style="border-style:none;vertical-align:middle;" /></td>
      </tr>
    </table></td>
  </tr>
</table>