在日常中,我们经常会写各种列表,但是很少意识到他是一个单独的类型。在网页里,毕竟它不是一个段落,我们要用我们的标记来把它说清楚。
早晨起来,妈妈叫我帮她去买菜,那我得把要买的东西记下来,这叫做购物清单:
- 土豆
- 胡萝卜
- 牛肉
看起来晚饭是要吃咖喱了(假装自己是蜡笔小新,这很美味~不过我们也别光顾着吃,来说一下怎么写列表吧。
第一步,先要标记从哪里到哪里,是一个列表。
<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
,就从无序列表变成了有序列表,效果如下:
- 把锅放在灶上
- 锅里放上油
- 把油烧热
- 放入葱花
- ……
所以今天我们只是用到了三个只有两个字母长的单词,请问哪位同学记不住?
暂无评论内容