HTML5列表標籤

2021-08-16 02:06:26 字數 4603 閱讀 2906

原創 2023年07月03日 20:16:37

列表(list),就是在網頁中將相關資料以條目的形式有序或者無序排列而形成的表。常用的列表有無序列表、有序列表和定義列表三種。另外,還有不太常用的目錄列表和選單列表。

列表型別與標記符號

列表型別

標記符號

列表型別

標記符號

無序列表

ul目錄列表

dir有序列表

ol選單列表

menu

定義列表

dl

一、無序列表

無序列表(unordered list)是乙個沒有特定順序的相關條目(或稱為列表項)的集合。在無序列表中,各個列表項之間屬並列關係,沒有先後順序之分,它們之間以乙個專案符號來標記。

×基本語法

×語法說明

在html中,可以使用成對的標記插入無序列表,其中的列表項標記(list-items)用來定義列表項序列。

使用無序列表標記的type屬性,可以指定出現在列表項前的專案符號的樣式,其取值以及相對應的符號樣式如下:

(1)disc:指定專案符號為乙個實心圓點(ie瀏覽器預設值是disc);

(2)circle:指定專案符號為乙個空心圓點;

(3)square:指定專案符號為乙個實心方塊。

二、有序列表

1、有序列表及其編號樣式

有序列表(ordered list)是乙個有特定順序的相關條目(或稱為列表項)的集合。在有序列表中,各個列表項有先後順序之分,它們之間以編號來標記。

×基本語法

專案名稱 

…… 專案名稱 

×語法說明

在html中,可以使用成對的標記插入有序列表,其中的列表項標記(list-items)用來定義列表項序列。

使用有序列表標記的type屬性,可以指定出現在列表項前的專案編號的樣式,其取值以及相對應的符號樣式如下:

(1)1:指定專案編號為阿拉伯數字(ie瀏覽器的預設值);

(2)a:指定專案編號為小寫英文本母;

(3)a:指定專案編號為大寫英文本母;

(4)i:指定專案編號為小寫羅馬數字;

(5)i:指定專案編號為大寫羅馬數字。

2、編號起始值

通常,在指定列表的編號樣式後,瀏覽器會從1、a、a、ⅰ、ⅰ開始自動編號。而在使用有序列表標記的start屬性後,使用者則可改變標號的起始值。start屬性值是乙個整數,表示從哪乙個數字或字母開始編號。

3、列表項樣式

除了對列表標記進行屬性設定外,還可以對列表項標記進行屬性設定。使用列表項標記的type屬性,可以指定單個列表項的符號(對於無序列表而言)或編號(對於有序列表而言)。在列表標記的type屬性和列表項標記的type屬性發生衝突的情況下,所指定的單個列表項遵循的type屬性進行設定。

[注]:

(1)所指定的單個列表項只有樣式發生了變化,其順序值大小不變。

(2)列表項標記的type屬性只影響當前列表項,後續的列表項標記將恢復遵循列表中設定的type屬性。

(3)列表項標記的type屬性的指定,即使用於無序列表也使用於有序列表。

4、列表項編號

列表項標記的type屬性只能改變當前列表項的符號或編號的樣式,並不會改變其值的大小。使用列表項標記的的value屬性,可以改變當前列表項的編號大小,並會影響其後所有列表項編號的大小。但該屬性只適用於有序列表。

三、巢狀列表

列表還可以巢狀使用,也就是乙個列表中還可以包含有多層子列表。巢狀列表可以是無序列表的巢狀,也可以是有序列表的巢狀,還可以是有序列表和無序列表的混合巢狀。

四、定義列表

在html檔案中,只要在適當的地方插入標記,即可自動生成定義列表(definition list)。它的每一項前既沒有專案符號,也沒有編號,它是通過縮排的形式使內容層次清晰。

×基本語法

… … … 

… … 

… ×語法說明

(1)標記用來建立定義列表。

(2)標記用來建立列表中的上層專案,此標記只能在標記中使用。顯示時,標記定義的內容將左對齊。

(3)標記用來建立列表中的下層專案,此標記只能在標記中使用。顯示時標記的內容將相對於標記定義的內容向右縮排。

五、選單列表和目錄列表

選單列表(menu list)通常用於顯示乙個簡單的單列列表,一般不做巢狀。目錄列表(directory list)通常用於顯示乙個多列的檔案列表,可做巢狀。他們的使用均和無序列表類似,並且可以看成是無序列表的一種特殊形式。一般不建議使用此兩種列表。

×基本語法

(1)選單列表

專案名稱 

…… 專案名稱 

(2)目錄列表

專案名稱 

…… 專案名稱 

原創 2023年07月03日 20:16:37

列表(list),就是在網頁中將相關資料以條目的形式有序或者無序排列而形成的表。常用的列表有無序列表、有序列表和定義列表三種。另外,還有不太常用的目錄列表和選單列表。

列表型別與標記符號

列表型別

標記符號

列表型別

標記符號

無序列表

ul目錄列表

dir有序列表

ol選單列表

menu

定義列表

dl

一、無序列表

無序列表(unordered list)是乙個沒有特定順序的相關條目(或稱為列表項)的集合。在無序列表中,各個列表項之間屬並列關係,沒有先後順序之分,它們之間以乙個專案符號來標記。

×基本語法

×語法說明

在html中,可以使用成對的標記插入無序列表,其中的列表項標記(list-items)用來定義列表項序列。

使用無序列表標記的type屬性,可以指定出現在列表項前的專案符號的樣式,其取值以及相對應的符號樣式如下:

(1)disc:指定專案符號為乙個實心圓點(ie瀏覽器預設值是disc);

(2)circle:指定專案符號為乙個空心圓點;

(3)square:指定專案符號為乙個實心方塊。

二、有序列表

1、有序列表及其編號樣式

有序列表(ordered list)是乙個有特定順序的相關條目(或稱為列表項)的集合。在有序列表中,各個列表項有先後順序之分,它們之間以編號來標記。

×基本語法

專案名稱 

…… 專案名稱 

×語法說明

在html中,可以使用成對的標記插入有序列表,其中的列表項標記(list-items)用來定義列表項序列。

使用有序列表標記的type屬性,可以指定出現在列表項前的專案編號的樣式,其取值以及相對應的符號樣式如下:

(1)1:指定專案編號為阿拉伯數字(ie瀏覽器的預設值);

(2)a:指定專案編號為小寫英文本母;

(3)a:指定專案編號為大寫英文本母;

(4)i:指定專案編號為小寫羅馬數字;

(5)i:指定專案編號為大寫羅馬數字。

2、編號起始值

通常,在指定列表的編號樣式後,瀏覽器會從1、a、a、ⅰ、ⅰ開始自動編號。而在使用有序列表標記的start屬性後,使用者則可改變標號的起始值。start屬性值是乙個整數,表示從哪乙個數字或字母開始編號。

3、列表項樣式

除了對列表標記進行屬性設定外,還可以對列表項標記進行屬性設定。使用列表項標記的type屬性,可以指定單個列表項的符號(對於無序列表而言)或編號(對於有序列表而言)。在列表標記的type屬性和列表項標記的type屬性發生衝突的情況下,所指定的單個列表項遵循的type屬性進行設定。

[注]:

(1)所指定的單個列表項只有樣式發生了變化,其順序值大小不變。

(2)列表項標記的type屬性只影響當前列表項,後續的列表項標記將恢復遵循列表中設定的type屬性。

(3)列表項標記的type屬性的指定,即使用於無序列表也使用於有序列表。

4、列表項編號

列表項標記的type屬性只能改變當前列表項的符號或編號的樣式,並不會改變其值的大小。使用列表項標記的的value屬性,可以改變當前列表項的編號大小,並會影響其後所有列表項編號的大小。但該屬性只適用於有序列表。

三、巢狀列表

列表還可以巢狀使用,也就是乙個列表中還可以包含有多層子列表。巢狀列表可以是無序列表的巢狀,也可以是有序列表的巢狀,還可以是有序列表和無序列表的混合巢狀。

四、定義列表

在html檔案中,只要在適當的地方插入標記,即可自動生成定義列表(definition list)。它的每一項前既沒有專案符號,也沒有編號,它是通過縮排的形式使內容層次清晰。

×基本語法

… … … 

… … 

… ×語法說明

(1)標記用來建立定義列表。

(2)標記用來建立列表中的上層專案,此標記只能在標記中使用。顯示時,標記定義的內容將左對齊。

(3)標記用來建立列表中的下層專案,此標記只能在標記中使用。顯示時標記的內容將相對於標記定義的內容向右縮排。

五、選單列表和目錄列表

選單列表(menu list)通常用於顯示乙個簡單的單列列表,一般不做巢狀。目錄列表(directory list)通常用於顯示乙個多列的檔案列表,可做巢狀。他們的使用均和無序列表類似,並且可以看成是無序列表的一種特殊形式。一般不建議使用此兩種列表。

×基本語法

(1)選單列表

專案名稱 

…… 專案名稱 

(2)目錄列表

專案名稱 

…… 專案名稱 

HTML5 列表標籤用法示例總結

列表就是把 製成表,以表來顯示,是容器裡面裝載著文字或圖表的一種形式,列表最大的特點就是 整齊 整潔 有序。u for unorder.無序列表的各個列表項之間沒有順序級別之分 是並列的 其基本語法格式如下 示例輸出 無序的表現在於前面不是序號而是點 1.中只能巢狀,直接在標籤中輸入其他標籤或者文字...

HTML5列表元素

列表元素可以有如下標籤 標籤定義有序列表 特別屬性有 type 設定樣式 reversed 降序 type屬性可以設定不同的專案符號,值可選disc circle square 列表項內部可以使用段落,換行符,鏈結以及其它列表等。有序列表也是一列專案,列表專案使用數字進行標記。有序列表始於標籤。每個...

HTML5列表元素

ul元素 無序列表是網頁中最常用的列表,之所以稱為 無序列表 是因為其各個列表項之間沒有順序級別之分,通常是並列的。下圖中就是通過ul元素的基本語法列出的5個資料 如下 ul li aaa li li bbb li li ccc li li ddd li li eee li ul 標記用於定義無序列...