`
shuai1234
  • 浏览: 971599 次
  • 性别: Icon_minigender_1
  • 来自: 山西
社区版块
存档分类
最新评论

HTML中少为人知的个性化标记

阅读更多

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

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

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

view plaincopy to clipboardprint?
<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> 

<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元素将会达到不一样的效果:

view plaincopy to clipboardprint?
<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> 

<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标签属性。

分享到:
评论

相关推荐

    Java 中少为人知的小点子

    Java 中少为人知的小点子 Java 中少为人知的小点子是指在 Java 语言中一些鲜为人知的技巧和特性,这些特性可以帮助开发者更好地编写代码,使代码更加简洁、易读和高效。在本文中,我们将探讨 Java 中的一些鲜为人知...

    极具魅力个性化的首页HTML+FLASH

    在描述中同样提到“极具魅力个性化的首页HTML+FLASH”,这进一步强调了网页设计的风格和特点,即通过HTML(超文本标记语言)和Flash(一种创建交互式动画和多媒体内容的技术)的结合,为访问者创造出引人入胜的首页...

    基于HTML的个性化日历

    在这个项目中,我们将深入探讨如何利用HTML的元素和属性来实现一个功能性的个性化日历。 首先,HTML日历的基本结构通常包括一个表格(`&lt;table&gt;`),因为表格能方便地组织日期布局。在HTML中,每个日期可以被表示为...

    html语言基本标记

    HTML(HyperText Markup Language)是用于创建网页的标准标记语言,它是互联网上应用最广泛的语言,也是构建网页的基础。本篇文章将深入探讨HTML语言的基本标记,包括其格式、常用标记及其应用示例。 一、HTML标记...

    麦子学院-HTML标记语言

    麦子学院-HTML标记语言,xmind思维导图。

    HTML标记单词表-HTML标记单词表-HTML标记单词表

    HTML标记单词表-HTML标记单词表HTML标记单词表-HTML标记单词表-HTML标记单词表HTML标记单词表

    对二值化的图像进行标记

    在实际应用中,对二值化图像进行标记常用于诸如文字识别、细胞分割、目标检测等任务。例如,在文字识别中,二值化的图像可以是经过阈值处理后的文本区域,标记后可以分别处理每个字符;在细胞分割中,标记可以将每个...

    html标记语言常用标记大全(打印版)

    在网上找的,自己用,已排好版,可以直接打印

    HTML: 1.HTML是什么? 超文本 (HyperText) 标记 (Markup) 语言 (Language) 是一种用来创建网页的标准标记语言。

    超文本 (HyperText) 标记 (Markup) 语言 (Language) 是一种用来创建网页的标准标记语言。XML XHTML HTML运行在浏览器上,默认由浏览器解析。 HTML是一套标记语言,不是一套编程语言。 标记语言是一套标记标签...

    html标记大全

    里面是html标记大全,很全面的.分类很详细的,讲解的也很到位

    HTML中的次要文本标记:使用small标签

    标签是一个有用的工具,它可以语义化地标记这些内容,并提供默认的样式。通过CSS,开发者可以进一步定制这些文本的样式,以确保它们既符合设计要求,又具有良好的可访问性。 通过本文的介绍,你应该对如何在HTML中...

    html教程(最简单易学的html标记手册)

    这是一本我见过的最好的html标记学习手册。里面包含所有的html标记,而且包含了每一个标记的所有参数,对每一个标记及参数都有具体的实例和说明解释,可以对比查看效果。里面记载了每一个标记及参数的详尽用法和实例...

    10 支付标记化技术介绍

    支付标记化(Tokenization)技术是一种安全措施,用于在银行卡交易过程中保护敏感信息,例如银行卡号和个人信息等。这种技术通过将敏感信息替换为一个非敏感的等效值(即标记,Token)来实现,这个标记在交易中代表...

    精准医疗‐个性化、问题与前景

    精准医疗是一种以病人为中心的医疗理念,其核心在于根据个体的遗传信息、生物标记物、表型特征和心理因素等个体化特征来制定诊断和治疗方案。这一概念强调个性化的需求,以期提高治疗效果和减少不必要或效果欠佳的...

    HTML5标记省略 语法规则

    - **开始标记**:`&lt;colgroup&gt;`标记的开始标记可以省略,如果`&lt;colgroup&gt;`标记内的第一个标记是一个`&lt;col&gt;`标记,或者如果标记后未跟着另一`&lt;colgroup&gt;`标记,且其结束标记已被省略。(注意:`&lt;colgroup&gt;`不能被忽略...

    初学者接触HTML了解一些HTML标记(1)

    6. **小程序标记**:`&lt;APPLET&gt;` - 在HTML4中用于插入Java小程序,但在HTML5中已被废弃,现代网页开发更倾向于使用JavaScript或其他框架来实现类似功能。 7. **区域标记**:`&lt;AREA&gt;` - 配合`&lt;MAP&gt;` 标签用于定义图像...

    HTML基础:字符实体、URL规范与语义化标记的应用

    此外还探讨了语义化标记的优势,比如维护代码简便性和降低交流的成本,同时对于SEO优化进行了基本概述。 适合人群:初学网页开发并希望深入学习HTML应用技巧的人群。 使用场景及目标:本资料适用于帮助初级开发者...

    常用HTML标记和格式

    ### 常用HTML标记和格式详解 #### 标题标记 HTML中的标题标记是用于定义文档中的各级标题,从`&lt;h1&gt;`至`&lt;h6&gt;`,...随着技术的发展,虽然HTML5引入了更多语义化的标记,但上述基础标记仍然是网页设计中不可或缺的部分。

Global site tag (gtag.js) - Google Analytics