当前位置 : IT培训网 > Web前端 > Web教程 > html列表有哪些

html列表有哪些

时间：2016-11-28 11:46:08  来源：web前端培训网  作者：IT培训网  已有：名学员访问该课程
标签(Tag):   IT培训(390)html列表(5)
其实学习html列表很简单，只需要记住html列表的标签就可以了，使用的时候搭配着来，相信大家都可以做出漂亮的html列表出来。如果你想要做出一个好看的html列表，赶紧联系老师吧！

列表也是有区分的，目前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列表，赶紧联系老师吧！

顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
分享到：QQ空间新浪微博腾讯微博人人网微信
------分隔线----------------------------

大话IT

Web 教程
1、HTML 教程
1.1 HTML 简介
1.2 HTML 编辑器
1.3 HTML 基础
1.4 HTML 元素
1.5 HTML 属性
1.6 HTML 标题
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 链接
1.10 HTML 头部
1.11 HTML CSS
1.12 HTML 图像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 区块
1.16 HTML 布局
1.17 HTML 表单
1.18 HTML 框架
1.19 HTML 颜色
1.20 HTML 颜色名
1.21 HTML 颜色值
1.22 HTML 脚本
1.23 HTML 字符实体
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 总结
1.27 HTML 简介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 浏览器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 内联 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(视频)
2.10 HTML5 Audio(音频)
2.11 HTML5 Input 类型
2.12 HTML5 表单元素
2.13 HTML5 表单属性
2.14 HTML5 语义元素
2.15 HTML5 Web 存储
2.16 HTML5 Web SQL
2.17 HTML5 应用程序缓存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代码规范
3、HTML 媒体
3.1 HTML 媒体(Media)
3.2 HTML 插件
3.3 HTML 音频(Audio)
3.4 HTML视频（Videos）播放