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

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

时间：2020-03-24 16:42:44

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

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

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

Menu TreeView DetailsView FormView GridView DataList Login ChangePassword PasswordRecovery CreateUserWizard LoginStatus

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

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

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

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

Products</a>

<ul>

Windows</a>

</li>

Office</a>

</li>

Business Solutions</a>

</li>

Servers</a>

</li>

Developer Tools</a>

</li>

Subscriptions</a>

<ul>

Software</a>

</li>

Manage Your Profile</a>

</li>

</ul>

</li>

More</a>

<ul>

Mobile Devices</a>

</li>

Games and Xbox</a>

</li>

Hardware</a>

</li>

MSN</a>

</li>

</ul>

</li>

</ul>

</li>

Legal</a>

<ul>

License</a>

</li>

</li>

Privacy</a>

</li>

</ul>

</li>

Support</a>

<ul>

Lifecycle and Policies</a>

</li>

Contact Support</a>

</li>

Third-Party Services</a>

</li>

Research</a>

<ul>

Product Info</a>

</li>

Knowledge Base</a>

</li>

Communities</a>

</li>

IT Pros</a>

</li>

Developers</a>

</li>

</ul>

</li>

Downloads</a>

<ul>

Windows Update</a>

</li>

Office Update</a>

</li>

</ul>

</li>

Learning</a>

<ul>

Books</a>

</li>

Training</a>

</li>

Certification</a>

</li>

Events</a>

</li>

Webcasts</a>

</li>

Patterns and Practices</a>

</li>

</ul>

</li>

Subscriptions</a>

<ul>

Newsletters</a>

</li>

Manage Your Profile</a>

</li>

</ul>

</li>

</ul>

</li>

Just for You</a>

<ul>

Home Users</a>

</li>

Macintosh Users</a>

</li>

IT Professionals</a>

</li>

Developers (MSDN)</a>

</li>

Partners</a>

</li>

Small Businesses</a>

</li>

Large Businesses</a>

</li>

Government</a>

</li>

Educators</a>

</li>

Journalists</a>

</li>

</ul>

</li>

About</a>

<ul>

Accessibility</a>

</li>

Careers</a>

</li>

Community Affairs</a>

</li>

Diversity</a>

</li>

Investor Relations</a>

</li>

Research</a>

</li>

Security and Privacy</a>

</li>

</ul>

</li>

</ul>

</div>

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

<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&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">

<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&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">

<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&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">

<tr>

</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">

<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&t=632963954623059509" alt="Expand About" style="border-style:none;vertical-align:middle;" /></td>

</tr>

</table></td>

</tr>

</table>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。