课05.如何制作列表

项目下载地址:前往GitHub

课05.如何制作列表——大纲

哪里用到列表

生活中的列表

在我们的日常生活中,如果你细心观察,就会发现很多地方都会用到列表。比如你去超市购物,你会看到促销商品的商品列表;去餐厅吃饭,服务员会给你一张菜单价目表;上健身房健身,你看到的健身项目表。

网站中的列表

除了日常生活中,在平时的网页浏览过程中,你也会在很多地方看到列表。比如你上学的时候登录的学校的官网,或者购物的淘宝网,很多网站的专栏目录列表,包括导航菜单栏,很多多事用的列表的方式来展示的。

HTML中的列表

在HTML定义了两种常用的列表:

  • 有序列表

    对于哪些我们关心先后顺序的内容,我们可以使用有序列表

  • 无序列表

    如果列表中的元素没有先后顺序关系,那就用无序列表

有序列表

<ol>
  ...
</ol>
1
2
3

<ol>是有序列表的标签标示。这里的olordered list的首字母缩写标示。从英文翻译成中文也非常好理解,有序的列表,所以就是有序列表。

无序列表

<ul>
  ...
</ul>
1
2
3

<ul>是无序列表的标签标示。ulunorderd list也是取首字母缩写的方式来起的名字。unorderd意思是无序的。

列表里的元素

<li>这里是列表项的内容</li>
1

<li>是列表项。不管是有序列表<ol>标签还是无序列表<ul>标签,他们内部的每一项,都可以用<li>标签来表示。

案例

下面我们先看一个有序列表的例子:

<ol>
  <li>看视频</li>
  <li>写代码</li>
  <li>读教程</li>
  <li>做练习</li>
</ol>
1
2
3
4
5
6

上面,应该是你在idev365站点上的学习流程,这里我用了一个有序列表来表示,最后在浏览器里会生成类似项目的样子

1.看视频
2.写代码
3.读教程
4.做练习
1
2
3
4

默认情况下,浏览器会帮你把每一条有序列表中的<li>列表项,在每一项前面加上序号.

我们再来看看无序列表的例子:

<ul>
  <li>敲代码</li>
  <li>倒水</li>
  <li>喝水</li>
  <li>上厕所</li>
  <li>敲代码</li>
  <li>喝水</li>
  <li>敲代码</li>
  <li>上厕所</li>
  <li>倒水</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11

上面是我前几天听的一个笑话,讲程序员的一天。因为这些时间没有严格的先后顺序,所以我就把它做成了一个无序列表的形式。在浏览器上运行一下,差不多是下面这个样子:

· 敲代码
· 倒水
· 喝水
· 上厕所
· 敲代码
· 喝水
· 敲代码
· 上厕所
· 倒水
1
2
3
4
5
6
7
8
9

默认情况下,每个无序列表的列表项前面会显示一个实心的小圆点。

列表的嵌套

无论是有序列表还是无序列表,我们都可以对列表进行嵌套。这句话可能粗看不太好理解,我们来看下实际的例子

  • 课01.认识一张网页
    • 浏览器打开网址的过程
    • 开发工具
    • 写一张网页
  • 课02.理解标签
    • 什么是标签
    • 常用标签
      • h1-h6标题标签
      • p段落标签
      • a超链接标签
  • 课03.美丽的外衣CSS
    • 常用样式
      • 类样式
      • 标签样式
    • 样式的属性
      • 属性名称
      • 属性值

上面就是一个嵌套的列表,第一级是每一课的标题,第二级是每一课里的主要知识点,第三级是每个主要知识点带出来的一些小知识点。

在HTML中,如何书写这种嵌套列表,这里我们看个例子,你就能明白了。

<ul>
  <li>
    课01.认识一张网页
    <ul>
      <li>浏览器打开网址的过程</li>
      <li>开发工具</li>
      <li>写一张网页</li>
    </ul>
  </li>
  ...
</ul>
1
2
3
4
5
6
7
8
9
10
11

上面就是我们上面那个例子的HTML代码的一部分。你已经看到了,对于一个二级类目分类,我们可以直接在第一级的<li>中再次嵌套一个<ul>然后就可以在这个<ul>中书写二级类目了。

无序列表时这样,有序列表也是同样的思路,所以这里就不再过多演示。

课程小结

本节课我们主要学习HTML里的两种常用列表

  • 有序列表<ol>
  • 无序列表<ul>
  • 列表里的子元素<li>
  • 列表的嵌套

课后练习

分别使用今天学习的两种列表,制作两张网页。

比如:

  • 制作一份今日菜谱
  • 把今天学习到的内容用嵌套列表的形式整理成一份HTML网页