在日常中,我们经常会写各种列表,但是很少意识到他是一个单独的类型。在网页里,毕竟它不是一个段落,我们要用我们的标记来把它说清楚。

早晨起来,妈妈叫我帮她去买菜,那我得把要买的东西记下来,这叫做购物清单:

  • 土豆
  • 胡萝卜
  • 牛肉

看起来晚饭是要吃咖喱了(假装自己是蜡笔小新,这很美味~不过我们也别光顾着吃,来说一下怎么写列表吧。

第一步,先要标记从哪里到哪里,是一个列表。

<ul>
<!-- 我宣布这里面就是列表的内容了 -->
</ul>

这样做标记我们已经非常熟悉了,现在我们来写里面的项目:

<ul>
  <li>土豆</li>
  <li>胡萝卜</li>
  <li>牛肉</li>
</ul>

这样我们就写出了文章最开始的那种列表。不用解释,你也可以知道,用 <li></li> 标签标记起来的内容就是列表的一个项目,我们叫做列表项。可能有的同学会说,不就一行一个吗,无论是用换行还是用段落都可以做到的事情,为什么又要新弄出来一个标签呢?

因为我们现在演示,是用的最简单的情况,其实列表项里面可以放比较复杂的内容,比如多个段落,虽然这么写不太好看吧。那么我来说一种非常常用的情况,就是列表的嵌套。关于嵌套的问题,我们在 第十章 一些细节(二) 中提到过一些,总之就是像俄罗斯套娃一样,一层一层套下去,事实上,到现在我们也写了很多次。列表的嵌套呢,也是一样的,列表中的某一个项目还细分为许多小项,那我们就在这个项目里再放上一个列表好了,来看一下下面的例子:

<ul>
  <li>土豆</li>
  <li>胡萝卜</li>
  <li>牛肉</li>
  <li>
    调味料
    <ul>
      <li>咖喱粉</li>
      <li>盐</li>
    </ul>
  </li>
</ul>

我们对调味料部分进行了细分,其实就是在里面又放入了一个列表。显示效果如下:

  • 土豆
  • 胡萝卜
  • 牛肉
  • 调味料
    • 咖喱粉

让人感到十分舒适,容易理解。而代码中,你只要理解一层套一层的层级关系,就没有问题。注意写好代码的缩进,这让你更方便对应代码间的层级关系;在必要的时候,我们还可以加上一定的注释,方便自己对代码的阅读。

大家思考一下,我们上面的列表,对于顺序有要求吗?购物的时候,并不一定按照这个列表的顺序进行购买,而是进入超市之后,先看到哪一个就买哪一个。所以这个列表的顺序并不重要,我们叫它无序列表。还有一种情况,我们的列表的顺序要求非常高,比如现在食材已经买回来了,我们要开始做饭了(并不会做……),做饭的操作就讲先后顺序了,随意乱放就成了黑暗料理,所以菜谱里边的列表,都是标着 123 的,这样的列表又怎么写呢?特别简单,只要把上面的列表改一个字母(其实是两处)就可以:

<ol>
  <li>把锅放在灶上</li>
  <li>锅里放上油</li>
  <li>把油烧热</li>
  <li>放入葱花</li>
  <li>……</li>
<ol/>

所以只要把 ul 换成 ol,就从无序列表变成了有序列表,效果如下:

  1. 把锅放在灶上
  2. 锅里放上油
  3. 把油烧热
  4. 放入葱花
  5. ……

所以今天我们只是用到了三个只有两个字母长的单词,请问哪位同学记不住?

【本章助记卡片:卡片 for 第十五章