rel 属性是用来说明链接和包含此链接页面的关系，以及链接打开的目标。它有许多的属性值，比如next、previous,、chapter、section等等。我们现在比较长见的是rel=”external nofollow”与rel=”nofollow”两种参数的应用。

首先来说下Nofollow

“Nofollow”向网站管理员提供了一种方式，即告诉搜索引擎”不要追踪此网页上的链接”或”不要追踪此特定链接“。 最初，nofollow 属性出现在网页级元标记中，指示搜索引擎不要追踪（即抓取）网页上的所有外向链接。 例如：

1

<meta name="robots" content="nofollow" />

或者您可以这样用：

1

<a href="signin.php" rel="nofollow">用户注册</a>

再来说说external nofollow

rel=”external nofollow”只是更相对于rel=”nofollow”参数更加规范一些。rel=”external nofollow”与rel=”nofollow”其功能就中文译文”不要读取” 及”外部链接不要读取“,就已说得很清楚了。其实rel=”external”只是一个替代target=”_blank” 的属性。target=”_blank” 的属性是打开新窗口。但有些博客因为是采用严格的DOCTYPE声名的，如果你打开网站的源代码，在第一行的位置就可以看到：

1

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在这种情况下target=”_blank”可能会失效，因此采用rel=”external”这个参数来替代，因此我们可以明白rel=”external”的属性只是打开新窗口的作用。

通过上面的说明您应该明白在何种情况下可以考虑使用nofollow了吧？以下列出经常用到nofollow的几种情况：

• 不可信赖的内容
• 付费链接
• 按优先级别进行抓取

更多可以参见 GOOGLE 的官方文档。

扩展阅读

• 网页中表单的使用技巧 (0)
  本文园子总结了在网页常用布局中表单的一些使用技巧，可以帮助你更灵活的控制表单，使页面更加人性...
• 语义化表单里的标签 (0)
  表单是用户提交信息的重要渠道，是(X)HTML的一个重要部分。表单主要用于采集和提交用户输入...
• 丰富表格里的标签 (1)
  表格，一个在网页设计中比较经典的工具。曾经，表格是网页设计人最重要的布局排版手段，但是它的存...
• 定义列表dl,dt,dd的用法 (2)
  上篇文章给大家分享了无序列表和有序列表的用法，其实一般我们在做列表的时候通常只会用到ul和l...
• 无序列表和有序列表的用法 (0)
  首先先来看个截图： 这种以列表形式来显示的内容在网页中称为列表，相信大家都经常...
• h1~h6的使用原则 (2)
  在遵循网页标准制作网页的时候，为了使得设计更具有语义化，我们经常会在页面中用到h1~h6的标...
• 以图换字方法和思路 (2)
  不知道您在做网站时有没有遇到过这样的问题：想保留链接的背景，但又要链接里的文字消失！可是弄了...
• 一些少用的XHTML标签 (0)
  在我们的实际应用中，还有一些xhtml标签是不太常用的，今天园子把使用频率较少但又有些代表性...
• q与cite标签的应用 (1)
  前面的文章里园子给大家介绍过：strong和em标签的应用，大家知道这两个标签有一些相似之处...
• abbr和acronym标签的使用 (2)
  很多人都喜欢使用缩略词来表述特定的事物或是事件，这样做的好处是方便快递地传达信息，而不用每次...

您可能也喜欢：
为 WordPress 的阅读全文链接加上 nofollow	Nofollow 标签的语义和使用	网页设计中如何避免 IE 浏览器图片下方的空隙	播放 PPT 时禁止显示动画的方法	中国联通又开始强奸用户了
无觅

form标签的使用

form是用于申明表单，定义采集数据的范围，也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。

fieldset & legend标签的使用

fieldset用于对表单中的元素进行分组，而在<fieldset>这个组内，<legend>就是它的标题，用于描述<fieldset>所包含的内容。一般可视化浏览器把<fieldset>渲染为带边框的，<legend>一般显示在左上角。要注意的一点是，<legend>元素必须是<fieldset>内的第一个元素，否则<legend>前面的内容将出现在<fieldset>前面，而不是在里面。
fieldset元素不仅仅适用于大块的内容分组，也可以用于选项的分组，就像这样：

1
2
3
4
5
6
7

<fieldset>
<legend>个人爱好</legend>
<input type=”checkbox” id=”likeSleep” name=”like”/>
<label for=”likeSleep”>睡觉</label>
<input type=”checkbox” id=”likeEat” name=”like” />
<label for=”likeEat”>吃饭</label>
</fieldset>

效果如下图所示：

当然，这只是最初的样式，我们可以通过css重新定义它的外观。

label标签的使用

HTML 4.0引入了label对象，你可以使用它将文本与其他任何(X)HTML对象或内部控件关联。无论用户单击<label>或者(X)HTML 对象，被链接的<label>和(X)HTML对象在引发和接收事件时行为一致，而要连接<label>和(X)HTML对象的方式是：将<label>的for属性设置为要关联的(X)HTML对象的id属性。例如：

<label for=”username”>用户：</label><input type=”text” id=”username” name=”username” />

当用户单击<label>内的文本（用户：）时，<label>会将焦点设置到文本框。
<label>主要是给表单组件增加可访问性设计的，一般我们都把 label 用在表单里。除以上方法，还可以直接用 label 套嵌整个表单组件和文本标签，例如下面的例子：

1
2

<label for=”likeSleep”><input type=”checkbox” id=”likeSleep” name=”like”/>睡觉</label>
<label for=”likeEat”><input type=”checkbox” id=”likeEat” name=”like” />吃饭</label>

下图左边为单击“睡觉”在Firefox下选中复选框的，右边是在IE下的截图，注意虚线框的不同。

input标签的使用

这个是在表单里应用得最多的一个标签，一个由属性值来决定标签的意义的标签。基本结构是：

<input type=”…” id=”…” name=”…” value=”…” />

文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。下面列举了一些input常用的几种类型。

• type=”password”
  密码输入框是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被“*”代替，而输入的文字会被隐藏。
• type=”checkbox”
  复选框复选框允许在待选项中选中一项以上的选项。
• type=”radio”
  单选框当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。
• type=”file”
  文件上传框有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮（语言是中文的浏览器）。
• type=”hidden”
  隐藏域元素不会显示在文档里，所以用户也无法操作该元素。该元素通常用来传输一些客户端到服务器的状态信息。虽然此元素不会显示出来，但是用户通过查看 (X)HTML 的源代码还是可以看到该元素属性的值，所以请注意，不要用该元素传递敏感信息，例如密码。
• type=”image”
  创建一个图像控件，该控件单击后将导致表单立即被提交，并且会提交点击该元素的坐标，例如：

  <input type=”image” name=”test” src=”test.gif” mce_src=”test.gif” />

  将把x坐标以test.x 、y 坐标以test.y提交，就是在name后面加个.x和.y组成两个新的name，value的任何属性值都将被忽略，src 属性指定了img元素。

• type=”button”
  这是一个普通的按钮，它的值并不会提交，而是显示在按钮上，如果没有通过JavaScript给其添加操作时，它将是个普通的可视元素。
• type=”submit”
  提交按钮，将表单（Form）里的信息提交给表单里action属性所指向的地址。如果用户单击提交按钮提交了表单，并且按钮指定了 name 标签属性，那么该按钮也将在提交的数据中。
  如果在同一表单中有多个<input type=”submit” …/> 按钮， 按回车键将使用第一个<inputtype=”submit” …/>按钮提交表单，除非此时正有另一个<input type=”submit” ../>按钮获得了焦点。如果另外一个<input type=”submit” …>按钮已获得焦点，按回车键将使用该<input type=”submit” …>按钮提交表单，为什么有可能是多个提交按钮呢？因为type=”submit”的值也是可以提交的。
• type=”reset”
  重置按钮，默认的文字是“重置”。可以通过value属性指定文字。该按钮单击后将重置表单控件为其默认值。

在<input>的属性里，name和id并非必须的，name是由表单处理用，而id是给label做连接用，value的显示是因类型而异：type=”text”的直接显示于文本框内；type=”password”的以星号代替value的值；type=”checkbox”、type=”radio”的无法直接在页面上看到；type=”file”的因安全问题，无默认的value，即使你给它添加了value，也会被忽略；type=”hidden”的因为本身已经隐藏，自然也没显示；type=”image”的并无value值，它是由用户点击时实时创建的；type=”button”、type=”submit”、type=”reset”这三种类型的input的value属性指定了显示在按钮上的文字。

textarea标签的使用

多行文本输入框，也是一种让访问者自己输入内容的表单对象，接受的内容比单行文本输入框更多。例如：

<textarea id=”…” name=”…” cols=”…” rows=”…” wrap=”…”>多行文本输入框的内容是写在这里面</textarea>

其中cols属性定义多行文本框的宽度，单位是单个字符宽度（注：Firefox默认没有滚动条，所以得到额外的宽度）；rows属性定义多行文本框的高度，单位是单个字符高度（IE浏览器是计算单个字符宽度）；wrap属性定义输入内容大于文本域时显示的方式，可选值如下：

• 默认值是文本自动换行；当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
• off，用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用Return才能将插入点移到下一行；
• virtual，允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
• physical，让文本换行，当数据被提交处理时换行符也将被一起提交处理。

select & optgroup & option标签的使用

下拉选择框或列表框，是不是听起来很奇怪呢？没错，<select>也是一个由属性决定表现的，同时，这个属性也是CSS无法代替的，它就是size。例如：

1
2
3
4
5

<select id=”…” name=”…” >
<option value=”…”>传说中的测试1</option>
<option value=”…”>传说中的测试2</option>
<option value=”…”>传说中的测试3</option>
</select>

效果如图：

这种就是默认的下拉选择框，而给添加了size属性的会是怎样呢？

1
2
3
4
5

<select id=”…” name=”…” size=”4″ >
<option value=”…”>传说中的测试1</option>
<option value=”…”>传说中的测试2</option>
<option value=”…”>传说中的测试3</option>
</select>

 效果如图：

这时，<select>变成了列表框，size是决定列表框的行数，当然，我们可以再通过CSS重新定义他的高度。optgroup标签可以给<select>的options分类，需要使用一个label属性，在可视化浏览器里，它的属性值会在下拉列表里显示为一个不可选的标题。

1
2
3
4
5
6
7
8

<select id=”…” name=”…”>
<optgroup label=”传说中的分组1″ >
<option value=”…”>传说中的测试1</option>
<option value=”…”>传说中的测试2</option>
<optgroup label=”传说中的分组2″ />
<option value=”…”>传说中的测试3</option>
</optgroup>
</select>

效果如图： 

option就是选择中的内容了，value属性值并不会在浏览器显示，它只是作为提交数据的值。

扩展阅读

• 详解rel=”nofollow”的用法与意义 (9)
  近年来在网站的链接中我们经常会看到类似rel="nofollow"或rel="externa...
• 网页中表单的使用技巧 (0)
  本文园子总结了在网页常用布局中表单的一些使用技巧，可以帮助你更灵活的控制表单，使页面更加人性...
• 丰富表格里的标签 (1)
  表格，一个在网页设计中比较经典的工具。曾经，表格是网页设计人最重要的布局排版手段，但是它的存...
• 定义列表dl,dt,dd的用法 (2)
  上篇文章给大家分享了无序列表和有序列表的用法，其实一般我们在做列表的时候通常只会用到ul和l...
• 无序列表和有序列表的用法 (0)
  首先先来看个截图： 这种以列表形式来显示的内容在网页中称为列表，相信大家都经常...
• h1~h6的使用原则 (2)
  在遵循网页标准制作网页的时候，为了使得设计更具有语义化，我们经常会在页面中用到h1~h6的标...
• 以图换字方法和思路 (2)
  不知道您在做网站时有没有遇到过这样的问题：想保留链接的背景，但又要链接里的文字消失！可是弄了...
• 一些少用的XHTML标签 (0)
  在我们的实际应用中，还有一些xhtml标签是不太常用的，今天园子把使用频率较少但又有些代表性...
• q与cite标签的应用 (1)
  前面的文章里园子给大家介绍过：strong和em标签的应用，大家知道这两个标签有一些相似之处...
• abbr和acronym标签的使用 (2)
  很多人都喜欢使用缩略词来表述特定的事物或是事件，这样做的好处是方便快递地传达信息，而不用每次...

您可能也喜欢：
再见，乔布斯。	实用的 Gif 屏幕录制软件－Gif·gIf·giF	3月8日河南周口发生4.3级地震 震源深度10公里	QQ2009最新版下载	Typetester – 在线对比哪种字体更适合您的网站
无觅

caption标签的使用

<caption>标签可以为表格提供一个简短的说明，也可以当成标题看待。使用的时候，<caption>标签一定要紧接着开始的<table>标签写，默认情况下，大部分可视化浏览器显示表格标题在表格的上方中央，css里的caption-side属性用来控制表格标题显示的地方，大部分浏览器只能把表格标题显示在表格的上方或者下方，只有少部分浏览器支持左边或者右边。

summary标签的使用

<summary>与<caption>的关系有点像标题与描述一样，不过这个属性的值是不会被可视化浏览器显示。如果我们是用看的方式看表格，基本内容都可以看出来，但是使用屏幕阅读器的人就不是那么容易了，他们必须依赖<caption>和<summary>属性才能相对快速地来了解表格的内容。当然，通过<summary>可以让表格有更多方面的应用，并非仅仅只是为了满足使用屏幕阅读器的人。

tr、th、td标签的使用

<tr>用于指定表格中的一行，而<th>是指标题列，大部分浏览器都会把标题列的内容居中并以粗体显示，<td>才是表格中的单元格。<th>跟<td>这两个都是表格最重要的组成部分，它们必须存在于<tr>的子级，内容都是通过这两者来显示的。

thead、tfoot、tbody标签的使用

表格也一样有很完整的结构，它有分头部、主体部分、底部。在HTML4中，它们早已经存在了，不过一直没什么人使用它，在xhtml的时代，我们更须要学习它。尝试创建一份声明是html4 strict类型的网页，使用这样的表格：

1
2
3
4
5
6
7
8

<table>
<tr>
<th>头部</th><th>头部</th>
</tr>
<tr>
<td>内容</td><td>内容</td>
</tr>
</table>

不管是HTML还是XHTML，这几个标签都是提倡使用，非一定要用，但是使用有什么好处呢？园子个人认为有重要的几点是：

• 减少浏览器为渲染表格时额外的检查及错误的添加，可以加速表格的显示；
• 保持打印时表格的结构；
• 可以为CSS提供更多的控制条件等。

有个特别要注意的地方是：它们顺序是<thead>、<tfoot>、<tbody>，先是表格头部跟底部，然后才是表格的主体内容。

colgroup、col标签的使用

有了横向的划分（thead、tfoot、tbody），自然会有纵向的划分。col用于指定基于列的表格默认属性,嵌套的col 属性将覆盖 colgroup属性，而colgroup指定表格中一列或一组列的默认属性。

扩展阅读

• 详解rel=”nofollow”的用法与意义 (9)
  近年来在网站的链接中我们经常会看到类似rel="nofollow"或rel="externa...
• 网页中表单的使用技巧 (0)
  本文园子总结了在网页常用布局中表单的一些使用技巧，可以帮助你更灵活的控制表单，使页面更加人性...
• 语义化表单里的标签 (0)
  表单是用户提交信息的重要渠道，是(X)HTML的一个重要部分。表单主要用于采集和提交用户输入...
• 定义列表dl,dt,dd的用法 (2)
  上篇文章给大家分享了无序列表和有序列表的用法，其实一般我们在做列表的时候通常只会用到ul和l...
• 无序列表和有序列表的用法 (0)
  首先先来看个截图： 这种以列表形式来显示的内容在网页中称为列表，相信大家都经常...
• h1~h6的使用原则 (2)
  在遵循网页标准制作网页的时候，为了使得设计更具有语义化，我们经常会在页面中用到h1~h6的标...
• 以图换字方法和思路 (2)
  不知道您在做网站时有没有遇到过这样的问题：想保留链接的背景，但又要链接里的文字消失！可是弄了...
• 一些少用的XHTML标签 (0)
  在我们的实际应用中，还有一些XHTML标签是不太常用的，今天园子把使用频率较少但又有些代表性...
• q与cite标签的应用 (1)
  前面的文章里园子给大家介绍过：strong和em标签的应用，大家知道这两个标签有一些相似之处...
• abbr和acronym标签的使用 (2)
  很多人都喜欢使用缩略词来表述特定的事物或是事件，这样做的好处是方便快递地传达信息，而不用每次...

您可能也喜欢：
XP 苹果主题美化包下载	PR 再次更新？园子博客回落到3	系统文件替换工具：系统文件替换器下载	开车会车常用汽车灯语分享	液晶数字字体下载
无觅

1
2
3
4

<dl><!–Definition List (定义列表)–>
 <dt></dt><!–Definition Term （定义项）–>
 <dd></dd><!–Definition Description （定义描述）–>
</dl>

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

再看个例子：

1
2
3
4
5
6

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

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

一个DT可以带多个DD吗？例：

1
2
3
4
5
6
7
8

<dl>
 <dt>国内电视台</dt>
 <dd>中央一套</dd>
 <dd>中央二套</dd>
 <dd>中央三套</dd>
 <dt>国外电视台</dt>
 <dd>美国在线</dd>
</dl>

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

最后给一个比较好的例子供大家参考：

1
2
3
4
5
6
7
8

<dl>
<dt >《千与千寻》</dt>
<dd>剧情说的是10岁的少女千寻与父母一起从都市搬家到了乡下。没想到在搬家的途中，一家人
发生了意外。他们进入了汤屋老板魔女控制的奇特世界——在那里不劳动的人将会被变成动物。</dd>
<dt>《龙猫》</dt>
<dd>和爸爸一起搬到乡下的两姐妹，在家旁的一棵大树下发现了只有好孩子才能看见的TOTORO。
其间发生了很多不可思议而有趣的故事。</dd>
</dl>

扩展阅读

• 详解rel=”nofollow”的用法与意义 (9)
  近年来在网站的链接中我们经常会看到类似rel="nofollow"或rel="externa...
• 网页中表单的使用技巧 (0)
  本文园子总结了在网页常用布局中表单的一些使用技巧，可以帮助你更灵活的控制表单，使页面更加人性...
• 语义化表单里的标签 (0)
  表单是用户提交信息的重要渠道，是(X)HTML的一个重要部分。表单主要用于采集和提交用户输入...
• 丰富表格里的标签 (1)
  表格，一个在网页设计中比较经典的工具。曾经，表格是网页设计人最重要的布局排版手段，但是它的存...
• 无序列表和有序列表的用法 (0)
  首先先来看个截图： 这种以列表形式来显示的内容在网页中称为列表，相信大家都经常...
• h1~h6的使用原则 (2)
  在遵循网页标准制作网页的时候，为了使得设计更具有语义化，我们经常会在页面中用到h1~h6的标...
• 以图换字方法和思路 (2)
  不知道您在做网站时有没有遇到过这样的问题：想保留链接的背景，但又要链接里的文字消失！可是弄了...
• 一些少用的XHTML标签 (0)
  在我们的实际应用中，还有一些xhtml标签是不太常用的，今天园子把使用频率较少但又有些代表性...
• q与cite标签的应用 (1)
  前面的文章里园子给大家介绍过：strong和em标签的应用，大家知道这两个标签有一些相似之处...
• abbr和acronym标签的使用 (2)
  很多人都喜欢使用缩略词来表述特定的事物或是事件，这样做的好处是方便快递地传达信息，而不用每次...

您可能也喜欢：
Dreamweaver CS4 简体中文绿色版下载	最简单的Flash生成工具：SWFText汉化版下载	史上最全的汽车标志释义及文化	百度推出百度分享，需邀请码才能使用	网站改版花费670万贵不贵？
无觅

这种以列表形式来显示的内容在网页中称为列表，相信大家都经常见到，在Word里也有，很多文档编辑里也都有。在HTML中的列表则有三种类型：无序列表、有序列表、定义列表。

那么我们首先就要来理解列表。我们日常生活工作都是琐碎而没有条理的，而要想得到一个高效的友好的信息互通那么就要梳理信息，做好归类。这样才能有效传达信息。用列表把同类的内容进行简单的归纳，我认为这是列表的一个基本作用。常见的用途有：图书目录、饭店菜单、人员名单、待办事宜等等。而这些信息大多不是大篇的信息内容，而是简要的标题。当然列表的用途不是说只能是归纳标题信息，列表并没有去限制内容的多少。只是我们常用列表去归纳的多是些标题信息罢了。

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

无序列表的标签形式是：

1
2
3
4
5
6

<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>也可以有这些属性，但是一般情况下来说列表即然是同类的一般也不作特殊化处理。

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

1
2
3
4
5
6
7

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

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

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

1
2
3
4
5
6
7

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

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

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

在代码中的写法应该是： 

1
2
3
4
5
6
7

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

我认为这个类型值大家还是少用为好，因为用css一样可以设置这个类型。园子一向主张样式方面的事应由样式语言来做。那么除非特殊原因，这个属性还是不用为好。当然无论是CSS1还是CSS2基本上都没考虑中国，在CSS2中已经为提供了日文编号字符，可是还没有中文。我认为在这点上CSS2还是有着缺陷的，至少他没有提供更好的扩展形式。虽然他没提供，但是我们一样可以用我们自己的形式去完成多样化。

到这里大家一定会问，不是还有一种列表类型吗？不错，就是定义列表，园子准备在下篇文章中给大家介绍下定义列表的使用方法。

扩展阅读

• 详解rel=”nofollow”的用法与意义 (9)
  近年来在网站的链接中我们经常会看到类似rel="nofollow"或rel="externa...
• 网页中表单的使用技巧 (0)
  本文园子总结了在网页常用布局中表单的一些使用技巧，可以帮助你更灵活的控制表单，使页面更加人性...
• 语义化表单里的标签 (0)
  表单是用户提交信息的重要渠道，是(X)HTML的一个重要部分。表单主要用于采集和提交用户输入...
• 丰富表格里的标签 (1)
  表格，一个在网页设计中比较经典的工具。曾经，表格是网页设计人最重要的布局排版手段，但是它的存...
• 定义列表dl,dt,dd的用法 (2)
  上篇文章给大家分享了无序列表和有序列表的用法，其实一般我们在做列表的时候通常只会用到ul和l...
• h1~h6的使用原则 (2)
  在遵循网页标准制作网页的时候，为了使得设计更具有语义化，我们经常会在页面中用到h1~h6的标...
• 以图换字方法和思路 (2)
  不知道您在做网站时有没有遇到过这样的问题：想保留链接的背景，但又要链接里的文字消失！可是弄了...
• 一些少用的XHTML标签 (0)
  在我们的实际应用中，还有一些xhtml标签是不太常用的，今天园子把使用频率较少但又有些代表性...
• q与cite标签的应用 (1)
  前面的文章里园子给大家介绍过：strong和em标签的应用，大家知道这两个标签有一些相似之处...
• abbr和acronym标签的使用 (2)
  很多人都喜欢使用缩略词来表述特定的事物或是事件，这样做的好处是方便快递地传达信息，而不用每次...

您可能也喜欢：
WordPress关键字链接插件-BM KeywordLink	WordPress 推出 WordAds 广告系统	oppo 辞职信广告曲 Dreams 下载	CoCo Link Sort – WordPress 链接排序插件	TaskbarShuffle – 随心所欲定制任务栏和系统托盘图标顺序
无觅

我们都知道xhtml给我们提供了h1~h6，六个标题标签，那么我们如何分配这六个标题标签的使用呢？下面园子给出一些建议：

• h1，在浏览器中显示最大，那么自然用来表示最大的标题，对于一个网站来说哪个标题才是最大的？是LOGO，我们通常会在网站的最前面先标注这个网站的名称。所以h1就用来放LOGO，当然如果你的网站没有LOGO，只有一个网站名称，那也可以，并且需要注意的是网页中h1只能出现一次。园子并不推荐您直接在h1里面放个图片，我们完全可以通过以图换字来实现，具体方法请看我的上篇文章：以图换字方法和思路 。
• 当h1找到了专用的功能后，园子在平时的设计中h2~h4一般用在网页中出现的版块标题上。例如一个网页中有个栏目是产品展示，那么这个写法就是<h2>产品展示</h2>，如果产品展示里面还分有几个类型，那么我们可以这样定义：<h3>食品类</h3>，<h3>医药类</h3>等等依次类推。需要注意的是书写顺序要从高到低依次书写。另外就是h2~h4不局限于出现的次数，你可以无限制使用。
• h5与h6在浏览器默认显示字体是小于正常文本字体的。那么园子推荐h5与h6只作为免责声明或是版权通告来使用。这样即表明重要性，又不会太过明显影响阅读。

对于标题标签的使用尽可能的注意一下他们之间的等级关系。当然标题的使用还是需要根据实际使用来决定。这里只是给出个建议。标题标签是块线元素，但是他并不能再包含块级元素了，只能包含内联的元素，比如链接、图像，换行之类的。记得有个朋友前两天在文章中提到过关于标题的内容，但是写法就有错了，他把链接写在了H1标签的外面，把H1包起来了，这样的写法是不推荐的。也不符合标准思维容易给以后的学习产生不好导向。

扩展阅读

• 详解rel=”nofollow”的用法与意义 (9)
  近年来在网站的链接中我们经常会看到类似rel="nofollow"或rel="externa...
• 网页中表单的使用技巧 (0)
  本文园子总结了在网页常用布局中表单的一些使用技巧，可以帮助你更灵活的控制表单，使页面更加人性...
• 语义化表单里的标签 (0)
  表单是用户提交信息的重要渠道，是(X)HTML的一个重要部分。表单主要用于采集和提交用户输入...
• 丰富表格里的标签 (1)
  表格，一个在网页设计中比较经典的工具。曾经，表格是网页设计人最重要的布局排版手段，但是它的存...
• 定义列表dl,dt,dd的用法 (2)
  上篇文章给大家分享了无序列表和有序列表的用法，其实一般我们在做列表的时候通常只会用到ul和l...
• 无序列表和有序列表的用法 (0)
  首先先来看个截图： 这种以列表形式来显示的内容在网页中称为列表，相信大家都经常...
• 以图换字方法和思路 (2)
  不知道您在做网站时有没有遇到过这样的问题：想保留链接的背景，但又要链接里的文字消失！可是弄了...
• 一些少用的XHTML标签 (0)
  在我们的实际应用中，还有一些XHTML标签是不太常用的，今天园子把使用频率较少但又有些代表性...
• q与cite标签的应用 (1)
  前面的文章里园子给大家介绍过：strong和em标签的应用，大家知道这两个标签有一些相似之处...
• abbr和acronym标签的使用 (2)
  很多人都喜欢使用缩略词来表述特定的事物或是事件，这样做的好处是方便快递地传达信息，而不用每次...

您可能也喜欢：
id与class的使用原则	IE6 真的该死了吗	网站布局设计原则	WordPress 3.0.1 官方简体中文正式版发布	IE6中 PNG 背景透明的最佳解决方案
无觅

• kdb标签
  表示由用户从键盘输入的文字，例如：

  <p>在浏览器的地址栏打上<kbd>www.yzznl.cn</kbd>。</p>

  但是，也有人把他理解成用户从键盘输入的按键，例如：

  <p>按<kbd>Tab</kbd>测试一下</p>

  并能过用css把<kdb />定义得有点像键盘按键，如下图：

  

  对于这个这元素，W3C的文档并没有怎样说明，也没有例子参考，谁对谁错也很难说清。园子个人更倾向把它用于定义键盘按键，或者可以这样理解，如果<kbd>里面的是键盘上有的（比如Tab、Esc、Backspace等）就是直接按键盘上的键，如果不是键盘上的键名的（比如网址、文字等），就由单个字母输入完成。但是这样可能会有些冲突，例如Home，是让输入Home还是按Home键呢？也许这时应该再加上title提示会更好。

• code & var标签
  在(X)HTML中，有专门对代码进行标识的标签，那就是<code></code>，例如：你可以用<code>code</code>标签来表示计算机（程序）代码。而var是定义一个变量名，例如计算机程序的变量、数学函数的变量等。例如：

  <code><var>wordcount</var> = 6878;</code>

• pre标签
  上面说了code标签的用法，或许你会发现紧紧<code>是不够用的，因为代码都是一行一行的，如果你只用<code>的话，所有用它来标识的代码，就会堆到一行去，这又是为什么呢？因为，<code>是inline-level（行内元素）的，行内元素是不换行的。这就有必要说下pre标签。
  pre标签标签在Dreamweaver中被称为“格式化”，在以前使用Dreamweaver 的时候我一直不清楚这个东西是作什么用的。一直到现在才清楚pre通常用以显示源代码，并且不支持能使段落分开的标签比如<p>，显示内容如需换行只要在源文件中换行即可无需要代码实现。同时pre会保留注其中的所有空格并显示出来。一般来讲pre目前是多用于显示源代码，这与code的用途是相似的，所不同的是pre是块级的，而code是内联的。简单说，pre可以包括多行内容，而code只包含短小的一句或几个字符。
• samp标签
  samp标签用于定义一个“输出”的内容，例如：

  <p>你只要点删除，网页就会提示<samp>该会话已移至“已删除邮件”</samp>。</p>

• sup与sub标签
  你还记得上标和下标吗？在所有的标签中有两上标签是样式标签，但是却没有被禁用，因为这两个标签所表述的内容很特别，上下标，^上标,_下标。这两个标签用得到机率比较小，但是上标应该还是会常用到的，比如温度中的摄氏度的上的小圆圈，当然现有有专业的字符对应“℃”，还有我们常看到书中的脚注上标等等。
• hr与br标签
  hr，分平分隔线；
  br，常用的换行符。
  这两个标签只要注意标签的写法就可以了，很多粗心的人都不小心的把写错了，<hr />和<br />，要提醒你的是这两个都是单标签，记得后面要闭合。

扩展阅读

• 详解rel=”nofollow”的用法与意义 (9)
  近年来在网站的链接中我们经常会看到类似rel="nofollow"或rel="externa...
• 网页中表单的使用技巧 (0)
  本文园子总结了在网页常用布局中表单的一些使用技巧，可以帮助你更灵活的控制表单，使页面更加人性...
• 语义化表单里的标签 (0)
  表单是用户提交信息的重要渠道，是(X)HTML的一个重要部分。表单主要用于采集和提交用户输入...
• 丰富表格里的标签 (1)
  表格，一个在网页设计中比较经典的工具。曾经，表格是网页设计人最重要的布局排版手段，但是它的存...
• 定义列表dl,dt,dd的用法 (2)
  上篇文章给大家分享了无序列表和有序列表的用法，其实一般我们在做列表的时候通常只会用到ul和l...
• 无序列表和有序列表的用法 (0)
  首先先来看个截图： 这种以列表形式来显示的内容在网页中称为列表，相信大家都经常...
• h1~h6的使用原则 (2)
  在遵循网页标准制作网页的时候，为了使得设计更具有语义化，我们经常会在页面中用到h1~h6的标...
• 以图换字方法和思路 (2)
  不知道您在做网站时有没有遇到过这样的问题：想保留链接的背景，但又要链接里的文字消失！可是弄了...
• q与cite标签的应用 (1)
  前面的文章里园子给大家介绍过：strong和em标签的应用，大家知道这两个标签有一些相似之处...
• abbr和acronym标签的使用 (2)
  很多人都喜欢使用缩略词来表述特定的事物或是事件，这样做的好处是方便快递地传达信息，而不用每次...

您可能也喜欢：
XHTML代码规范	XHTML详解	wbr和nobr标签的应用	园子博客谷歌反向链接达到81个	Google Merchant Center 中文版正式上线
无觅

<q></q>，q的作用是引用非块元素，也就是引用不能形成段落的内容，可能是某人说的一句话，也可能是一句文档摘录等，特点很明显这里是“一句”。并且q本身并不会产生段落。q本身并没有什么样式，一般浏览器也不会给他设置一个默认样式使起突出。但是我们可以通过css去使之与一般内容区分开。在q标签中还有一个属性是非常重要的，那就是cite。在这个cite属性值中主要是注明引用内容的出自何处，或是给出在线的地址。例如：

<q cite=”http://www.yzznl.cn/archives/55.html”>strong与em相信大家一定不会陌生，园子为什么一次要介绍两个标签呢？</q>

请注意不要把q写成p，这两个标签很容易弄错。

关于cite标签，园子认为此标签的应用在于标注出文献的标题与名称。这个标签有点类似于我们书籍后面的参考文献的目录内容，也有点像是脚注。那么他与q之间的区别是什么呢？其实很容易理解，q是显示内容，而cite则是显示说这段内容的人名或是书名。cite与q常常混合起来使用。例如：

<cite>鲁迅</cite>先生说：<q>地上本来没有路，走得人多了，便有了路</q>

那么blockquote与q、cite又有什么区别呢？

相信大家在论坛网友的帖子上面经常能看到“引用”这个功能，这就是blockquote，blockquote是块引用，XHTML允许其包含任何标签。而上面的q与cite则没有这么大的包容度。blockquote的使用是当需要引用一段或是多段内容时所采用的，浏览器一般默认处理会把引用内容缩进一些以与正常的段落文章区分开。当然我们可以通过CSS样式来改变区分的形式。

在blockquote中也有一个cite属性，与q一样是用来注明引用来源的。可以把联机文档的URL注明在其中。

扩展阅读

• 详解rel=”nofollow”的用法与意义 (9)
  近年来在网站的链接中我们经常会看到类似rel="nofollow"或rel="externa...
• 网页中表单的使用技巧 (0)
  本文园子总结了在网页常用布局中表单的一些使用技巧，可以帮助你更灵活的控制表单，使页面更加人性...
• 语义化表单里的标签 (0)
  表单是用户提交信息的重要渠道，是(X)HTML的一个重要部分。表单主要用于采集和提交用户输入...
• 丰富表格里的标签 (1)
  表格，一个在网页设计中比较经典的工具。曾经，表格是网页设计人最重要的布局排版手段，但是它的存...
• 定义列表dl,dt,dd的用法 (2)
  上篇文章给大家分享了无序列表和有序列表的用法，其实一般我们在做列表的时候通常只会用到ul和l...
• 无序列表和有序列表的用法 (0)
  首先先来看个截图： 这种以列表形式来显示的内容在网页中称为列表，相信大家都经常...
• h1~h6的使用原则 (2)
  在遵循网页标准制作网页的时候，为了使得设计更具有语义化，我们经常会在页面中用到h1~h6的标...
• 以图换字方法和思路 (2)
  不知道您在做网站时有没有遇到过这样的问题：想保留链接的背景，但又要链接里的文字消失！可是弄了...
• 一些少用的XHTML标签 (0)
  在我们的实际应用中，还有一些XHTML标签是不太常用的，今天园子把使用频率较少但又有些代表性...
• abbr和acronym标签的使用 (2)
  很多人都喜欢使用缩略词来表述特定的事物或是事件，这样做的好处是方便快递地传达信息，而不用每次...

您可能也喜欢：
TipsExtend.exe – 应用程序错误的解决方法	br标签的应用	wbr和nobr标签的应用	腾讯推出免费短信应用微信	p标签的应用
无觅

这两个标签的大致用途是一样的，但是也还是有细节上的不同。总结如下：

• <abbr></abbr>的作用是表明标签中的内容为缩写形式。例如：

  <abbr title=”World Wide Web”>WWW</abbr >

• <acronym></acronym>的作用是表明标签中的内容是首字母缩写词。例如：

  <acronym title=”Radio detecting and ranging”> Radar</acronym>

一般来讲acronym要比abbr在英文中常用，但是在中文正好相反。因为中文中没有首字母缩写。也许有首字缩写但这也比较少有。例如：中华人民共和国，简称是中国；全国人民代表大会，简称是人代会；这些都不是首字缩写，这里园子倒是觉得文中出现中国成语的时候应该使用abbr。当然光只有这个标签还不行，因为只知道他是个缩略词还不行，至少还要给出详细的名称啊。所以这两个标签在使用的时候还要再加上一个title属性。正确的写法应该是这样的。

<acronym title=”European Computer Manufacturers Association”>ECMA</acronym>

<abbr title=”这个是介绍XHTML知识的专题”>XHTML专题</abbr>

在浏览器上并不会直接显示title里的内容，只有当鼠标移动到那个位置后才会出现悬浮提示。当然一般缩写标签只在缩略词第一次出现的时候使用，以后文章中再出现就可以不用了。在使用<abbr>还有一个问题，就是IE6及以下版本的IE浏览器并不认识这个标签，不过也有变相解决的方式，例如用插入span的方式来代替。

说到这里还有一种情况，有的时候，一个词别人不一定知道是什么，但又不是缩略语，这就用到了<dfn>标签，例如：

<p><dfn title=”Mozilla公司推出的一款网页浏览器”>Firefox</dfn>作为开发工具很不错。</p>

它有点像我们写文章时的：“Firefox（Mozilla基金会推出的一款网页浏览器）作为开发工具很不错”，dfn英文原意是definition，也就是术语定义的意思。

扩展阅读

• 详解rel=”nofollow”的用法与意义 (9)
  近年来在网站的链接中我们经常会看到类似rel="nofollow"或rel="externa...
• 网页中表单的使用技巧 (0)
  本文园子总结了在网页常用布局中表单的一些使用技巧，可以帮助你更灵活的控制表单，使页面更加人性...
• 语义化表单里的标签 (0)
  表单是用户提交信息的重要渠道，是(X)HTML的一个重要部分。表单主要用于采集和提交用户输入...
• 丰富表格里的标签 (1)
  表格，一个在网页设计中比较经典的工具。曾经，表格是网页设计人最重要的布局排版手段，但是它的存...
• 定义列表dl,dt,dd的用法 (2)
  上篇文章给大家分享了无序列表和有序列表的用法，其实一般我们在做列表的时候通常只会用到ul和l...
• 无序列表和有序列表的用法 (0)
  首先先来看个截图： 这种以列表形式来显示的内容在网页中称为列表，相信大家都经常...
• h1~h6的使用原则 (2)
  在遵循网页标准制作网页的时候，为了使得设计更具有语义化，我们经常会在页面中用到h1~h6的标...
• 以图换字方法和思路 (2)
  不知道您在做网站时有没有遇到过这样的问题：想保留链接的背景，但又要链接里的文字消失！可是弄了...
• 一些少用的XHTML标签 (0)
  在我们的实际应用中，还有一些XHTML标签是不太常用的，今天园子把使用频率较少但又有些代表性...
• q与cite标签的应用 (1)
  前面的文章里园子给大家介绍过：strong和em标签的应用，大家知道这两个标签有一些相似之处...

您可能也喜欢：
WP Ajax Edit Comments – 让用户可以重新编辑已经发表的评论	WordPress 优化插件:Super Switch	为 WordPress 添加面包屑导航	详解 WordPress 目录下的 core 文件	雷电3（Raiden3）作弊器下载
无觅

<p>这里有个<del>借</del><ins> 错</ins>别字。</p>

我们已经看到了<del>标签的应用，那么上面例子中的<ins>标签是做什么用的呢？没错，你可以已经想到了，有时候我们除了删除还需要对删除的部分作出一些添加与修改。那么时候这个标签就非常有作用了那就是插入标签<ins></ins>。相信不用我说大家也知道如何使用这两个标签，但是千万别忘记了给这两个标签加上两个重要的属性：cite与datetime。解释与时间。解释不用说了，只要用文字注明为什么要删除或是为什么要插入就可以了。但是这个时间需要明确一下格式。严格的格式是：YYYY-MM-DDThh:mm:ssTZD。呵呵与我们平时用的差不多但是有区别，其中T是表示时间段开始的必需字符，而TZD则是表示时区，Z是表是格林威治标准时间。园子推荐的写法是：2008-03-25T14:26:22Z 。来看下完整的写法：

1

<p>园子博<del>可</del><ins cite=”修改了错别字” datetime=”2009-02-19T11:26:22Z “>客</ins>——一直在努力www.yzznl.cn</p>

说明：在<ins>里，cite属性表示插入的原因，可以链入网址或者修改原因，而datatime属性表示插入的时间，而在<del>里加入这些属性就是表示删除的原因和时间。一般情况下，浏览器会把<ins>标签内的内容添加下划线，给<del>标签内的内容加删除线，属性cite和datetime是不会显示的。可能这样看起来并没有什么用，其实有很多作用的，可以让开发人员在开发文档时相互合作，而且也保持了一些编辑痕迹（比如可以反应别人是什么时候修改、为什么修改的等），同时也可以完成版本控制。

扩展阅读

• 详解rel=”nofollow”的用法与意义 (9)
  近年来在网站的链接中我们经常会看到类似rel="nofollow"或rel="externa...
• 网页中表单的使用技巧 (0)
  本文园子总结了在网页常用布局中表单的一些使用技巧，可以帮助你更灵活的控制表单，使页面更加人性...
• 语义化表单里的标签 (0)
  表单是用户提交信息的重要渠道，是(X)HTML的一个重要部分。表单主要用于采集和提交用户输入...
• 丰富表格里的标签 (1)
  表格，一个在网页设计中比较经典的工具。曾经，表格是网页设计人最重要的布局排版手段，但是它的存...
• 定义列表dl,dt,dd的用法 (2)
  上篇文章给大家分享了无序列表和有序列表的用法，其实一般我们在做列表的时候通常只会用到ul和l...
• 无序列表和有序列表的用法 (0)
  首先先来看个截图： 这种以列表形式来显示的内容在网页中称为列表，相信大家都经常...
• h1~h6的使用原则 (2)
  在遵循网页标准制作网页的时候，为了使得设计更具有语义化，我们经常会在页面中用到h1~h6的标...
• 以图换字方法和思路 (2)
  不知道您在做网站时有没有遇到过这样的问题：想保留链接的背景，但又要链接里的文字消失！可是弄了...
• 一些少用的XHTML标签 (0)
  在我们的实际应用中，还有一些xhtml标签是不太常用的，今天园子把使用频率较少但又有些代表性...
• q与cite标签的应用 (1)
  前面的文章里园子给大家介绍过：strong和em标签的应用，大家知道这两个标签有一些相似之处...

您可能也喜欢：
如何去掉热点链接点击时的黑框或虚边	如何在 WordPress 中使用 jQuery	腾讯正式推出 WebQQ	诺基亚E63快捷键汇总	语义化表单里的标签
无觅