你不知道但又不敢问的五个 XHTML 元素

• 下载演示项目 - 950 B

引言

在 ASP.NET 开发过程中，我注意到一些重要的 XHTML 标签很少被 Web 开发人员使用，即使是经验丰富的开发人员也是如此，所以我想到写这篇文章来推广它们。

提到的大多数元素都与 HTML 兼容，但所有元素都与 XHTML 兼容。我在 W3C Validator 上针对 XHTML 1.1 和 XHTML 1.0 Transitional 验证了这些元素，并在 Internet Explorer 6 和 Firefox 1.5 上进行了测试。

这些元素包括 optgroup、label、fieldset/legend、col/colgroup 和 acronym。在本文中，我将指出这些元素在 Internet Explorer 和 Firefox 之间的显示差异，此外，我还将展示它们与 ASP.NET 的关系。接下来是对每个元素的简要介绍

1. optgroup

<label for="county">County</label>
<select id="county">
    <optgroup label="England">
        <option>Surrey</option>
        <option>Kent</option>
    </optgroup>
    <optgroup label="Scotland">
        <option>Orkney</option>
    </optgroup>
</select>

<label for="languages">Languages</label>
<select size="6" multiple="multiple" id="languages">
    <optgroup label="Classical">
        <option>C#</option>
        <option>C++</option>
        <option>Java</option>
    </optgroup>
    <optgroup label="Web">
        <option>ASP.NET</option>
        <option>PHP</option>
    </optgroup>
</select>

optgroup，代表 Option Group（选项组），它是一个元素，用于在 select 元素内对一组选项元素进行分组并为其添加标签。它非常适合显示州和城市、国家和州以及其他类似的分类项目。

不幸的是，此元素不被任何 ASP.NET 服务器控件生成；但是，我认为您可以轻松地继承 DropDownList、ListBox 或 Item 控件并进行必要的修改来生成它。

2. label

<label for="FirstName">Full&nbsp;Name</label>
<input id="FirstName" type="text" />
Gender:&nbsp;
<label for="male">Male</label>
<input id="male" type="radio" name="gender" />
<label for="female">Female</label>
<input id="female" type="radio" name="gender" />

label 元素为 form 元素提供了一个标题。它的主要属性是 "for" 属性，该属性指向您要为其提供标题的元素。

除了为元素提供标题外，label 还会使选择关联元素更加容易；因此，通过点击标题，您将聚焦到关联元素，就好像将标题文本作为关联元素的一部分一样。在提供的演示中，尝试点击“Full Name”一词，旁边的文本框将被选中；同样，当您点击“Male”一词时，单选按钮将被选中。

ASP.NET 为 RadioButton 和 CheckBox 服务器控件（以及其他控件）的 Text 属性生成此元素。这解释了为什么点击控件旁边的文本时可以将其聚焦。在 ASP.NET 2.0 中，Label 服务器控件有一个新的 AssociatedControlID 属性，该属性会将控件渲染为与指定元素关联的 HTML label，而不是将其渲染为 span 元素。

3. fieldset/legend

<fieldset>
    CP is a good place to publish XHTML related articles. 
</fieldset>

<fieldset>
    <legend>Personal Information</legend>
    <label for="FirstName">Full&nbsp;Name</label>
    <input id="FirstName" type="text" />
    Gender:&nbsp;
    <label for="male">Male</label>
    <input id="male" type="radio" name="gender" />
    <label for="female">Female</label>
    <input id="female" type="radio" name="gender" />
</fieldset>

fieldset 是一个创建框架的元素，而 legend 是一个可选元素，用于为该框架创建标题。

在 ASP.NET 2.0 中，Panel Web 控件有一个新的 GroupingText 属性，该属性会将其渲染为 legend 和 fieldset。但是，ASP.NET 1.1 没有可以生成此元素的标准 Web 控件。

4. col/colgroup

<table border="1">
    <colgroup>
        <col width="150px" />
        <col width="10px"  />
        <col width="220p" />
    </colgroup>
    <tr>
        <td valign="top">1</td>
        <td>&nbsp;</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>&nbsp;</td>
        <td>4</td>
    </tr>
</table>

colgroup 元素是一个表格元素。它的唯一子元素是 col 元素。每个 col 元素影响表格中的一列。您可以为 colgroup 元素中的所有列指定通用属性，并为 col 元素中的各个列指定特定属性。您也可以省略 colgroup 元素并保留 col 元素。

使用 col 元素的好处是，您只需要指定一次属性，而不是在列中的每个 td 元素上添加相同的属性，这样可以减少属性数量，并且代码更易于管理。

对于跨浏览器问题，仅将 width 属性与 colgroup 和 col 元素一起使用，因为我注意到 Firefox 不支持 colgroup 和 col 的所有属性。

可惜，ASP.NET 的 Table 和 GridView 服务器控件不生成这些元素。

5. acronym

<acronym title="Code Project">CP</acronym> is a good place to publish 
<acronym title="Extensible HyperText Markup Language">XHTML</acronym>
related articles.

acronym 元素通过 title 属性提供术语的定义。通过使用此元素，您可以帮助不熟悉该术语的读者，更好地优化您的页面以供搜索引擎抓取，并支持可访问性。

默认情况下，IE 6 不会在此元素包围的文本上显示任何标记；但是，Firefox 会在该文本下方显示虚线。当您将光标悬停在上面时，两个浏览器都会显示完整含义的工具提示。

如果您喜欢此元素，请查看 abbr（缩写）元素，它具有类似的作用。

结论

我发现了一些需要额外关注的元素；但是，还有更多隐藏的元素值得关注，例如 th、tf、base、address、bdo、blockquote、code、dl、dt、dd 和 dfn 元素。

本文为每个元素提供了快速参考；有关属性和用法的完整列表，请尝试 W3 Schools、htmldog.com，您也可以随时查阅 World Wide Web Consortium 的官方文档。

如果您觉得本文内容有用，请记住投票。

历史

• 2006年4月25日 - 第一个版本
• 2006年5月10日 - 第二个版本
• 2006年5月13日 - 第三个版本