整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML 支持有序、無序和定義列表:
HTML 列表
有序列表
| 無序列表
|
本例演示無序列表。無序列表
有序列表
本例演示有序列表。
HTML無序列表
無序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。
無序列表使用 <ul> 標(biāo)簽
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
瀏覽器顯示如下：
Coffee
Milk
HTML 有序列表
同樣，有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。 有序列表始于 <ol> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li> 標(biāo)簽。
列表項(xiàng)項(xiàng)使用數(shù)字來標(biāo)記。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
瀏覽器中顯示如下：
Coffee
Milk
HTML 自定義列表
自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。
自定義列表以 <dl> 標(biāo)簽開始。每個(gè)自定義列表項(xiàng)以 <dt> 開始。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
瀏覽器顯示如下：
Coffee
- black hot drink
Milk
- white cold drink
注意事項(xiàng) - 有用提示
提示: 列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
更多實(shí)例
不同類型的有序列表
本例演示不同類型的有序列表。
不同類型的無序列表
本例演示不同類型的無序列表。
嵌套列表
本例演示如何嵌套列表。
嵌套列表 2
本例演示更復(fù)雜的嵌套列表。
自定義列表
本例演示一個(gè)定義列表。
HTML 列表標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <ol> | 定義有序列表 |
| <ul> | 定義無序列表 |
| <li> | 定義列表項(xiàng) |
| <dl> | 定義定義列表 |
| <dt> | 自定義列表項(xiàng)目 |
| <dd> | 定義自定列表項(xiàng)的描述 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
序列表
經(jīng)過之前關(guān)于表格、表單的學(xué)習(xí)后，再來學(xué)習(xí)列表，就顯得非常的簡單和容易理解了。
學(xué)習(xí)是構(gòu)建知識(shí)體系的過程，沒有形成體系的知識(shí)學(xué)習(xí)再多也是碎片，是很難形成技能或深刻理解的，因此，如果您是零基礎(chǔ)的初學(xué)者，第一次看我的教程，如果時(shí)間允許的話，請務(wù)必從目錄中找尋第一篇，循序漸進(jìn)的學(xué)習(xí)。
列表分為有序列表、無序列表和定義列表，同時(shí)列表之中還能嵌套列表，和表格非常相似。
首先介紹有序列表
要用<ol></ol>標(biāo)簽告訴瀏覽器這里是列表。
然后在里面添加<li></li>標(biāo)簽，在這個(gè)標(biāo)簽中添加內(nèi)容即可。
示例代碼如下
<p>我喜歡的水果</p>
<ol>
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ol>大家可以把它放到一個(gè)新的html框架中看看效果。
完整代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>列表</title>
</head>
<body>
<h>有序列表</h>
<p>我喜歡的水果</p>
<ol>
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ol>
</body>
</html>頁面效果如下：
通過修改<ol>標(biāo)簽中的type屬性我們可以改變序號(hào)顯示的樣式，默認(rèn)的是數(shù)字，大家看一下不同的type值的不同效果吧！示例代碼如下：
<ol type="A">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ol>
<ol type="a">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ol>頁面效果如下：
下面給大家介紹一下搜狗輸入法中如何輸入羅馬數(shù)字。
step1.點(diǎn)擊"輸入方式"
step2.點(diǎn)擊"特殊符號(hào)"后選擇數(shù)字序號(hào)，找到羅馬數(shù)字即可
除此之外我們還可以使用CSS的方法為有序列表的序號(hào)提供更多樣式。在<ol>標(biāo)簽中修改style屬性可以直接調(diào)用這些css中的屬性。寫法是style="list-style-type:屬性值；"
示例代碼如下：(使用日語中的片假名表示序號(hào))
<ol style="list-style-type:hiragana;">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ol>頁面效果如圖所示：
是不是很有趣，這里的測試就不一一做了。為大家奉上list-style-type的值的列表與說明，大家自己課下去嘗試，這個(gè)列表中既有有序列表的值也有無序列表的值。
如圖：
資料來自w3school
無序列表
無序列表與有序列表的區(qū)別在于最外層的標(biāo)簽，它的寫法是這樣的：<ul></ul>。
有一個(gè)記憶的小技巧，有序的英文是order，故有序列表為order list（列表），縮寫為ol。
無序?yàn)閡norder，無序列表為unorder list，縮寫為ul。
無序列表<ul>標(biāo)簽的type屬性用來控制列表前的標(biāo)記顯示演示。
示例代碼如下：
<h>無序列表</h>
<p>我喜歡的水果</p>
<ul>
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ul>
<ul type="disc">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ul>
<ul type="circle">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ul>
<ul type="square">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ul>頁面效果如下：
通過圖片我們可知，無序列表默認(rèn)的列表標(biāo)識(shí)就是type="disc"。
style屬性的話大家自己試試吧，這里就不啰嗦了。
定義列表
這個(gè)列表比較特殊，也比較不常見，主要就是顯示名詞定義的。
首先要寫入<dl></dl>標(biāo)簽。這是告訴瀏覽器這里是個(gè)定義列表，和<ol>或<ul>一樣。
定義的英文是definition，定義列表就是definition list，縮寫是dl。
下面在<dl></dl>標(biāo)簽中間寫入定義的名稱<dt></dt>,即definition title（標(biāo)題）。
與定義名稱標(biāo)簽并列的是定義描述<dd></dd>,即definition describe（描述）。
示例代碼如下：
<dl>
<dt>計(jì)算機(jī)</dt>
<dd>用來計(jì)算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>頁面效果如下：
今天的內(nèi)容結(jié)束了！
列表嵌套列表的測試大家自己試試吧，學(xué)到現(xiàn)在，相信你們都可以完成了！
如果您喜歡我的教程請關(guān)注我，點(diǎn)贊也能讓我充滿動(dòng)力！
如果您有任何疑問請給我留言，如有問題或錯(cuò)誤請予以斧正！
HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個(gè)HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
SS列表屬性作用如下：
設(shè)置不同的列表項(xiàng)標(biāo)記為有序列表
設(shè)置不同的列表項(xiàng)標(biāo)記為無序列表
設(shè)置列表項(xiàng)標(biāo)記為圖像
列表
在HTML中，有兩種類型的列表：
無序列表 - 列表項(xiàng)標(biāo)記用特殊圖形（如小黑點(diǎn)、小方框等）
有序列表 - 列表項(xiàng)的標(biāo)記有數(shù)字或字母
使用CSS，可以列出進(jìn)一步的樣式，并可用圖像作列表項(xiàng)標(biāo)記。
不同的列表項(xiàng)標(biāo)記
list-style-type屬性指定列表項(xiàng)標(biāo)記的類型是：:
實(shí)例
ul.a{list-style-type:circle;}ul.b{list-style-type:square;}ol.c{list-style-type:upper-roman;}ol.d{list-style-type:lower-alpha;}
一些值是無序列表，以及有些是有序列表。
作為列表項(xiàng)標(biāo)記的圖像
要指定列表項(xiàng)標(biāo)記的圖像，使用列表樣式圖像屬性：
實(shí)例
ul{list-style-image:url('sqpurple.gif');}
上面的例子在所有瀏覽器中顯示并不相同，IE和Opera顯示圖像標(biāo)記比火狐，Chrome和Safari更高一點(diǎn)點(diǎn)。
如果你想在所有的瀏覽器放置同樣的形象標(biāo)志，就應(yīng)使用瀏覽器兼容性解決方案，過程如下
瀏覽器兼容性解決方案
同樣在所有的瀏覽器，下面的例子會(huì)顯示的圖像標(biāo)記：
實(shí)例
ul{list-style-type:none;padding:0px;margin:0px;}ulli{background-image:url(sqpurple.gif);background-repeat:no-repeat;background-position:0px5px;padding-left:14px;}
例子解釋：
ul:
設(shè)置列表樣式類型為沒有刪除列表項(xiàng)標(biāo)記
設(shè)置填充和邊距0px（瀏覽器兼容性）
ul中所有l(wèi)i:
設(shè)置圖像的URL，并設(shè)置它只顯示一次（無重復(fù)）
您需要的定位圖像位置（左0px和上下5px）
用padding-left屬性把文本置于列表中
列表 -縮寫屬性
在單個(gè)屬性中可以指定所有的列表屬性。這就是所謂的縮寫屬性。
為列表使用縮寫屬性，列表樣式屬性設(shè)置如下：
實(shí)例
ul{list-style:squareurl("sqpurple.gif");}
如果使用縮寫屬性值的順序是：
list-style-type
list-style-position (有關(guān)說明，請參見下面的CSS屬性表)
list-style-image
如果上述值丟失一個(gè)，其余仍在指定的順序，就沒關(guān)系。
所有的CSS列表屬性
| 屬性 | 描述 |
|---|---|
| list-style | 簡寫屬性。用于把所有用于列表的屬性設(shè)置于一個(gè)聲明中 |
| list-style-image | 將圖象設(shè)置為列表項(xiàng)標(biāo)志。 |
| list-style-position | 設(shè)置列表中列表項(xiàng)標(biāo)志的位置。 |
| list-style-type | 設(shè)置列表項(xiàng)標(biāo)志的類型。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
