html列表有哪些
时间：2016-11-28 11:46 已访问：133次
列表也是有区分的，目前html支持的列表有无序列表和有序列表之分，那么这方面内容该如何学习呢，作为学员如果想要快速学会这点知识，需要掌握哪些内容呢？
HTML 列表
HTML 支持有序、无序和定义列表:
HTML 列表
|
有序列表 1. 第一个列表项 2. 第二个列表项 3. 第三个列表项 |
无序列表 · 列表项 · 列表项 · 列表项 |
HTML 列表标签
|
标签 |
描述 |
|
<ol> |
定义有序列表 |
|
<ul> |
定义无序列表 |
|
<li> |
定义列表项 |
|
<dl> |
定义定义列表 |
|
<dt> |
自定义列表项目 |
|
<dd> |
定义自定列表项的描述 |
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
注意事项 - 有用提示
提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
更多实例
1、不同类型的有序列表
本例演示不同类型的有序列表。
源文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT培训网(www.itpxw.cn)</title>
</head>
<body>
<h4>编号列表：</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>大写字母列表：</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小写字母列表：</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>罗马数字列表：</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小写罗马数字列表：</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
运行结果：
编号列表：
1. Apples
2. Bananas
3. Lemons
4. Oranges
大写字母列表：
A. Apples
B. Bananas
C. Lemons
D. Oranges
小写字母列表：
a. Apples
b. Bananas
c. Lemons
d. Oranges
罗马数字列表：
I. Apples
II. Bananas
III. Lemons
IV. Oranges
小写罗马数字列表：
i. Apples
ii. Bananas
iii. Lemons
iv. Oranges
2、不同类型的无序列表
本例演示不同类型的无序列表。
源文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT培训网(www.itpxw.cn)</title>
</head>
<body>
<p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>
<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>正方形列表：</h4>
<ul style="list-style-type:square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
运行结果：
注意： 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：
圆点列表：
· Apples
· Bananas
· Lemons
· Oranges
圆圈列表：
o Apples
o Bananas
o Lemons
o Oranges
正方形列表：
§ Apples
§ Bananas
§ Lemons
§ Oranges
3、嵌套列表
本例演示如何嵌套列表。
源文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT培训网(www.itpxw.cn)</title>
</head>
<body>
<h4>嵌套列表：</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
运行结果：
嵌套列表：
· Coffee
· Tea
o Black tea
o Green tea
· Milk
4、嵌套列表 2
本例演示更复杂的嵌套列表。
源文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT培训网(www.itpxw.cn)</title>
</head>
<body>
<h4>嵌套列表：</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
运行结果：
嵌套列表：
· Coffee
· Tea
o Black tea
o Green tea
§ China
§ Africa
· Milk
5、自定义列表
本例演示一个定义列表。
源文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT培训网(www.itpxw.cn)</title>
</head>
<body>
<h4>一个自定义列表：</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
运行结果：
一个自定义列表：
Coffee
- black hot drink
Milk
- white cold drink
其实学习html列表很简单，只需要记住html列表的标签就可以了，使用的时候搭配着来，相信大家都可以做出漂亮的html列表出来。如果你想要做出一个好看的html列表，赶紧联系老师吧！