几个不太常用但很有用的HTML Tag

 

虽然经常接触HTML，不过有些标签以前却从没引起我的注意。但是其中几个Tag的确比较有用，而且是符合W3C XHTML标准的。

1. Label

Label是用来标记Input元素的提示的。例如：

<label for="id_name">Name</label><br />
<input type="text" name="name" id="id_name" size="20"/>

Label的“For”属性要和Input元素的ID相一致。

好处：点击提示文字，就自动Focus对应的输入元素。对于Radio，Checkbox这类点击区域特别小的控件特别有用：
Color:<br />
<input type="checkbox"  name="color" id="color_r" value="red"><label for="color_r">&nbsp;red</label><br>
<input type="checkbox"  name="color" id="color_g" value="green"><label for="color_g">&nbsp;green</label><br>
<input type="checkbox"  name="color" id="color_b" value="blue"><label for="color_x">&nbsp;blue</label><br><!--如果For和ID不匹配，点击文字是没有用的-->

 red
 green
 blue
 

2. FieldSet & Legend

FieldSet用来明确把一组Input控件归成一组（相当于VB/VC里面的Group控件），而Legend则是组的标题(相当于Group控件的标题)。 例如：

<fieldset style="width:20%">
  <legend>Person</legend>
  <label for="name">Name</label><input type="text" id="name" />
  <fieldset>
    <legend>Gender</legend>
    <input type="radio" name="gender" id="male" /><label for="male">Male</label><br>
    <input type="radio" name="gender" id="female" /><label for="female">Female</label>
  </fieldset>
</fieldset>

Person

Name

Gender

Male
Female

3. Optgroup

用于Select里面的option的分组。例如：

<select name="age">
  <optgroup label="baby">
    <option>0-2</option>
    <option>3-5</option>
  </optgroup>
  <optgroup label="kid">
    <option>6-10</option>
    <option>10-15</option>
  </optgroup>
  <optgroup label="adult">
    <option>16-30</option>
    <option>31-40</option>
    <option>41-60</option>
  </optgroup>
</select>

0-2 3-5 6-10 10-15 16-30 31-40 41-60

2、sub标记和sup标记-文字对象的上、下标设置　

　　sub标记是内嵌元素，其功能是：内含文本要以下标的形式显示，比当前字体稍小。此元素在 Internet Explorer 3.0 及以上版本的 HTML 中可用，在 Internet Explorer 4.0 及以上版本的脚本中可用。此元素需要关闭标签。

　　一个常见的例子就是在编辑数学公式时我们要对变量进行上下标设置，实例如下：

X₂
X²　

　　出来的效果是这样的: 　　

　　X₂　　

　　X²　

　　与其他标签结合可以用于注释,例:

哈哈_{<em>注：伟大的领袖、革命家、军事家和思想家</em>}　　

　　出来的效果是这样的: 　　

　　哈哈_{注：伟大的领袖、革命家、军事家和思想家}　

 

3、bdo标记-为选定文本片断禁用双向法则

　　我们先来看一个简单的例子：

<bdo dir="ltr">我非常爱你</bdo>

<bdo dir="rtl">你爱常非我</bdo>　　

　　注：使用bod标签时必须连用dir标签属性，ltr指从左到右的编排顺序，rtl指从右到左的编排顺序。　

　　其显示结果为：　

　　我非常爱你　　

你爱常非我　　　

　　我们看到，不一样的文本排序在经过bdo定义后变成了一样的显示结果，这就是bdo的作用。Unicode 双向算法会根据所嵌入的字符序列的方向特性将其自动反转。例如，英语文档的基本方向是由左至右(ltr)。如果文档内某一段包含了阅读顺序为由右至左(rtl)的语言，你就可以应用双向算法来反转该语言的方向。双向算法和 DIR 标签属性通常足以应付嵌入方向的变更。但是，当你将格式化后的文本交由双向算法处理时，可能会发生错误。例如，以电子邮件格式化后的包含英语和希伯莱语的文本段将被双向算法不正确地转换。由于希伯莱语文本的阅读顺序已经以电子邮件格式转换过了，对其应用双向算法则导致再一次对该文本进行转换。bdo元素将关闭双向算法并控制阅读顺序。当你使用bdo元素时必需连用dir标签属性。