網站首頁 健康小知識 母嬰教育 起名 運動知識 職場理財 情感生活 綠色生活 遊戲數碼 美容 特色美食 愛好

HTML列表知識有序列表無序列表定義列表

欄目: 互聯網 / 發佈於: / 人氣:1.46W

列表在HTML中是一個常用的操作,幾乎很多網頁都出現了列表來顯示數據。今天我就在這裏來分享下有序列表、無序列表和定義列表的相關知識。從定義到實例的一個總結和概況。

有序列表

(01)有序列表是ol標籤和li標籤的組合表示,<ol>表示有序列表的開始,</ol>表示有序列表的結束。這裏為了説明有序列表的用法,將張三,王四,李五,馬六用有序列表來表示出來。<html><head><title>列表控制</title></head><body><ol><li>張三</li><li>王四</li><li>李五</li><li>馬六</li></ol></body></html>如下圖可以看到執行的結果,前面自動天機了1234作為序號。

HTML列表知識有序列表無序列表定義列表

(02)很多時候我們想在HTML中使用ABCD或者其他的需要來作為有序列表的序號該怎麼做呢?在HTML中提供了小寫字母a來用小寫字母表示列表的序號,大寫字母A用大寫字母來表示列表的序號,i小寫羅馬數字來表示序號和I這個大寫的羅馬數字來表示序號。可以看如下實例。可以看到如下圖的代碼和例子,用大寫字母作為這個有序列表的序號,寫法是type="A",執行結果是A、B、C、D的序號。

HTML列表知識有序列表無序列表定義列表 第2張

(03)對於有序列表來説,我們可能遇到一種情況是第二頁接着第一頁繼續書寫的,第二頁的序號不從一開始的。對於這個情況我們該怎麼設計呢?序號不從一開始的,HTML給ul提供了一個屬性,他就是start屬性,具體用法如下實例:(這個有序列表從10開始)<html><head><title>列表控制</title></head><body><ol type="1" start="10"><li>張三</li><li>王四</li><li>李五</li><li>馬六</li></ol></body></html>可以看到這個有序列表是從10開始的,往下繼續的一個序列號。

HTML列表知識有序列表無序列表定義列表 第3張

無序列表

(01)HTML中無序列表是用<ul>和<li>的組合控制標籤,<ul></ul>控制了無序列表的開始和結束,<li>/li>控制了列表中的項。具體實例如下:<html><head><title>列表控制</title></head><body><ul><li>張三</li><li>王四</li><li>李五</li><li>馬六</li></ul></body></html>從下圖執行結果可以看出,無序列表默認的是圓心實點作為無序列表的標識。

HTML列表知識有序列表無序列表定義列表 第4張

(02)如果我麼不想無序列表前面的標識是圓心的實點該怎麼辦呢?這裏提供了disc 實心圓,circle空心圓,square實心方塊這幾種項目符號方便大家使用。具體實例如下:<html><head><title>列表控制</title></head><body><ul type="square"><li>張三</li><li>王四</li><li>李五</li><li>馬六</li></ul></body></html>可以看到項目符號變成了實心的方塊了。其實還有自定義的項目符文,這個我放在單獨的一個經驗中了。

HTML列表知識有序列表無序列表定義列表 第5張

定義序列

(01)定義列表是通過<dl><dt><dd>這三個組合標籤來實現的,<dl></dl>表示定義序列的開始和結束,<dt></dt>表示這被解釋的內容<dd></dd>對被解釋內容的一個解釋。<html><head><title>列表控制</title></head><body><dl><dt>考試科目</dt></dt><dd>語文</dd><dd>數學</dd><dd>英語</dd></dl></body></html>可以看到,被解釋的是考試科目,解釋內容為下面這三個科目。這其中用到了縮進來表示的。

HTML列表知識有序列表無序列表定義列表 第6張

特別提示

程序設計需要不斷練習和學習