For faster navigation, this Iframe is preloading the Wikiwand page for 帮助:列表.

帮助:列表

如同Wikipedia:如何编辑页面#版式所述,列表写法的标记具有许多种写法存在。但是其中有乍看之下为正常表示,但有些实际上在看不到的地方里呈现并不理想的状态,成为各式问题的原因。

您使用维基百科的标记所编辑的文章,在被阅览时会透过名为MediaWiki的软件,转换成网页浏览器能够辨识的形式XHTML。此依标记的方式可能无法产生理想的XHTML格式。本条目页面在此举出被推荐的范例和非推荐的范例,来加以解说列表写法的标记方式。

推荐范例[编辑]

定义的列表写法

如果打算要做的是,具有简短词汇(用语或人名之类)与相对说明组合而成的列表的话,全部依照定义的列表写法编辑最为合理。尤其是“登场人物与其解说”等情况,是用定义的列表写法来记述的理想典范。

表示结果 输入内容 XHTML 形象
用语1
用语1的说明
用语2
用语2的说明
; 用语1 : 用语1的说明
; 用语2 : 用语2的说明
<dl>
  <dt>用语1</dt>
  <dd>用语1的说明</dd>
  <dt>用语2</dt>
  <dd>用语2的说明</dd>
</dl>
dl
dt 用语1
dd 用语1的说明
dt 用语2
dd 用语2的说明

用定义的列表写法所编辑的一个区块(<dl>~</dl>)之中,用语(<dt>~</dt>)和其定义(<dd>~</dd>)将成对出现。这个是被推荐的写法。

列表写法

若是单纯并不需要说明的列表,使用普通的列表写法是比较理想的。而如果其顺序是有意义的,使用带有数字的列表写法会更合适。

表示结果 输入内容 XHTML 形象
  • foo
    • bar
  • hoge
    • fuga
    • piyo
* foo
** bar
* hoge
** fuga
** piyo
<ul>
  <li>foo
    <ul>
      <li>bar</li>
    </ul>
  </li>
  <li>hoge
    <ul>
      <li>fuga</li>
      <li>piyo</li>
    </ul>
  </li>
</ul>
ul
li foo
ul
li bar
li hoge
ul
li fuga
li piyo
  1. foo
    1. bar
  2. hoge
    1. fuga
    2. piyo
# foo
## bar
# hoge
## fuga
## piyo
<ol>
  <li>foo
    <ol>
      <li>bar</li>
    </ol>
  </li>
  <li>hoge
    <ol>
      <li>fuga</li>
      <li>piyo</li>
    </ol>
  </li>
</ol>
ol
li foo
ol
li bar
li hoge
ol
li fuga
li piyo

常见不良范例[编辑]

例1

表示结果 输入内容 XHTML 形象
  • 用语1
用语1的说明
  • 用语2
用语2的说明
* 用语1
: 用语1的说明
* 用语2
: 用语2的说明
<ul>
  <li>用语1</li>
</ul>
<dl>
  <dd>用语1的说明</dd>
</dl>
<ul>
  <li>用语2</li>
</ul>
<dl>
  <dd>用语2的说明</dd>
</dl>
ul
li 用语1
dl
dd 用语1的说明
ul
li 用语2
dl
dd 用语2的说明

像这个样子用列表写法所制作出的区块(<ul>~</ul>)和定义的列表写法所制作出的区块(<dl>~</dl>)交互出现,造成区块被切断了。

例2

比上面好一点的例子。

表示结果 输入内容 XHTML 形象
  • 用语1
    用语1的说明
  • 用语2
    用语2的说明
* 用语1
*: 用语1的说明
* 用语2
*: 用语2的说明
<ul>
  <li>用语1
    <dl>
      <dd>用语1的说明</dd>
    </dl>
  </li>
  <li>用语2
    <dl>
      <dd>用语2的说明</dd>
    </dl>
  </li>
</ul>
ul
li 用语1
dl
dd 用语1的说明
li 用语2
dl
dd 用语2的说明

虽然列表写法的区块(<ul>~</ul>)只有一个,但是列表写法的各个构成(<li>~</li>)之中每次都产生一个定义的列表写法的区块(<dl>~</dl>)。另外一般在<dl>~</dl>之中,用语(<dt>~</dt>)和其定义(<dd>~</dd>)成对出现是最理想的,只出现<dd>~</dd><dl>~</dl>用法是不太好的。

例3

使用了定义的列表写法结果却失去了使用的意义。

表示结果 输入内容 XHTML 形象
用语1
用语1的说明
用语2
用语2的说明
; 用语1 : 用语1的说明

; 用语2 : 用语2的说明

(用语1的行和用语2的行之间夹了一个空白行)

<dl>
  <dt>用语1</dt>
  <dd>用语1的说明</dd>
</dl>
<dl>
  <dt>用语2</dt>
  <dd>用语2的说明</dd>
</dl>
dl
dt 用语1
dd 用语1的说明
dl
dt 用语2
dd 用语2的说明

中间夹了空白行(只有换行没写任何东西)结果造成定义的列表写法所产生的区块被分隔为两个。这样子看似是为了方便编辑,遗憾的是得到了反效果。

表示结果 输入内容 XHTML 形象
  • 用语1
  • 用语2
    • 用语3
* 用语1

* 用语2

** 用语3

(各行之间夹空白行)

<ul>
  <li>用语1</li>
</ul>
<ul>
  <li>用语2</li>
</ul>
<ul>
  <li>
    <ul>
      <li>用语3</li>
    </ul>
  </li>
</ul>
ul
li 用语1
ul
li 用语2
ul
li
ul
li 用语3
  1. 用语1
  1. 用语2
    1. 用语3
# 用语1

# 用语2

## 用语3

(各行之间夹了一个空白行)

<ol>
  <li>用语1</li>
</ol>
<ol>
  <li>用语2</li>
</ol>
<ol>
  <li>
    <ol>
      <li>用语3</li>
    </ol>
  </li>
</ol>
ol
li 用语1
ol
li 用语2
ol
li
ol
li 用语3

普通的列表写法与带有数字的列表写法虽然可以说是相同的情形,但是问题更加严重。尤其是带有数字的时候会造成数字不连续的悲惨状况,和普通的列表写法一样会破坏版面的显示。

为什么不可以?[编辑]

“说什么XHTML,太过复杂让人搞不懂,看起来漂亮不就好了?”的确这种想法是存在的。不过要注意那是偏重于明眼人(没有视觉障碍的人)的思考方式。

具有视觉障碍的人使用声音读出浏览器来阅览维基百科。这时若遇到上述的例2会怎么读出呢?

<以下是列表>
用语1、
<以下是定义列表>
<以下是刚刚的定义词汇的说明>用语1的说明<说明结束>
<定义列表结束>
用语2、
<以下是定义列表>
<以下是刚刚的定义词汇的说明>用语2的说明<说明结束>
<定义列表结束>
<列表结束>

如何?明明没有读出定义词汇却突然跑出个“刚刚的定义词汇”,意思说不通。那么在正确范例中又是如何呢?

<以下是定义列表>
<以下是定义词汇>用语1、<定义词汇结束>
<以下是刚刚的定义词汇的说明>用语1的说明<说明结束>
<以下是定义词汇>用语2、<定义词汇结束>
<以下是刚刚的定义词汇的说明>用语2的说明<说明结束>
<定义列表结束>

这样就可以了。

另外还有传输资料量的问题。请将例1例2所产生的XHTML,和正确范例的情况做比较。变得更加简洁了。只有一两个虽然没有太大差别在,当重复10次20次时就会出现明显的差异。

各种变化[编辑]

在用语后换行

定义的列表写法也可以用下面的方式来写。

表示结果 输入内容 XHTML 形象
用语1
用语1的说明
用语2
用语2的说明
; 用语1
: 用语1的说明
; 用语2
: 用语2的说明
<dl>
  <dt>用语1</dt>
  <dd>用语1的说明</dd>
  <dt>用语2</dt>
  <dd>用语2的说明</dd>
</dl>
dl
dt 用语1
dd 用语1的说明
dt 用语2
dd 用语2的说明

像这样在用语后面换列结果和被推荐的范例是完全一样的。说明部分变长的时候用这种方式编辑应该会比较容易观看原始档。

比较长的说明

说明部分变长而想要分隔段落的时候,用以下的方法。

输入内容

; 用语1
: 用语1的繁长说明用语1的繁长说明用语1的繁长说明用语1的繁长说明
: 用语1的繁长说明的下个段落用语1的繁长说明的下个段落用语1的繁长说明的下个段落
; 用语2
: 用语2的繁长说明用语2的繁长说明用语2的繁长说明
: 用语2的繁长说明的下个段落用语2的繁长说明的下个段落
表示结果 XHTML 形象
用语1
用语1的繁长说明用语1的繁长说明用语1的繁长说明用语1的繁长说明
用语1的繁长说明的下个段落用语1的繁长说明的下个段落用语1的繁长说明的下个段落
用语2
用语2的繁长说明用语2的繁长说明用语2的繁长说明
用语2的繁长说明的下个段落用语2的繁长说明的下个段落
<dl>
  <dt>用语1</dt>
  <dd>用语1的详细说明...</dd>
  <dd>用语1的详细说明的下个段落...</dd>
  <dt>用语2</dt>
  <dd>用语2的详细说明...</dd>
  <dd>用语2详细说明的下个段落...</dd>
</dl>
dl
dt 用语1
dd 用语1的详细说明...
dd 用语1的详细说明的下个段落...
dt 用语2
dd 用语2的详细说明...
dd 用语2详细说明的下个段落...

用语(<dt>~</dt>)和其定义(<dd>~</dd>)没有1对1的成对,虽然不能说是最理想的状态,不过只用维基百科的标记方式无法在<dd>~</dd>之中产生段落,为了方便起见而采用这个方式。

若是说明部分太长的话,也请检讨使用标题分出一个章节来写。

嵌套

代码:

# 内容1
#* 内容11
#* 内容12
# 内容2
## 内容21
## 内容22

效果:

  1. 内容1
    • 内容11
    • 内容12
  2. 内容2
    1. 内容21
    2. 内容22

其他

说明部分如果相当地短,惯例上常用以下的形式。

表示结果 输入内容
  • 用语1 - 用语1的说明
  • 用语2 - 用语2的说明
* 用语1 - 用语1的说明
* 用语2 - 用语2的说明

别拘泥于门面[编辑]

有时候会有,对标记方法理解不足、或是因为“这样子比较好看”的理由,而使用不被推荐的标记方法。比方说在定义的列表写法,有人会讨厌把用语强制改成粗体字,也有人会讨厌在列举事项时前面多了个点。

但是请别忘了,每个人对好看的感觉不同,以及在您的使用环境下所看到的样子不见得和其他人一样。虽然多数人使用着标准的MonoBook面版,也可能有人使用cairn blue,或是使用独创的用户CSS。当改变使用环境,即使再怎么调整版面的样貌也是没有意义的。

结果是使用被推荐的写法来标记,会是符合最多人的阅览方式(包含声音浏览器)的最佳捷径。

别拘泥于标记法[编辑]

若是搞不懂、记不住在此所解说的内容的话,请先忽略它。与其烦恼怎么标记,不如把心力花在记述优良的条目上。即使标记错误,以后也会有某个人帮忙修正(这是Wiki系统的一大优点)。看了其他人修改的方法,迟早也能学会更好的写法吧。

发现有不被推荐的标记法时[编辑]

当发现用被推荐的写法改过的文章,被回复成不被推荐的写法时,请教导出这个页面的存在,说明修改的理由。因为做出回复的大多是新手,请不要强硬逼迫,亲切地做出说明。也请参考Wikipedia:不要伤害新手

参见[编辑]

维基百科特定帮助[编辑]

  • Wikipedia:列表
  • ((·)) and ((•)) - Dots and bullets for horizontal link lists, such as in navboxes, which look like lists, but do not use HTML list mark-up.
    • ((flatlist)) - for a more semantically-correct and accessible way of marking up such lists.
  • Wikipedia:Line break handling - 间隔处理Covers among other things how to properly handle the line wrapping in horizontal link lists.
{{bottomLinkPreText}} {{bottomLinkText}}
帮助:列表
Listen to this article

This browser is not supported by Wikiwand :(
Wikiwand requires a browser with modern capabilities in order to provide you with the best reading experience.
Please download and use one of the following browsers:

This article was just edited, click to reload
This article has been deleted on Wikipedia (Why?)

Back to homepage

Please click Add in the dialog above
Please click Allow in the top-left corner,
then click Install Now in the dialog
Please click Open in the download dialog,
then click Install
Please click the "Downloads" icon in the Safari toolbar, open the first download in the list,
then click Install
{{::$root.activation.text}}

Install Wikiwand

Install on Chrome Install on Firefox
Don't forget to rate us

Tell your friends about Wikiwand!

Gmail Facebook Twitter Link

Enjoying Wikiwand?

Tell your friends and spread the love:
Share on Gmail Share on Facebook Share on Twitter Share on Buffer

Our magic isn't perfect

You can help our automatic cover photo selection by reporting an unsuitable photo.

This photo is visually disturbing This photo is not a good choice

Thank you for helping!


Your input will affect cover photo selection, along with input from other users.

X

Get ready for Wikiwand 2.0 🎉! the new version arrives on September 1st! Don't want to wait?