当前位置： > 网页制作 > HTML/Xhtml > 文章内容

标记语言——再谈清单(2)

http://www.itjxue.com 2015-08-05 23:09 来源:未知 点击次数:

一群名词与解释的标记法,哪种更好?

OK,这个问题已经提供够多线索,本身差不多就是答案了.在我们看完下面两种方式之后,你就会知道刚才这句话的意义了.比问题本身更重要的是:方法A是个在标记名词与解释时经常使用的做法,而方法B其实是一种很少人会使用的清单,但是它能应用在许多情况下,结构也更灵活.

首先,让我们很快的看看你可能十分熟悉的名词 / 解释标记法,特别是W3C定下的几个标准:

方法A

<ul>

<li>CSS 

A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.</li>

<li>XHTML 

A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML.</li>

<li>XML 

A simple, very flexible text format derived from SGML.</li>

</ul>

这个方法看起来有点道理,使用无序清单,并且以 标签隔开名词与定义内容.

然而,如果我们想为每个名词(CSS,XHTML和XML)与定义内容指定不同的样式,那么要怎么做呢?使用方法A时的唯一选项,是加上某些可以指定样式的标签,像是额外的或.从维护的角度来看,这不是个理想的做法.

图8-5是方法A在一般浏览器中的显示效果,名词与定义分别处于单独一行.

图8-5 以一般浏览器显示方法A的效果

除了不能为每行制定特殊的样式外,方法A并没有什么缺点,但是已经足够当成接口,让我凸显方法B使用的清单种类 -- 定义清单.

方法B

<dl>

<dt>CSS</dt>

<dd>A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.</dd>

<dt>XHTML</dt>

<dd>A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML.</dd>

<dt>XML</dt>

<dd>A simple, very flexible text format derived from SGML.</dd>

</dl>

定义清单(<dl>)内容由两种额外标签组成:<dt>(定义名词)以及<dd>(定义描述).对我们的例子来说,定义清单完美符合内容代表的意义 -- 因为我们就是在定义一系列名词,解释.

根据预设值,大多数可视化浏览器会将定义描述<dd>显示在独立的一行内,并且稍微缩进(图8-6),当然我们可以利用CSS视需要修改缩进设定.

图8-6 一般浏览器显示方法B的效果

由结构引导样式

语义上来说,方法B十分完整,让我们能为清单的每一个元素使用独立标签,这让我们能分别为名词,揭示内容制定特定样式.

举例来说,我们能做个简单修改,以CSS把<dt>变成粗体.只要几行声明就能达成这个目的.完全不必修改标签内容.

dt {

font-weight: bold;

}

只要这样就够了,不必为清单内容加上,甚至是标签,现在所有的<dt>都会变成粗体,与图8-7一样.

图8-7 方法B为<dt>加上font-weight:bold的效果

加上图片

或许你发现我喜欢用CSS为标签加上小图标,我喜欢这个做法的理由,是因为我能使用CSS的background属性打扮页面,同时把属于装饰性,不重要的图片与页面内容,结构分开.

更换,增加或移除这些图片的动作十分简单,因为我不需要修改标签内容就能完成这些变动.

对定义清单来说,如果加上小箭头图标,从名词指向定义内容的话,应该很有意思.我们能以下面这段CSS轻松加上这个效果:

dt {

font-weight: bold;

}

dd {

margin-left: 15px;

padding-left: 15px;

color: #999;

background: url(dd_arrow.gif) no-repeat 0 2px;

}

我们所做的修改,首先是以margin-left:15px稍微拿掉一些<dd>标签预设的外补丁,接着,我们把定义描述的颜色换成灰色,使其与<dt>的区别更大.同时在描述文字的左边,理顶端2像素的地方放上一个小巧的橘色箭头图标,并且在描述文字的左边留下15像素的内部定,让图标不会与文字重叠,图8-8就是完成的效果.