當前位置:才華齋>設計>網頁設計>

有序列表和無序列表的網頁HTML程式碼講解

網頁設計 閱讀(5.16K)

本節學習HTML中的列表元素,列表形式在網站設計中佔有比較大的比重,顯示資訊非常整齊直觀,便於使用者理解。在後面的CSS樣式學習中將大量使用到列表元素的高階作用。

有序列表和無序列表的網頁HTML程式碼講解

用於組織資料的列表

學習了這麼多控制網頁顯示的HTML標籤,讀者可以初步製作純文章頁面了。本節學習HTML中的列表元素,列表形式在網站設計中佔有比較大的'比重,顯示資訊非常整齊直觀,便於使用者理解。在後面的CSS樣式學習中將大量使用到列表元素的高階作用。

4.4.1 列表的結構組成

HTML的列表元素是一個由列表標籤封閉的結構,包含的列表項由

組成。具體結構如圖4.17所示。

4.4.2 製作無序列表

顧名思義,無序列表就是列表結構中的列表項沒有先後順序的列表形式。大部分網頁應用中的列表均採用無序列表,其列表標籤採用

,編寫方法如下:

列表項一

列表項二

列表項三

列表項四

列表項五

4.4.3 製作有序列表

顧名思義,有序列表就是列表結構中的列表項有先後順序的列表形式,從上到下可以有各種不同的序列編號,如1、2、3或a、b、c等。在D:web目錄下建立網頁檔案,命名為ul_,編寫程式碼如程式碼4.17所示。

程式碼4.17 列表的設定:ul_

網頁前臺技術

HTML

CSS

JavaScript

FLASH

網頁後臺的學習

ASP

PHP

CGI

Ruby

Python

在瀏覽器位址列輸入http://localhost/ul_,瀏覽效果如圖4.18所示。

圖4.18 列表的設定