那些被我遗忘掉的XHTML标签们
作者:dudo 来源:dudo博客 发布时间:2008-06-07 14:27:00
突然发现自己对Web前端技术掌握得很少很少,就是自己最感兴趣的XHTML+CSS部分知道也不算多。在XHTML 1.1规定的诸多元素中,我平时能用到的只有那么几个,有一半吧,其余得很少在设计中用到。这并不是说没有可以使用的地方,而是自己对他们的使用缺乏了解,即便他们的使用范围本来就很窄,但是他们能从HTML过度XHTML中,说明他们有不可替代的地方。在不断追求Web标准的今天,前端开发者们应该让每个XHTML标签都有用武之地,否则更不用谈什么Web2.0了。
现在,就让我一一找回那些被遗忘在角落里的XHTML标签们吧。
字符串格式化 :相对比较熟悉的元素
em与strong
相对于其它元素来说,em和strong应该是比较常见的,我只知道它们都是用来强调文本的,但是不是很了解它们的差别。em和strong都用来强调语气,不过strong的语气更加强烈一些。big与small
和字面意思一样,它们是来控制字符大小的。不过这里要说的是我们在CSS中设定字体的时候一般会设12px、9pt 等。而按照Web标准的要求我们应该使用 font-size:small,font-size:middle等,所以相应地使用big和small来随意扩大和缩小字符。输出 :我对这一组元素基本上很陌生
code
<code>标签用来指定一段程序代码,就象我们在UBB里使用的[code][/code]一样,我没有注意UBB转换之后是不是使用了<code></code>,如果没有那就问题了。<code>这是一段放在程序代码</code>
<tt>
<tt>呈现的是打字机的效果或者是等宽字体。的确,它很少会被用到了已经。kbd
<kbd></kbd> 之间是一段键盘字符,也就是说,它之间的字符都是能由键盘直接输入的。在我见到的情况中,很多时候它都是和<code></code>替换使用,这可能和个人的理解有关。 在清除浮动(闭合浮动元素)的方法总结与选择 的演示示例中我就使用了<kbd>标签来盛装CSS代码。var
<var></var>之间定义的是变量。dfn
这个标签专门用来下定义时使用。比如要解释什么是什么的时候,就应该使用<dfn>标签:
上面提到的这几个标签一般只有在计算机编程中才会用到,例如,当你向页面输出代码时。所以对它们觉得陌生没有什么好奇怪的。块级元素:
<acronym>与<abbr>
两者都是代表标签之间的内容为缩写形式,不同的是<acronym>定义的是首字母的缩写,<abbr>定义的是普通的缩写形式。它们都有一个title属性,当鼠标移到这段文字上时会显示提示,并且还可以帮助浏览器检查拼写错误。如下页面的代码(鼠标放到缩写元素上可以看到全称):
是Web标准的一部分;
etc.<address>
dudo@dudo.org
定义地址。其时这个标签应该经常被用到,比如一个Email地址等,但是当我们写Email地址的时候我常常就当作一般字符来处理,很少考虑到使用<address>,即使有时想表现特殊效果。<blockquote>、<q>、<cite>
三者都和引用有关,其中<blockquote>用于较长的引用,它有一个cite属性用于指定被引用的内容出处。同时,作为块级元素,其内部可以出现其它XHTML标签而不仅仅是文本。如果你要通过Strict验证则必须包含一个块级元素,如:<blockquote>
<p>一段文本</p>
</blockquote><blockquote>之间的文本在显示时会两端自动缩进以突出引用内容。
<q>用于短内容的行内引用,它也有一个cite属性用于指定引用来源。根据XHTML1.0的规定,<q></q>之间的内容必须以引号开始并以引号结束。
<cite>可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。如:
《CSS Mastery》<ins>与<del>
它们是经常一起出现的一对标签。主要用于对内容的修改——删除掉原来的,替换成两个的。如:
本站网址已经从www.duxinhua.cn更换为:www.dudo.org。输入
<button>
<button>一个本不该被遗忘的元素,但是它却在很多时候被<input type="button">代替,关于<button>的使用有太多太多的技巧,因此强烈推荐你阅读这篇被遗忘掉的button标签<optgroup>
这个标签主要是配合<option>一起使用用于分组下拉列表,我们可以这样使用:<select>
<optgroup label="China">
<option value="Beijing" selected="selected">Beijing</option>
<option value="Shanghai">Shanghai</option>
</optgroup>
<optgroup label="US">
<option value="New York">New York</option>
<option value="Washington">Washington</option>
</optgroup>
</select>
演示效果,其中label属性用于指定分组名称:元信息
<base>
<base>标签其实在做.net的时候用过,用它来指定所有链接都打开一个新窗口。<base>标签是元信息,它必须出现在<head></head> 之间,它有两个属性:href和target。其中,href是必须属性,它用于指定基准链接,这主要是用于页面中使用相对地址的链接,比如你指定href=http://www.dudo.org/的话,所有相对地址如"article.asp"等转换为绝对地址之后都是http://www.dudo.org/article.asp的形式,要注意,这和你的文件所处的目录层次没有任何关系。taget属性用于指定是打开新窗口还是基于父窗口,与<a>相同。这篇文章主要想熟悉一下被自己遗忘的那些元素。其实它们都有自己的用武之地,只是我对Web标准的掌握还远远不够,所以才会有很多元素淡出了自己的视线。其实不是遗忘,是自己对Web标准的理解已经走进了误区。我总结了一下,可能会有下面的几个因素:
不重语义。有时候我突出某些词组的时候会简单地使用<b></b>一类的标签,有时候还会使用<span style="color:red"></span>等,这些都不够语义,强调就应该用<em>和<strong>,虽然我们可以使用CSS来使得它们在浏览器里看起来没有什么区别,但是对于浏览器和搜索引擎来说,完全不是一个概念;
过度的Web标准。在写XHTML结构的时候一味追求代码简洁,能省掉一个标签就省掉一个标签,甚至认为比别人多用一个标签就是比别人水平低一下节,导致这些元素失去用场。比如使用<acronym>、<abbr>等,我的文章里经常出现简写,我却从来没有使用过这两个标签,因为觉得它们不会带来任何表现上的改进,还会增加DOM深度;
对语意的错误理解,过度注重布局。对于Web标准的理解还只停留在布局的认识上,知道使用ul、ol、dl等元素代替<div>和<table>,以为这就是注重语义了,其实语义无非这些。有些朋友也和我一样,它们对于Web标准的理解还只停留在布局上,认为布局里使用合理的标准就可以了,但是内容,怎么去表达页面的内容,也同样重要。


猜你喜欢
- 相关文章推荐:各种loading加载图标下载 gif格式loadinfo和ajaxload一样,也是一个在线Ajax载入动画生成工
- 介绍:细处着手,巧处用功。高手和菜鸟之间的差别就是:高手什么都知道,菜鸟知道一些。电脑小技巧收集最新奇招高招,让你轻松踏上高手之路。 摘 要
- 目录:分析和设计组件编码实现和算法用 Ant 构建组件测试 JavaScript 组件话说上期我们讨论了队列管理组件的设计,并且给它取了个响
- 一.基本的查询语句,特殊符号||。制定列的别名AS,唯一标示distinct1.字符连接符“||”与“+”符oracle:select &n
- MSSQL随机数 MSSQL有一个函数CHAR()是将int(0-255) ASCII代码转换为字符。那我们可以使用下面MS SQL语句,可
- 如何做一个检索结果带链接的检索?具体代码和说明如下:<% data=request.form("search_da
- 应该是开心网(kaixin.com)的宠物功能又升级了,这几次发来的邮件内容不仅不能让我开心,反而让我觉得很恶心。开心网注册也一段时间了,之
- 您在访问网站时是否会在有些页面上见到这种功能---您在可以访问此网站的同时,还可以查看您免费邮箱中是否有新邮件。这个功能是不是让您觉得很心动
- 请先看看以下演示中的图案文字。这可不是图片效果,而是用CSS滤镜中的Chroma() 语句做成的文本文
- WAP站点,这似乎是一个有点落伍的东西。在诞生之初,它很简陋,只能通过一个叫WML的标记语言来搭建没有任何美感的文字+链接页面。而今,绝大部
- 分区视图联接来自一组成员的水平分区数据,使数据看起来象来自同一张表。SQL Server 2000 区分本地分区视图和分布式分区视图。在本地
- 减少HTTP请求,是可以提高网站速度的,把所有的背景图像都放到一个图片文件中,然后通过CSS的background-image和backgr
- msxml3.dll 错误 '80004005'未指定的错误/Project/lijiang_071017/include/
- 如果MySQL服务器启用了二进制日志,你可以使用mysqlbinlog工具来恢复从指定的时间点开始 (例如,从你最后一次备份)直到现在或另一
- 一套javascript摇奖程序,随机6+1选号码,类似游戏彩票摇奖效果,实时滚动。截图:<style>.inp{ width:
- 原则一:注意WHERE子句中的连接顺序: ORACLE采用自下而上的顺序解析WHERE子句,根据这个原理,表之间的连接必须写在其他WHERE
- 惊叹于老外的发现 《CSS Background image on html image element?》,自己从没关注过,也没想过如此的
- 注意:如果您尚未阅读过原来那篇老文章《悟透JavaScript》,请先行阅读该文,以了解上下文关系。在上面的示例中,我们定义了两个语法甘露,
- 上四篇的内容是把常用的XHTML标签拿出来介绍了一下,不是很详细。不过没关系,重点是要能先知道用他们,以后深入了再去细细研究更为详细的特性以
- 从开始认识CSS(DW4)那时起,我就知道了CSS的强大,但从未用CSS排版过,因为我曾经尝试过学习,但感觉太难了而且用DW的表格,所见及所