分享HTML中少为人知的个性化标记 - 建站学院 - 源码网

源码网欢迎您!

分享HTML中少为人知的个性化标记(2009-06-11)

  我们知道HTML是一种再简单不过的标记语言,一些基础性的知识,该说的已经说了,该讲的也已经讲得差不多了,没有人再去关注HTML还有什么新颖之处,其实不然,也许我们熟悉的只是HTML中极为常见的标记,但对于一些特殊的标记,您未必熟悉也未必使用过,但也许您会真的喜欢它们。

  1、optgroup标记-对select元素中的选项进行逻辑分组

  这个元素我们很少有人去关注它,也很少有人知道这个元素的功能是什么,其实,这个元素通常用于select元素中,其功能是对select元素中的选项进行逻辑分组。这个元素其实在很多场合我们都可能用到,比如我们对web访问者进行身份调查时通常会让其填写资料,以现住城市为例,您可能住在江苏省也可能住在山东省也可能住在其它省份,在这些省份下面还有市,这就需要进行分组,把这些市分组到所属省。通常情况下我们会这样写代码:

<select>
<option selected>您所在的城市</option>
<option>---山东省---</option>
<option>济南市</option>
<option>莱州市</option>
<option>……</option>
<option>---安徽省---</option>
<option>合肥市</option>
<option>……</option>
<option>---江苏省---</option>
<option>南京市</option>
<option>……</option>
</select>

  出来的效果是这样的:  

  其实这种方法是非常粗陋的,如果我们用optgroup元素将会达到不一样的效果:

<select>
<option selected>您所在的城市</option>
<optgroup label="山东省">
<option>济南市</option>
<option>莱州市</option>
</optgroup>
<optgroup label="安徽省">
<option>合肥市</option>
<option>……</option>
</optgroup>
<optgroup label="江苏省">
<option>南京市</option>
<option>……</option>
</optgroup>
</select>

  出来的效果是这样的:  

  这种方法是不是更好呢。 

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

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

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

X<sub>2</sub>
X<sup>2</sup> 

  出来的效果是这样的:   

  X2  

  X2 

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

毛泽东<sub><em>注:伟大的领袖、革命家、军事家和思想家</em></sub>  

  出来的效果是这样的:   

  毛泽东注:伟大的领袖、革命家、军事家和思想家  

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

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

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

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

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

  其显示结果为: 

  我非常爱你  

你爱常非我   

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

作者:猴年马月出处:天极网

上一篇:准确获取指定元素CSS属性值

下一篇:Photoshop调出外景人物照片颓废暗黄色

关于本站  |  版权声明 | 合作联系 | 网站地图 | 帮助中心 |  | XHTML/CSS
Copyright © 2004-2010 downcodes.com 程序支持:木翼 冀ICP备05003145号
本站诚招服务器赞助商