整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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小时内与您取得联系。
