任務1.4　在網頁中添加列表

?學習目標

①能夠表述網頁中列表的常見類型。

②能夠按要求使用有序列表和無序列表。

?任務描述

根據“網頁廣告單頁”效果圖，制作該網頁中的導航。

?知識學習與課堂練習

在網頁中大部分信息都是通過列表形式顯示的，如信息分類、新聞列表、菜單、排行榜等，除了網頁正文的段落文本和標題文本外，其他信息都需要列表結構進行組織和管理。

HTML提供的常用列表結構有無序列表和有序列表，這兩者可以通用。

1.無序列表＜ul＞

無序列表＜ul＞元素用來將“標簽內容”以列表的方式顯示，列表項目無先后順序之分，也就是沒有編號。

列表內的數據項以＜li＞元素來列舉，＜ul＞元素標簽中的＜li＞元素項目數據默認會加上一個圓點符號。無序列表是一個項目的列表，此列項使用實心圓進行標記。

其語法形式如下：

【課堂練習1.4-1】無序列表的簡單應用。

打開Visual Studio Coder軟件，在＜body＞標簽中輸入如下代碼：

顯示效果如圖1.4-1所示。

2.有序列表＜ol＞

有序列表＜ol＞元素用來將“標簽內容”以列表的方式顯示，列表項目有先后順序之分，也就是有順序編號。

列表內項目內容是以＜li＞元素來列舉，＜ol＞元素標簽中的＜li＞元素項目內容默認會順序加上1、2、3、…的數字編號。

其語法形式如下：

【課堂練習1.4-2】有序列表的簡單應用。

打開Visual Studio Coder軟件，在＜body＞標簽中輸入如下代碼：

顯示效果如圖1.4-2所示。

3.嵌套列表

當一個列表內容中還有細分的列表時，就需要嵌套一個列表進去。同樣是在＜li＞標簽中放入＜ul＞或＜ol＞標簽。

【課堂練習1.4-3】列表的嵌套使用。

打開Visual Studio Coder軟件，在＜body＞標簽中輸入如下代碼：

顯示效果如圖1.4-3所示。

【課堂練習1.4-4】有序列表和無序列表的嵌套使用。

打開Visual Studio Coder軟件，在＜body＞標簽中輸入如下代碼：

顯示效果如圖1.4-4所示。

?任務實施

①打開任務1.3中的index.html文件。

②完成“網頁廣告單頁”中菜單欄的顯示效果。

?任務回顧

網頁中的列表是一個非常有用的元素。列表用于包含內容相同或相近的元素。

常用列表有三種類型：無序列表、有序列表和定義列表。

在實際運用中，常使用無序列表來實現導航和新聞列表的設置；使用有序列表實現條文款項的表示；使用定義列表來制作圖文混排的排版模式。

?任務拓展

HTML提供的常用列表結構除了無序列表和有序列表外，還有定義列表＜dl＞。定義列表＜dl＞不僅僅是一列項目，而且是項目及其注釋的組合。用來將“標簽內容”中的定義項目內容以縮排的方式顯示，定義項目無先后順序之分，沒有編號也沒有項目符號。

自定義列表以＜dl＞標簽開始，每個自定義列表項以＜dt＞開始，每個自定義列表項的定義以＜dd＞開始。

其語法形式如下：

【課后練習】完成圖1.4-5和圖1.4-6所示的效果。