经由之前关于表格、表单的学习后，再来学习列表，就显得非常的大略和随意马虎理解了。
学习是构建知识体系的过程，没有形成体系的知识学习再多也是碎片，是很难形成技能或深刻理解的，因此，如果您是零根本的初学者，第一次看我的教程，如果韶光许可的话，请务必从目录中找寻第一篇，循规蹈矩的学习。
列表分为有序列表、无序列表和定义列表，同时列表之中还能嵌套列表，和表格非常相似。
首先先容有序列表
要用<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>标签实现文本内链接——零根本自学网页制作
