整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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，我们一起飞！
篇介绍了html 中文本格式及段落等标签，今天说下列表，什么是列表？它就是一种数据排列方式，以条列式的方式显示文本，使读者一目了然。列表主要有以下三种：
无序列表在每行开始位置显示一个符号，语法如下：
<html>
<body>
<h4>一个无序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>显示效果：
无序列表的符号可以通过在ul 标签上设置 type 属性显示不同的符号，比如：
1、disc —— 实心圆点 (默认类型)
2、circle —— 空心圆圈
3、square —— 实心方块
实例代码：
<html>
<body>
<h4>一个无序列表：</h4>
<ul type="disc">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<h4>一个无序列表：</h4>
<ul type="circle">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<h4>一个无序列表：</h4>
<ul type="square">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>显示效果：
有序列表使用数字或字母符号排列，表示文本按一定顺序显示，语法如下：
<!DOCTYPE html>
<html>
<body>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>效果如下：
同无序列表一样，在ol上通过type 属性设置使用那种符号表示顺序，有以下几种：
1、1，表示数字 1、2、3..... （默认数字）
2、a，表示小写字母 a、b、c....
3、A，表示大写字母 A、B、C ....
4、i，表示小写罗马字母 i、ii、iii、iv....
5、I，表示大写罗马字母 I、II、III、IV....
显示效果如下：
html代码：
<!DOCTYPE html>
<html>
<body>
数字
<ol type="1">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
小写字母
<ol type="a">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
大写字母
<ol type="A">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
小写罗马字母
<ol type="i">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
大写罗马字母
<ol type="I">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>有序列表还可以通过start 属性设置起始数组，如下：
<ol start="3">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>显示效果：
不同以上2种列表，定义列表主要用来解释名词，由2种层次列表显示，第一层是被解释的名词，第二层是详细地解释文字，语法如下：
<html>
<body>
<h2>一个定义列表：</h2>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>
显示效果：
第一行<dt>是要解释的名词，第二行标签<dd>是解释文本，会自动缩进。
以上三种列表是可以嵌套使用的，看如下示例：
<html>
<body>
<h4>一个嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>效果：
每嵌套一层，它的符号是不一样的，你可以试试再嵌套一层看看效果。
当然，不同列表类型也可互相嵌套，根据显示效果可以自由使用，一般建议不要这样使用，不同类型列表显示在一块不是很美观。如下面无序列表中嵌套有序列表：
<html>
<body>
<h4>一个嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ol>
<li>中国茶</li>
<li>非洲茶</li>
</ol>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>效果如下：
列表是网页制作中经常会使用的标签，比如在制作网页导航栏菜单时会经常用到ul列表，以后会讲如何通过ul标签制作一个下拉菜单，感谢您阅读及关注，祝你学习愉快。
上篇：前端入门——html 文字格式、标题与段落
下篇：前端入门——html 超链接
序列表
经过之前关于表格、表单的学习后，再来学习列表，就显得非常的简单和容易理解了。
学习是构建知识体系的过程，没有形成体系的知识学习再多也是碎片，是很难形成技能或深刻理解的，因此，如果您是零基础的初学者，第一次看我的教程，如果时间允许的话，请务必从目录中找寻第一篇，循序渐进的学习。
列表分为有序列表、无序列表和定义列表，同时列表之中还能嵌套列表，和表格非常相似。
首先介绍有序列表
要用<ol></ol>标签告诉浏览器这里是列表。
然后在里面添加<li></li>标签，在这个标签中添加内容即可。
示例代码如下
<p>我喜欢的水果</p>
<ol>
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ol>大家可以把它放到一个新的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>标签中的type属性我们可以改变序号显示的样式，默认的是数字，大家看一下不同的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>页面效果如下：
下面给大家介绍一下搜狗输入法中如何输入罗马数字。
step1.点击"输入方式"
step2.点击"特殊符号"后选择数字序号，找到罗马数字即可
除此之外我们还可以使用CSS的方法为有序列表的序号提供更多样式。在<ol>标签中修改style属性可以直接调用这些css中的属性。写法是style="list-style-type:属性值；"
示例代码如下：(使用日语中的片假名表示序号)
<ol style="list-style-type:hiragana;">
<li>葡萄</li>
<li>西瓜</li>
<li>苹果</li>
<li>桃子</li>
</ol>页面效果如图所示：
是不是很有趣，这里的测试就不一一做了。为大家奉上list-style-type的值的列表与说明，大家自己课下去尝试，这个列表中既有有序列表的值也有无序列表的值。
如图：
资料来自w3school
无序列表
无序列表与有序列表的区别在于最外层的标签，它的写法是这样的：<ul></ul>。
有一个记忆的小技巧，有序的英文是order，故有序列表为order list（列表），缩写为ol。
无序为unorder，无序列表为unorder list，缩写为ul。
无序列表<ul>标签的type属性用来控制列表前的标记显示演示。
示例代码如下：
<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>页面效果如下：
通过图片我们可知，无序列表默认的列表标识就是type="disc"。
style属性的话大家自己试试吧，这里就不啰嗦了。
定义列表
这个列表比较特殊，也比较不常见，主要就是显示名词定义的。
首先要写入<dl></dl>标签。这是告诉浏览器这里是个定义列表，和<ol>或<ul>一样。
定义的英文是definition，定义列表就是definition list，缩写是dl。
下面在<dl></dl>标签中间写入定义的名称<dt></dt>,即definition title（标题）。
与定义名称标签并列的是定义描述<dd></dd>,即definition describe（描述）。
示例代码如下：
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>页面效果如下：
今天的内容结束了！
列表嵌套列表的测试大家自己试试吧，学到现在，相信你们都可以完成了！
如果您喜欢我的教程请关注我，点赞也能让我充满动力！
如果您有任何疑问请给我留言，如有问题或错误请予以斧正！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
*请认真填写需求信息，我们会在24小时内与您取得联系。
