
2.3 创建列表
列表形式在网页设计中占有比较大的比例,它的特点是显示信息非常整齐直观,便于用户理解。在本节中将向读者介绍HTML中用于创建项目列表、编号列表和定义列表的相关标签。
2.3.1 使用<ul>标签创建项目列表
项目列表又称为无序列表,就是列表结构中的列表项没有先后顺序的列表形式。不少网页应用中的列表均采用项目列表。
项目列表标签采用<ul></ul>标签,每一个列表项被包含在<li></li>标签内,所有的列表项被包含在<ul></ul>标签内。
项目列表的语法格式如下。
<ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> <li>列表项五</li> </ul>
实战 制作新闻列表
最终文件:最终文件\第2章\2-3-1.html 视频:视频\第2章\2-3-1.mp4
01 执行“文件>打开”命令,打开页面“源文件\第2章\2-3-1.html”,效果如图2-41所示,将鼠标光标移至名为news的div中,将多余的文字删除,并输入相应的文字,如图2-42所示。

图2-41 打开页面

图2-42 输入文字
02 切换到网页HTML代码中,为刚输入的内容添加相应的项目列表标签,如图2-43所示。保存页面,在浏览器中预览页面,可以看到网页中项目列表的效果,如图2-44所示。

图2-43 添加项目列表标签

图2-44 预览项目列表默认效果
技巧
默认情况下,在网页中创建的项目列表显示为实心小圆点的形式,可以通过在<ul>标签中添加type属性,修改项目符号的效果,如在<ul>标签中添加type="square"属性设置,可以将项目符号修改为实心正方形。另外,还可以通过CSS样式对项目列表进行设置,关于CSS样式将在后面章节中进行讲解。
2.3.2 使用<ol>标签创建编号列表
编号列表又称有序列表,就是列表结构中的列表项有先后顺序的列表形式,从上到下可以有不同的序列编号,如1、2、3……或者a、b、c……。
编号列表采用标签<ol></ol>,每一个列表项被包含在<li></li>标签内,所有的列表项被包含在<ol></ol>标签内。使用编号列表可以让列表项按照明确的顺序排列。
编号列表的语法规则如下。
<ol> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> <li>列表项五</li> </ol>
实战 制作编号有序列表
最终文件:最终文件\第2章\2-3-2.html 视频:视频\第2章\2-3-2.mp4
01 执行“文件>打开”命令,打开页面“源文件\第2章\2-3-2.html”,效果如图2-45所示,将鼠标光标移至名为box的div中,将多余的文字删除,并输入相应的文字,如图2-46所示。

图2-45 打开页面

图2-46 输入文字
02 切换到代码视图中,为刚输入的内容添加相应的编号列表标签,如图2-47所示。保存页面,在浏览器中预览页面,可以看到网页中编号列表的默认效果,如图2-48所示。

图2-47 添加编号列表标签

图2-48 预览编号列表默认效果
技巧
默认情况下,在网页中的有序列表<ol>标签中的项目会按照1、2、3……顺序进行排列,如果需要修改默认的有序列表序号,可以在<ol>标签中添加type属性设置,如在<ol>标签中添加type="a"属性设置,可以将有序列表的序号更改为小写字母a、b、c……的形式。
2.3.3 使用<dl>标签创建定义列表
列表的另外一种形式是定义列表,定义列表形式特别,用法也特别,定义列表中每个标签都是成对出现的,它在网页布局中的应用也是非常广泛的。
定义列表由<dl>、<dt>和<dd>3个标签组成,<dt>和<dd>标签包含在<dl>标签内,不同的是标签<dt></dt>定义的是标题,而标签<dd></dd>定义的是内容。
定义列表的语法规则如下。
<dl> <dt></dt> <dd></dd> … </dl>
实战 制作复杂的新闻列表
最终文件:最终文件\第2章\2-3-3.html 视频:视频\第2章\2-3-3.mp4
01 执行“文件>打开”命令,打开页面“源文件\第2章\2-3-3.html”,效果如图2-49所示,将鼠标光标移至名为news的div中,将多余的文字删除,并输入相应的文字,如图2-50所示。

图2-49 打开页面

图2-50 输入文字
02 切换到代码视图中,可以看到该部分内容的HTML代码,如图2-51所示。在页面中将<div id="news"></div>标签之间相应的段落标签删除,添加定义列表标签<dl>、<dt>和<dd>,如图2-52所示。

图2-51 HTML代码

图2-52 添加定义列表标签
03 因为<dl>、<dt>和<dd>标签的默认效果并不能满足这里制作的效果,需要定义相应的CSS样式对其进行控制,如图2-53所示。保存页面,在浏览器中预览页面,可以看到网页中定义列表的效果,如图2-54所示。

图2-53 CSS样式代码

图2-54 预览定义列表效果
提示
在HTML代码中,<dt>和<dd>标签都是块元素,在网页中占据一整行的空间,如果需要使<dt>与<dd>标签中的内容在一行中显示,就必须使用CSS样式进行控制。关于CSS样式将在后面的章节中进行详细的介绍。