整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML 支持有序、無序和定義列表:
HTML 列表
有序列表
| 無序列表
|
本例演示無序列表。無序列表
有序列表
本例演示有序列表。
HTML無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表使用 <ul> 標簽
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
瀏覽器顯示如下：
Coffee
Milk
HTML 有序列表
同樣，有序列表也是一列項目，列表項目使用數字進行標記。 有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。
列表項項使用數字來標記。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
瀏覽器中顯示如下：
Coffee
Milk
HTML 自定義列表
自定義列表不僅僅是一列項目，而是項目及其注釋的組合。
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <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
注意事項 - 有用提示
提示: 列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
更多實例
不同類型的有序列表
本例演示不同類型的有序列表。
不同類型的無序列表
本例演示不同類型的無序列表。
嵌套列表
本例演示如何嵌套列表。
嵌套列表 2
本例演示更復雜的嵌套列表。
自定義列表
本例演示一個定義列表。
HTML 列表標簽
| 標簽 | 描述 |
|---|---|
| <ol> | 定義有序列表 |
| <ul> | 定義無序列表 |
| <li> | 定義列表項 |
| <dl> | 定義定義列表 |
| <dt> | 自定義列表項目 |
| <dd> | 定義自定列表項的描述 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
TML 支持有序、無序和定義列表
實例
無序列表
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>一個無序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>
[/demo]
本例演示無序列表。
有序列表
[demo]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>
[/demo]
本例演示有序列表。
無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表始于 <ul> 標簽。每個列表項始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
瀏覽器顯示如下：
Coffee
Milk
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
有序列表
同樣，有序列表也是一列項目，列表項目使用數字進行標記。
有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
瀏覽器顯示如下：
Coffee
Milk
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
定義列表
自定義列表不僅僅是一列項目，而是項目及其注釋的組合。
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <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
定義列表的列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
更多實例
不同類型的無序列表
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>Disc 項目符號列表：</h4>
<ul type="disc">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>
<h4>Circle 項目符號列表：</h4>
<ul type="circle">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>
<h4>Square 項目符號列表：</h4>
<ul type="square">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>
</body>
</html>
[/demo]
本例演示一個無序列表。
不同類型的有序列表
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>數字列表：</h4>
<ol>
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
<h4>字母列表：</h4>
<ol type="A">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
<h4>小寫字母列表：</h4>
<ol type="a">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
<h4>羅馬字母列表：</h4>
<ol type="I">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
<h4>小寫羅馬字母列表：</h4>
<ol type="i">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
</body>
</html>
[/demo]
本例演示不同類型的有序列表。
嵌套列表
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>一個嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
[/demo]
本例演示如何嵌套列表。
嵌套列表 2
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>一個嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶
<ul>
<li>中國茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
[/demo]
本例演示更復雜的嵌套列表。
定義列表
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h2>一個定義列表：</h2>
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>
</body>
</html>
[/demo]
本例演示一個定義列表。
列表標簽
標簽 描述
<ol> 定義有序列表。
<ul> 定義無序列表。
<li> 定義列表項。
<dl> 定義定義列表。
<dt> 定義定義項目。
<dd> 定義定義的描述。
<dir> 已廢棄。使用 <ul> 代替它。
<menu> 已廢棄。使用 <ul> 代替它。
一、在Html中 列表一共分為三種：
（1）無序列表 ：使用 ul 標簽來創建，用 li 標簽來表示列表項 (較常用)
<ul>
<li>結構</li>
<li>表現</li>
<li>行為</li>
</ul>（2）有序列表 ：使用 ol 標簽來創建，用 li 標簽來表示列表項
<ol>
<li>結構</li>
<li>表現</li>
<li>行為</li>
</ol>（3）定義列表 ：使用 dl 標簽來創建，用 dt 標簽來表示定義的內容 ，dd 標簽來對內容進行解釋說明
<dl>
<dt>YYDS</dt>
<dd>yyds是“永遠的神”的縮寫 [1] ，常被粉絲用來贊賞自己的愛豆 </dd>
<dt>XSWL</dt>
<dd>XSWL=笑死我了”，作為當代沙雕青年，每天除了哈哈哈就是“窩窩頭一塊錢四個</dd>
</dl>二、列表相互之間可以嵌套：
<ul>
<li>節日
<ol>
<li>中秋</li>
<li>國慶</li>
<li>元旦</li>
</ol>
</li>
<li>中國</li>
<li>世界</li>
</ul>
三、網頁展示：
網頁效果展示
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
