上机实战
——创建一个任务清单

本例的效果如图2-15所示。

效果展示

思路分析

通过图2-15的效果图可以看出，任务清单可以分成三个部分。

最上面部分包含标题和说明文字，标题比较大可以使用＜h1＞标签，说明文字用＜p＞标签；中间部分包含标题和无序列表，这里的标题相对较小，使用＜h2＞标签，无序列表使用＜ul＞标签，列表项使用＜li＞标签；最下面的部分包含标题和有序列表，这里的标题同样使用＜h2＞标签，有序列表使用＜ol＞和＜li＞标签。

明确了使用的文本标签之后，接着进行代码编写，就能够实现对应的效果了。

制作步骤

步骤01 新建一个记事本文档，在文档中输入以下代码。

步骤02 使用＜h1＞标签和＜p＞标签，完成标题和说明文字部分代码，对应代码如下。

步骤03 使用＜h2＞、＜ul＞、＜li＞标签实现中间部分的内容，对应代码如下。

步骤04 使用＜h2＞、＜ol＞、＜li＞标签实现最后部分的内容，对应代码如下。

步骤05 全部代码完成之后，在浏览器中打开，查看运行效果即可。 dWri47oKz6irSwdFFcTV1OPbnwbW8F79u1nnyj5wRno2TtHbKX5w6IZ/8RdUdcxR