案例3 新闻列表网页

我们知道在Word文档中有很多内容可以采用项目列表的形式来呈现，也就是每项内容前有圆点或者方块等项目符号。在网页设计时，通过列表标记也可以实现类似的效果。本案例创建一个新闻列表网页，在知识点中介绍无序列表、有序列表、列表嵌套和自定义列表等内容。

3.1 案例描述

创建新闻列表网页，网页中有标题、水平线和列表项等内容，列表项采用无序列表来呈现，网页浏览效果如图3-1所示。

3.2 案例实现

创建新闻列表网页的步骤如下。

1.案例分析

图3-1所示的网页内容由3部分构成，分别为标题、水平线和新闻条目。标题使用<h2>标记定义，水平线使用<hr>标记定义，新闻条目使用无序列表标记<ul>和<li>定义。

2.新建项目

在HBuilderX中新建项目project03，设置项目存放位置为E:/网页设计/源代码，选择模板类型为“空项目”，单击“创建”按钮。

3.在项目中创建网页文件

在project03中新建HTML文件，设置文件名为example.html。

4.输入网页代码

根据案例分析，使用相应的HTML标记来构建网页结构，代码如下。

5.保存并浏览网页

网页浏览效果如图3-1所示。

3.3 相关知识点

3.3.1 无序列表

无序列表的基本语法格式如下。

说明 “ul”是英文“unordered list”（无序列表）的缩写。浏览器在显示无序列表时，将以特定的项目符号对列表项进行排列。

例3-1 在项目project03中新建一个网页文件，在代码中使用无序列表标记，将文件保存为example01.html。代码如下。

浏览网页，效果如图3-2所示。

注意 <li>与</li>相当于一个容器，可以容纳所有的网页元素。但是<ul>和</ul>中只能嵌套<li>和</li>，直接在<ul>和</ul>中输入文字的做法是不允许的。

3.3.2 有序列表

有序列表的基本语法格式如下。

说明 “ol”是英文“ordered list”（有序列表）的缩写。浏览器在显示有序列表时，将用数字编号对列表项进行排列。

例3-2 在项目project03中新建一个网页文件，在代码中使用有序列表标记，将文件保存为example02.html。代码如下。

浏览网页，效果如图3-3所示。

3.3.3 列表嵌套

在HTML中可以实现列表的嵌套，也就是说，无序列表或有序列表的列表项中还可以包含有序列表或无序列表。

例3-3 在项目project03中新建一个网页文件，在代码中实现列表嵌套，将文件保存为example03.html。代码如下。

浏览网页，效果如图3-4所示。

可以看出，无序列表嵌套时，外层和内层会自动使用不同的项目符号，这里外层的项目符号是实心圆点（disc），内层的项目符号是空心圆点（circle）。

3.3.4 自定义列表

自定义列表用于对条目或术语进行解释或描述。与无序列表和有序列表不同，自定义列表的列表项前没有任何项目符号。

自定义列表的基本语法格式如下。

说明 “dl”是英文“definition list”（定义列表）的缩写；“dt”是英文“definition term”的缩写，表示条目名称；“dd”是英文“definition data”的缩写，表示条目的数据内容。

<dl>标记中可以有多对<dt>标记，每对<dt>标记后可以有多对<dd>标记。

自定义列表在显示时没有项目符号，但<dd>标记内的内容会自动缩进一定的距离，使列表结构更加清晰。

例3-4 在项目project03中新建一个网页文件，在代码中使用自定义列表标记，将文件保存为example04.html。代码如下。

浏览网页，效果如图3-5所示。

注意 <dt>标记中不仅可以放入文字，还可以放入图片。

案例小结

本案例主要介绍了使用无序列表标记创建新闻列表网页，在知识点中介绍了HTML5的无序列表、有序列表、列表嵌套和自定义列表，熟练使用各种列表可以使内容有序、整齐地显示到网页上。

习题与实训

一、单项选择题

1.无序列表标记是（ ）。

A.<ul>

B.<ol>

C.<dl>

D.<al>

2.有序列表标记是（ ）。

A.<ul>

B.<ol>

C.<dl>

D.<al>

3.自定义列表标记是（ ）。

A.<ul>

B.<ol>

C.<dl>

D.<al>

二、判断题

1.<li>与</li>相当于一个容器，可以容纳所有的网页元素。（ ）

2.无序列表可以和无序列表嵌套，但无序列表不能与有序列表嵌套。（ ）

3.<dl>标记中可以有多对<dt>标记，每对<dt>标记后可以有多对<dd>标记。（ ）

三、实训练习

创建小米产品列表页面，浏览效果如图3-6所示。网页中的标题文字为“小米产品”，其他是嵌套的无序列表。