毅博客

定义列表

maozhenzhi@gmail.com (振之) — Sat, 02 Aug 2008 13:34:12 +0800

写完“无序列表”和“有序列表”之后已经有人和我说这两篇看得没什么意思。这两篇文章如果只以单向读取的形式阅读那么的确是没什么意思，但是这两篇重要的地方就在于要读者加入自己的思考。有序无序单标签很简单，只要知道用法就行，但是关键点我认为不在于知道这个标签长什么样，重点是在于什么样的数据适合使用什么样的列表。什么样的数据是有序的，什么样的数据是无序的？阅读完要思考，这样才能学到东西，知识才能是自己的。

定义列表其形式特别，用法也很特别，相比较无序列表来说用到定义列表的就少很多。也有很多朋友还没有开始使用这个列表，那么下面就来分解一下这个列表的代码：

<dl>
<dt></dt>
<dd></dd>
</dl>

看上面这段代码我们发现这里并没有出现<li>标签，而是由DL、DT、DD三个标签组成，根据外型以及之前的列表我们可以知道，DL是这个列表的一个容器，就像个箱子，不同的是这次箱子里不只有统一标准的单个小盒子了。而是出现两个不同的内容我们怎么理解这个DT与DD呢？从语义上来讲，DT是名称，是标题，而DD是解释，是内容。DT与DD都是盒子，DD只对应解释他上面的一个DT，不能越级或是向下解释。当DT不存在的时候那么DD也就没有存在的意义，而DT是否一定需要DD跟随其后，这点上我还没有找到确切的文献可以说明这一点，但是以我对于定义列表的理解，我认为如果数据中只有DT没有DD那么这就一不能成为定义列表，直接用UL无序列表就可以了。但是当数据中只有某一个或是少数几个没有DD，而大部分都有DD，那么我认为这种形式是可以存在的。

<dl>
<dt>有序列表</dt>
<dt>有序列表</dt>
<dt>有序列表</dt>
<dt>有序列表</dt>
</dl>

以上这种很明显就不合适了，这样的形式就是无序列表，何必要用定义列表呢，从语意上也说不通。

<dl>
<dt>有序列表</dt>
<dd>有序列表就是有序列的数据以列表形成组织而成的数据形式</dd>
<dt>有序列表</dt>
<dd>有序列表就是有序列的数据以列表形成组织而成的数据形式</dd>
<dt>这一句没有解释</dt>
<dt>有序列表</dt>
<dd>有序列表就是有序列的数据以列表形成组织而成的数据形式</dd>
</dl>

上面这种形式则我个人认为是可行的。那么一个DT是否可以带多个DD呢？这点上我同样没有找到文献说明不可以，并且在一些知名的网站中这种一个DT带多个DD的依然很多。我对此的看法是，物殊情况下一个DT带多个DD是可以的，但是一般情况上我认为这种做法还是有所欠缺。从释上来看，多个DD是否表明着多个解释？或是解释内容要分段也不需要让DD来当这只抓耗子的狗。一个DD中完全可以内嵌很多个段落标签。再则从样式应用上来讲，多个DD整体松散，其设计的扩展性不足。比如，当我们要做一个点击DT隐藏对应的DD的效果时，这种多DD的做法就不那么好实现了。所以在不是特殊用途情况下尽可能不要使用一个DT带多个DD的做法，还是把内容放在DD里，分段的就让段落标签去做，分列表的就让有序或是无序列表去表现。

还是开始讲的，标签本身没什么，重点要思考如何应用。下面给一张图大家看一下是否应该使用自定义列表。一起讨论一下。

有序列表

maozhenzhi@gmail.com (振之) — Wed, 30 Jul 2008 06:57:58 +0800

信息有时候是无序归纳的，有的却有着明确的顺序，在上一篇也提到了。那么简单的来想一下身边有哪些事物是有先后顺序的：操作步骤、排行榜、书目录……以前我们面对这些有着顺序或是有数字注明排序的内容时大多是在数据前自行加上一个数值，或是由程序加上这个数值。而如果使用有序列表则不需要这么麻烦，根本不用自行去填写序数，当单层列表的时候这种特性似乎并不明显，而当使用多层的时候其特性就很明显了。那么还是先来了解一下有序列表的代码形式：

<ol>
<li>这就是列表的内容了，这是第一句</li>
<li>这就是列表的内容了，这是第二句</li>
<li>这就是列表的内容了，这是第三句</li>
<li>这就是列表的内容了，这是第四句</li>
<li>这就是列表的内容了，这是第五句</li>
</ol>

大家看到了其本形式与无序列表的一样，只是在外围标签上名称不同。无序是UL，有序就变成OL了。所不同的是有序列表将会有比无序更多的标签属性。因为是有序的就会涉及顺序的方方面面。

改变开始值

通常情况下浏览器会从阿拉伯数字“1”开始自动有序编号。而事有特殊，当有序列表需要变成两个部分，那么下一部人从头开始编号自然就是不对的了。那么下一部分的编号自然是要根据上一段最后一个编号加1为开始号。这就是说我们需要改变列表的开始值。改变开始值的属性是："start"，正式的写法是：

<ol start="6">
<li>这就是列表的内容了，这是第一句</li>
<li>这就是列表的内容了，这是第二句</li>
<li>这就是列表的内容了，这是第三句</li>
<li>这就是列表的内容了，这是第四句</li>
<li>这就是列表的内容了，这是第五句</li>
</ol>

大家注意到了，上面这段代码是说列表的开始值是从6开始的，那么现在可以试着在一段有序列表中加入这一属性看看是否发生了变化？

改变编号类型

浏览器中默认一般都是阿拉伯数字为列表编号，那么是否可以有别的类型呢？有，属性为“type”，不过提供的类型不多，只有五种：

类型值	生成样式	序列举例
A	大写字母	A、B、C、D、E
a	小写字母	a、b、c、c、e
I	大写罗马数字	I、II、III、IV、V
i	小写罗马数字	i、ii、iii、iv、v
1	阿拉伯数字	1、2、3、4、5

在代码中的写法应该是：

<ol type="A">
<li>这就是列表的内容了，这是第一句</li>
<li>这就是列表的内容了，这是第二句</li>
<li>这就是列表的内容了，这是第三句</li>
<li>这就是列表的内容了，这是第四句</li>
<li>这就是列表的内容了，这是第五句</li>
</ol>

我认为这个类型值大家还是少用为好，因为用CSS一样可以设置这个类型。我一向主张样式方面的事应由样式语言来做。那么除非特殊原因，这个属性还是不用为好。当然无论是CSS1还是CSS2基本上都没考虑中国，在CSS2中已经为提供了日文编号字符，可是还没有中文。我认为在这点上CSS2还是有着缺陷的，至少他没有提供更好的扩展形式。虽然他没提供，但是我们一样可以用我们自己的形式去完成多样化。怎么做呢？请大家先思考，后面有关于列表的样式内容将会讲述我是如何处理的。

无序列表

maozhenzhi@gmail.com (振之) — Tue, 29 Jul 2008 06:50:09 +0800

段落已经讲完了，那么一些基本的应用方式也讲了一些，那么是否已经应用了呢？当然应用可以更为丰富，那么这些就需要自己在实际工作中不断的摸索与思考，然后创新并总结得出新的应用形式。当然了段落不能当作万用膏药一样倒处使用，不过相信大家也都知道现在“DIV”这个标签的作用已经被扩大化了（POPO曾有一篇文章《<DIV>不是万能膏药》），更已经被一些人拿来与CSS一并说事。这里呢还是要重新强调一次：DIV只不过是HTML中的一个无语意标签，他可以用来布局或是作为无语意部分的处理，而CSS则是一种样式语言。名不正则言不顺，我这里不是古板，而是这种说法会让大家对于标准的理解会产生偏颇。基本的等级都弄不清楚，把标签功能无限放大，这些都不是一个正确的学习态度。我这里细细讲解各种标签以及用途其中一点也是希望大家正确理解WEB标准的意义。正确的说法应该是“xHTML+CSS”或是“WEB标准”简称为“标准”也可以。今天不是为发牢骚的，还是讲今天的主题《无序列表》

列表，相信大家都已经用过了，Word里也有，很多文档编辑里也都有。而在HTML中的列表则有三种类型：无序列表、有序列表、定义列表。饭要一口口的吃，事要一件件的做，今天只讲无序列表，并且今天所讲的列表不会涉及到CSS的美化工作。说到这里大家应该也明白了，我的讲解都是分开来的，并不以样式美化为主，这也是要告诉大家标签代码非常重要。那么我们首先就要来理解列表。我们日常生活工作都是琐碎而没有条理的，而要想得到一个高效的友好的信息互通那么就要梳理信息，做好归类。这样才能有效传达信息。用列表把同类的内容进行简单的归纳，我认为这是列表的一个基本作用。常见的用途有：图书目录、饭店菜单、人员名单、待办事宜等等。而这些信息大多不是大篇的信息内容，而是简要的标题。当然列表的用途不是说只能是归纳标题信息，列表并没有去限制内容的多少。只是我们常用列表去归纳的多是些标题信息罢了。

那么我们又如何去理解无序列表呢？无序的对应就是有序，从字面上去理解就很容易，有序就是说他本身就标明了前后顺序的，这是严格的，并且这些信息本身就有着顺序特性。比如我们写操作步骤那就就需要明确第一步第二步，这样的信息必然是有序的，而无序呢？也就是说其本身就是无序的没有任何顺序可言。这里要举个实例让大家思考一下：政府部门的领导名单前后顺序是他们最头疼的事，虽然他们有时会写着排名不分先后，但是实际上依然是有排名的，那么这里我想提出问题：这样的名单应用有序列表还是用无序列表呢？当然这个没有标准答案，各人都有各人的思考方式，那么你是怎么想的？不妨在评论上留下你的想法。这里我就不说我是怎么想的，希望大家能多动动脑筋，多思考。

列表的标签形式是：

<ul>
<li>这就是列表的内容了</li>
<li>这就是列表的内容了</li>
<li>这就是列表的内容了</li>
<li>这就是列表的内容了</li>
</ul>

这里我们要注意到，列表有两个部分，一个是最外面的一个标签<ul></ul>，一个是里面的内容<li></li>。我们可以这样去理解，<li></li>是一个个标准化的小盒子，他们主要存放着列表信息，而<ul></ul>则是个大箱子，他的作用就是存放小盒子。这些一个个的小盒子只有放在大箱子里他们才不会弄丢了。整齐而有利于运输（移植）、存放（定位）。那么列表与段落一样可以有很多属性在其中，比如，我们可以为<ul></ul>设置一个id或是class或是title等属性，其特点功用与段落中的一样。而<li></li>也可以有这些属性，但是一般情况下来说列表即然是同类的一般也不作特殊化处理。

那么无序列表基本上也就算是讲完了，其实这篇最重要的内空就是什么样的信息应该用无序列表，而这些则需要在实际应用的时候多分析多思考。那么对于还没使用列表标签的朋友，开始使用列表标签，放弃用DIV代替列表标签的做法。或是用表格来表现列表的朋友也可以试着改变一下。从现在开始使用无序列表标签。当然如果你已经用了发现这样还不能满足你，那就等后面讲解如何用样式去开发出列表的潜力吧。今天讲的内容虽然比较简单，但是还是希望来读本篇文章的朋友可以思考一下上面我提出的问题。

延伸阅读：

<DIV>不是万能膏药 —— POPO
XHTML结构的重要性 —— 毅博客

从浏览器想开去

maozhenzhi@gmail.com (振之) — Mon, 28 Jul 2008 05:54:37 +0800

南京的炎炎夏日也未能挡住书友会朋友们的参与，下午两点半我们正式开始了这个月的话题：“浏览器”。一开始大家大致上说了一些自己认为各浏览器中各自认为很有特点的一些服务或是功能特点。由于大家都属于专业用户所以大部分人还是很倾向于使用FIREFOX，原因也都差不多，FIREFOX这种以扩展形式来丰富浏览器应用对于用户来讲很方便也比较容易组合出适合自己使用的浏览器。这种特点可能是FIREFOX吸引人的地方也同样可能是影响FIREFOX发展的暂时的一个障碍。因为大部分使用浏览器的人并非是专业用户，他们并非是做互联网行业的，对于这些用户来说最简单最直接的浏览器就可以了，如果需要下载无数的插件才能满足使用可能会觉得无从下手。

有困难就会有解决方案，FIREFOX也可以采用针对特定的用户群体制作出集成了常用插件的浏览器文件提供下载。事实上Maxthon能被很多人喜欢并接受，我认为很大一部分原因是他从一开始就提供了丰富的功能，并且从一开始就设置好了一般性使用方案，那么当用户安装好后马上就可以使用了并不需要花时间去下载插件，也不需要再动手设置什么。丰富的功能，简单的获取，便捷的使用，我想这就是Maxthon成为大众所喜欢的浏览器的重要原因。然从这里我们可以看出用户类型是多样的，那么浏览器的未来发展将要面对并满足不同群体的使用需求。

对于开发者来说浏览器具备良好的开发辅助功能那是最好不过的，比如可以看到当前浏览网站的IP、PageRank、Alexa、JS、CSS等等，那么对于这一类群体来讲方便于开发的浏览器就是最适合与贴切的。当然社会群体会有很多比如：家庭主妇，她使用浏览器无非是上网，未来可能更多是在线上看一下哪些产品好，然后从淘宝或是易趣或是拍拍上购买自己的产品。那么浏览器是否提供了丰富针对购物者的浏览器呢？购物者在购物的时候需要哪些特别的帮助？需要哪些附加的功能？再比如：学生，他年轻，有活力，比较喜欢玩，那么对于娱乐内容就更为看重。那么作为一个学生来讲，他们对于浏览器的需求又是什么？当然类型会有很多，或许类型并不以此来作为一个分类标准。但是无论如何，浏览器将会以多样性丰富我们的生活。

在讨论的时候大家思考的都不一样，立足点也不同，以至于已经讨论到未来世界的互联格局，骇客帝国的例子也被列举。也说到了未来浏览器与操作系统之间会变得很模糊，因为目前来看很多事都可以通过浏览器在网上实现了，那么作为操作系统存在的必要性还有多高？因为从目前来看，我们的数据可以存储在网上，我们可以在线看视频听音乐，和别人聊天，甚至在线处理Office文档。这是一个大趋势，未来浏览器的重要性的确会比操作系统高很多，因为操作系统的作用已经在减弱，那么什么事都可以在线处理的时候我们的生活也就会世大的改变。我们不会再被终端拖累，人会变得更加的自由。

当然多样性的特点也告诉我们，即使如此现有的这种操作系统也不会突然消失，因为目前来看在线处理还只能是一般性或是初级事物，而一些比较大数据处理，或是安全要求高的数据处理还需要依靠单机运行。但是少数的情况不会影响大局走势。未来可以去假设、想像、规划，但是着眼于当下可能是最为务实的。

最后提供几个我常用的FIREFOX扩展：

IE TAB http://ftp.mozine.cn/addons/extensions/ie_tab/ie_tab-1.5.20080618-fx-windows.xpi
Tab Mix Lite CE http://ftp.mozine.cn/addons/extensions/tab_mix_lite_ce/tab_mix_lite_ce-3.0-fx.xpi
Easy DragToGo http://ftp.mozine.cn/addons/extensions/easy_dragtogo/easy_dragtogo-1.1.2.1-fx.xpi
Add to Search Bar http://ftp.mozine.cn/addons/extensions/add_to_search_bar/add_to_search_bar-1.7-fx.xpi
SearchStatus https://addons.mozilla.org/zh-CN/firefox/downloads/file/28983/searchstatus-1.25-fx.xpi

扩展阅读：

美化段落文本 2

maozhenzhi@gmail.com (振之) — Tue, 22 Jul 2008 07:11:42 +0800

懒，可能是唯一解释为什么这么长时间才写这一篇的主要原因。不述详情，以此责心。

上一篇讲了如何美化段落的基本形式，通过段距、首行缩进、首行突出以及字体、大小、色彩等也作了简要的讲述。由于很多知道在一些已有的资料里已经有了，所以我这里就不多说了，主要还是要讲一些应用的技巧。今天要讲的内容是如何实现“首字下沉”，也就是我博客首页上的效果，第一个字是很大的红色楷体，陷于一段文字之首。这种做法在杂志中常见，但是在网页中不那么常见。那么如何实现呢？其实很简单，只有一句CSS就可以了。下面列出，不喜欢读很多文字的朋友可以就此句细细研究不用向下读了。

Selector:first-letter {font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00;}

如果你觉得还不是很清楚，那么这里就细细讲述一下：

首先要在HTML中有一段自己的文本，是在<p></p>中的也好，在其它块标签中都可以。给他个ID也好，class也好，直接的标签也可以，先找到这个选择符，这里假设一段文字的id为article，那么给这段的CSS一开始就写成

#article:first-letter {……}

:first-letter 是个伪类，用途是设置对象内的第一个字符的样式表属性。该语法属CSS2范围。详细见《CSS2中文手册》

这里再细说语句中的一个个属性，首先我们要让这个字大于正文中的字，那么给他的字体大小是正文内容的2.5倍。当然你也可以选择3倍，4倍，这个根据自己的需要来作修改。

#article:first-letter { font-size:2.5em }

为什么要用em这个单位呢？因为有时候我们的读者们会需要通过浏览器缩放的功能改变文字的大小，如果设为一个具体的大小，那么自然就会比例失调。这个大家可以动手变动一下看看找找感觉。有了大小了，但是字体不对，那么这里应增加字体与字体加粗

#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; }

看过上一篇的朋友一定知道这样的写法是比较冗长的，有比较简单的简写方式。那么如何简写请根据上篇提示动手修改一下。我们发现这里还有一个line-heihgt:1.2em; 为什么要用这个？这是因为我们通常会给这段文字设置一个行高，而这个行高通常是超过1.5em的，那就是说这样的行高会使得首字离正文内容有点远，并且不好看，那么自然要给这个首字一点特别的对待，当然是1em还是1.1em都要根据自己的实际需要来修改调整。这里的数字不是一定的。

好了，到现在为此这个首字似乎还并没有打算下沉的意思，那么这里的关键点就是 float:left; 对的，就是左浮动。我们要知道，当一个对象被设为浮动属性之后，不论原来是否是块级元素都会具备块级元素的特性。而周围没有被设定的文本流侧会环绕着这个对象。图片在文本中的环绕也是这个属性。

#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; }

动手试试看，是不是已经看到首字下沉了？当然或许你看出来了，有点不那么整齐上面是不是多了一点出来？不用担心，用padding来设置一下让这个字顶部多点空间出来，让这个首字和第一行齐平。

当然如果你对这个伪类产生兴趣的话那么也推荐你接着研究一下：

Selector : first-line { sRules }

Selector1 Selector2 : first-child { sRules }

南京UCD书友会延期通知

maozhenzhi@gmail.com (振之) — Wed, 16 Jul 2008 14:06:42 +0800

关于南京UCD书友会的重要通知：

1、地点更改为先锋书店（五台山总店，广州路 173 号，地图）；

2、时间推迟到 7 月的第 4 个周日（7 月 27 日）。

内部照片：

关于先锋书店：

被称为"大地上的异乡者"；
最引人注目的是巨大的十字架（见上图）；
五台山总店是一个巨大的地下停车场；
书店自己设计、制作并销售记事本、便签、书签等小东西；
近期在升级空调，所以本周书友会延期至下周。

有关使用InDesign排版的几点注意事项

maozhenzhi@gmail.com (振之) — Tue, 27 May 2008 09:31:34 +0800

经过一段时间使用InDesign来排版DM杂志留意到一个问题，并且这个问题一直得不到答案，在网上也难得能搜得到，这里为了方便更多初学InDesign的朋友能少走弯路特此写出来。

我在做好排版并导出PDF后发现封面的图片好像蒙上了一层白雾，整个看起来就特别的差，印刷出来之后的效果也是一样，黑的地方不够黑，白蒙蒙的一片，我一直以为是图片的问题，于是就加强图片的色彩，结果还是不行。后来我留意到并不是所有页面里的图片都会出现这种现象，那我就想是不是页面中其它问题产生的。于是我用剥除法一点点去掉页面中的元素。后来发现原来是一个有透明背景的图片使得整个页面蒙上了一层白色。经过我反复的测试也证实了这一点，页面中泛白的问题来源于其中某一张图片的背景透明。

后来我发现除此之外有一些页面依然还是有这种泛白的情况，那么我去核查发现原来InDesign中的阴影效果同样不能用，虽然InDesign提供了这些特性但是并不表明这些效果是百分百可用的。

但是我们要背景透明也是为了使图片与其它图片或是文本、背景等有一个很好的设计效果。如果不能使用那又怎么办呢？阴影我们可以自己做一个灰色的底当作是阴影。但是不支持透明那就表明有很多效果实现不了。如何解决这一难题呢？其实很简单，用蒙板。这个我们在Photoshop或是Illustrator中都有接触过。如果你有在使用InDesign你一定会发现软件中并没有一个蒙板的词。就算我们辛苦勾出来的轮廓好像一样没办法把图片勾出来。因为根本没法把勾出来的路径与图片合并。事实上这里就需要用到“路径查找器”了。我们只要选择“减去”就可以了。不妨去试一试，不过要注意，你的路径一定是要把不需要的地方勾出来。

好了，下面我们汇总一下上面那些啰嗦的话：

导入的图片不要有透明的特性
不要使用软件自带的阴影效果
要抠出想要的图片就要先抠出不想要的部分，然后使用路径查找器减掉不需要的部分

注：我不是InDesign的专家，请不要问我问题。这里只是把我遇到的问题标注出来让大家知道，如果有相关问题请在网上搜索或是自己研究。

有关于IE8 Beta 1两个提醒

maozhenzhi@gmail.com (振之) — Sat, 10 May 2008 10:18:42 +0800

前两天特意装了一下IETester，用以方便测试，装好后使用发现IE8有两个地方需要大家注意。

IE5MAC的过滤器对IE8 Beta 1版同样有效
IE8 Beta 1版不支持截字省略，也就是说不支持CSS3中的text-overflow:ellipsis;

关于第一条可能对大家影响不大，不论怎么说MAC下用IE的人实在是太少了，好处是可以让我们针对IE8再写个专门的CSS样式表。如果还不知道IE5/MAC过滤器的朋友可以把下面这个代码复制到自己的CSS样式表中，然后再写个叫“ie5mac.css”的样式表。不过大家可以把这个IE5MAC改为IE8WIN。

/*\*//*/
@import "ie5mac.css";
/**/

如果说第一条还算是个不好不坏的情况，那么第二条就明显很糟了。大家都知道不论怎么说text-overflow:ellipsis;也是CSS3中已经确定的，IE本来是支持这一特性的，为什么在IE8又放弃这个支持呢？关于截字省略的这个我一向主张应该由CSS来解决的，这样可以保持XHTML代码信息的完整性，又方便样式的变动，不过Firefox一直都没能支持这一特性让我十分的费解，即然是CSS3，并且是个很实用的效果为什么不尽早的支持呢？不过目前IE8还只是个BETA版，希望未来IE8能继续支持text-overflow:ellipsis;

美化段落文本 1

maozhenzhi@gmail.com (振之) — Fri, 09 May 2008 12:19:38 +0800

上四篇的内容是把常用的XHTML标签拿出来介绍了一下，不是很详细。不过没关系，重点是要能先知道用他们，以后深入了再去细细研究更为详细的特性以及使用方法就容易多了。上篇已经说了在第五篇会开始讲CSS，刚开始讲不能讲得复杂，我们还是由浅入深，一步步来。还是那句话：先用起来，然后再去研究。即然我们第一篇讲的是段落，那我们这篇初讲CSS当然也还是要从段落开始，让我们的段落先漂亮起来。

在没有讲CSS之前我们先去想一下什么样的段落才看起来才是最舒服的？如果大家一时还没有什么想法或是还不清楚如何去分析这个问题不妨先看一下《网页设计技巧系列之一浅谈文本排版》。不论如何至少我们的小学老师告诉我们每一段的第一行应该空两个字。这可能是我们接受到的第一个关于如何划分段落的方法。并且可能更多人已经产生了思维定式，认为段落必需要首行空两格。而我则认为区分段落的首要原则为段距，其次才能是段落首行的处理。而首行的处理是否只有缩进两字呢？我个人认为不是，因为我们还可以用“首字下沉”、“首行突出两字”等来表现。有人会说：“首字下沉我就见过，比如作者的博客就用了这个效果，但是首行突出两字似乎有点奇怪。”然而事实上首行突出两字必不是作者发明的，在中国古代的奏本上就常采用这种格式，不同的是因为他们常需要在行首写上一些颂语，而要表达这种颂语就需要抬高其地位，比如“君”“圣上”等字眼，所以才会突出两字，久之则形成了一种特别的排版形式，这种形式现在的文体是用得少了，不过大家可以多多了解一下，方便以后表达不同的文体时可以用得着。

即然段距是段落区分的第一要素，那么我们就先来解决这个段距的的样式问题。即然是一段一段的那么我们每一段都是由一组<p></p>组合而成的，而我们的CSS只要通过对这个段落标签的描述就可以实现我们所需要的效果了。那么基本形式是：

p {这里是样式描述内容}

我们注意到了，在CSS中这个段落标签是不需要加尖括号的，只需要一个"p"即可以了。所有的标签都是如此处理。那么我们需要给每个段落设个段距，这里我们有两个描述属性，一个是padding，另一个是margin，这两个表现的效果看起来有点像，但是却有着本质上的区别，如果我们把段落表示成盒子，在这个盒子里装着一些东西，padding就是这些东西与盒子内侧边的距离，而margin则是盒子与盒子之间的距离。这里很显然，我们里应该是使用margin。写法是：margin:1em 0;这是一种简写的方法，如果写全了应该是：margin-top:1em; margin-right:0; margin-bottom:1em; margin-left:0; 这很明显太冗余了，所以一般我们通常是写成：margin:1em 0 1em 0; 这里的顺序是上右下左，由于上下的数值是一样的，左右的数值是一样的，那么就可以再缩写成：margin:1em 0; 这里的em是指相对长度单位，相对于当前对象内文本的字体尺寸。有关于单位的知识请查阅沈苏小雨编制的《CSS2.0中文手册》。那为什么要用em而不用px或是pt呢，这是因为我们现在的流览器大多都有字体放大的功能，这也是方便读者的能看得更清楚文字内容，那么如果我们用px来设定段距那么当字体放大时段距却不会变动，那么当放大到一定数值时这个段距的特性也就不存在了。所以我们使用em这个单位，也就是希望当字体变大时段距也跟着相应变大，方便识别。

这里值得注意的是，当我们使用margin的时候两个段落之间的margin会有重叠，那么看上图中右侧的图我们可以发现在两段之间的margin是被重叠了原本应该是两个高度相加的结果还是一个高度，但是上图中间的示意padding却没有重叠他们的高度是相加的，这点大家要注意到，这不是什么BUG，而是一种特性。那么我们就写一句CSS来设定我们的段落：

p {margin:1em 0;}

说了段距自然就会说到行距，有看过《网页设计技巧系列之一浅谈文本排版》的朋友就会明白行距的重要性，那么你是否有给自己的页面设置行距呢，是如何设置的？设置行距有一个专门的属性：line-height，这个应该称之为行高。因为我们要设定的是一行的高度，而不是行与行之间的距离。这也就是为什么我们总发现Photoshop里设置行距的数据与做网页设置的数值不一样的原因了。但是行距依然是可以通过我们设定的行高最终产生，所以方法不同，但是目标是一致的。一般我们的行高一定是要超过字体高度的，否则行与行之间就会重叠，当然我们不排除使用这种式做一些特别的效果，但是至少在阅读文本上我们需要行行清楚。行距不宜太大，太大了阅读效率不高，如果太小了又容易读错行。所以一般行高不应超过两个字的高度。振之最常用的是1.6em~1.8em之间，如果宽度很大，我们就需要加大行距不然我们很容易读错行，如果宽度小的时候行距过大则失去了阅读的效率。那么我们把刚才的段落的CSS做一下增加，标注一下我们的行距：

p {margin:1em 0; line-height:1.6em; }

这样对于一个基本的段落设置就已经完成了，如果需要给这个段落加个首行缩进，还可以为这个段落设置一下字体，字大小，字样式，色彩等等：

p {margin:1em 0; text-indent:2em; font:normal normal 12px/1.6em "宋体"; color:#000; }

这里关于字体的属性也是个缩写形式，顺序是：“font : font-style || font-variant || font-weight || font-size || line-height || font-family ”，这些知识在沈苏小雨的CSS2.0中文手册中都有讲述。我这里就不重复了。这里的color是文字的色彩，#后面的数值应该是6位，可以直接复制Photoshop拾色板里的数值。但是我们也常常会缩写。缩写方式是，奇数位与偶数位的值相同时即可合并为3位的色值。比如：#4488cc，可以缩写为#48c，如果需要首突出，那么不光需要把text-indent的值设为负值，还需要修改padding的数值，因为突出去的也就是超出了内容区那么如果padding区没有空间那么这两个突出去的字就无法显示。那我们再给出一个首行突出两字的CSS

p {margin:1em 0; padding:0 0 0 2em; text-indent:-2em; font:normal normal 12px/1.6em "宋体"; color:#000; }

有关美化段落文本的内容先讲到这里，下一篇讲解首字下沉的做法以及注意事项！

链接与文本标签们

maozhenzhi@gmail.com (振之) — Tue, 25 Mar 2008 11:16:48 +0800

第四篇《WEB标准能有多难？》专栏文章将结束关于文本部分的XHTML的讲解。那么这篇主讲的内容涉及链接、标题、插入、删除、上下标、分割线、换行等标签。

我们都知道网页的最大特性是“链接”，是的这个在我们现在看起来习以为常的东西，让我们的生活发生了巨大的变化，是这个小小的标签成就了这个世界上无数的互联网天才。那么让我们看看这个标签的真面目：<a href="URL" >文本区</a>，就是这个简单的标签，其实大家都在使用，用Dreamweaver可以很简单的添加链接。但是尽管如此我们还是需要知道A的属性是什么，这样才能更好的利用它。A是个内联标签，也就是说它本身并不会产生分行。他是流于文本之中的无素。那么我们都知道内联元素是不能包含块元素的。那就是说在A中不能包含段落、DIV等这些块级的元素。那么你工作中是否有这样的情况呢？是否在A里加了无数的块级标签呢？那从现在开始改掉这个坏习惯，这样不光可以避免一些没必要的BUG问题，同时也能给GOOGLE等这些搜索引擎一个好印象，多点印象分。当然除此之外振之还推荐在大家伙在A中加入titile属性。例：<a href="URL" title="这可用以解释或是显示完整的文本内容">文本区</a>。为什么这么做呢，我这里有这样一篇文章《当标题不能显示完整的时候》，大家可以看一下，这只是加title属性其中一个小小的用处，但是作用非常有效。

链接标签中的href＝“URL”这个URL是个非常强大的东西，当然这不是我们这个专栏的内容，但是也非常推荐读者们可以认真阅读一下相关的知识。我从百度百科中找到了相关文档，请大家点击阅读^{（站外链接请读者们选择新窗口阅读）}。关于链接就暂时只讲这么多，如有什么疑问请通过文后的联系信息与我联系或是在线给我留言。

标题几乎是所有文章都会有的要素，也是我们用以识实与索引文章的重要元素。我们通过标题去感知文章内的核心。那么你知道吗？合理使用标题标签会让你的文章更受关注。我们都知道XHTML给我们提供了h1~h6，六个标题标签，那么我们如何分配这六个标题标签的使用呢？下面给出一些建议：h1，在浏览器中显示最大，那么自然用来表示最大的标题，对于一个网站来说哪个标题才是最大的？是LOGO，我们通常会在网站的最前面先标注这个网站的名称。所以h1就用来放LOGO，当然如果你的网站没有LOGO，只有一个网站名称，那也可以。当然振之是不推荐在大家在h1中放个图片。我们完全可以通过CSS来实现以图换字。并且推荐网页中h1只出现一次。

当h1找到了专用的功能，那么担任内容标是，或是基它标题的重担就要放在另外几个标题标签上了。在余下的几个标题中h5与h6在浏览器默认显示字体是小于正常文本字体的。那么推荐h5与h6只作为免责声明或是版权通告来使用。这样即表明重要性，又不会太过明显影响阅读。对于标题标签的使用尽可能的注意一下他们之间的等级关系。当然标题的使用还是需要根据实际使用来决定。这里只是给出个建议。标题标签是块线元素，但是他并不能再包含块级元素了，只能包含内联的元素，比如链接、图像，换行之类的。记得有个朋友前两天在文章中提到过关于标题的内容，但是写法就有错了，他把链接写在了H1标签的外面，把H1包起来了，这样的写法是不推荐的。也不符合标准思维容易给以后的学习产生不好导向。

我们的文章难免会有错误的地方，那么有错就要改，但是有时候我们需要告诉读者这段是被删除的但是又能让读者看到。那么删除标签的作用就产生了。以前我们会使用<s></s>或是<strike></strike>来得到一个删除线的效果。但是这仅表是一个删除线的效果，语义上没有DEL来得更为明确，所以这里我要告诉大家放弃以前的方式，采用<del></del>这个标签。同样能表达我们需要的效果，并且意义更为直接明确。那么除了删除有时我们还需要对删除的部分作出一些添加与修改。那么时候这个标签就非常有作用了那就是插入标签<ins></ins>。相信不用我说大家也知道如何使用这两个标签，但是千万别忘记了给这两个标签加上两个重要的属性：cite与datetime。解释与时间。解释不用说了，只要用文字注明为什么要删除或是为什么要插入就可以了。但是这个时间需要明确一下格式。严格的格式是：YYYY-MM-DDThh:mm:ssTZD。呵呵与我们平时用的差不多但是有区别，其中T是表示时间段开始的必需字符，而TZD则是表示时区，Z是表是格林威治标准时间。一秀的写法是：2008-03-25T14:26:22Z

在所有的标签中有两上标签是样式标签，但是却没有被禁用，因为这两个标签所表述的内容很特别，上下标，<sup>上标</sup>,<sub>下标</sub>。

这两个标签用得到机率比较小，但是上标应该还是会常用到的，比如温度中的摄氏度的上的小圆圈，当然现有有专业的字符对应“℃”，还有我们常看到书中的脚注上标^[1]。

hr，分平分隔线，这个标签与换行标签只要注意标签的写法就可以了<hr /><br />

关于文本部分的标签就讲到这里，当然标签可能还有很多，但是一些不推荐使用的，不常用的，这里就不再推荐，有兴趣的可以搜索一下相关的内空阅读一下即可。下一篇将引入CSS，一点点的美化我们的文档。