HTML-2.2 列表--无序列表、有序列表、定义列表

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

系列文章目录

HTML-1.1 文本字体样式-字体设置、分割线、段落标签、段内回车以及特殊符号

HTML-2.1 文本字体样式之加粗、斜体、回车、下划线、上标标签、下标标签以及字号变小和变大

HTML-2.2 列表--无序列表、有序列表、定义列表

HTML-2.3 超链接-外部链接，内部链接，书签链接

HTML-2.4 滚动字幕marquee

HTML-3.1 表格table

HTML-3.2 表格的跨行跨列（课表制作实例）

HTML中应用CSS样式的三种常见方法

HTML-3.3 表格布局（学校官网简易布局实例）

HTML-3.4 表单form

HTML-实战之百度百科（影视剧介绍）

系列文章目录

一、简单分析

1、无序列表

（1）无序列表ul 小项li 属性type

（2）无序列表嵌套

2、有序列表ol 小项li 属性type start

3、定义列表dl 定义项dt 具体说明dd

二、代码块

总结

一、简单分析

1、无序列表

（1）无序列表ul 小项li 属性type

      <ul type="square"><li>网络工程</li><li type="circle">数字媒体专业</li><li>应用统计</li><li>应用数学</li></ul>

代码运行：

（2）无序列表嵌套

        <ul><li>计算机方向<ul><li>网络工程<ul><li>111111</li><li>111111</li><li>111111</li></ul></li><li type="circle">数字媒体专业</li></ul></li><li>数学方向<ul><li>应用统计</li><li>应用数学</li></ul></li></ul>

代码运行

2、有序列表ol 小项li 属性type start

      <ol type="A" start="4"><li>网络工程</li><li type="circle">数字媒体专业</li><li>应用统计</li><li>应用数学<ul><li>应用统计</li><li>应用数学</li></ul></li></ol>

代码运行

3、定义列表dl 定义项dt 具体说明dd

        <dl><dt>姓名：</dt><dd>张三</dd></dl>

代码运行

二、代码块

HTML代码块如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列表--无序列表，有序列表，定义列表</title></head><body><!-- 1.无序列表ul 小项li 属性type --><ul type="square"><li>网络工程</li><li type="circle">数字媒体专业</li><li>应用统计</li><li>应用数学</li></ul><!-- 二级标题 嵌套 --><!-- ul>li*2 按tab --><ul><li>计算机方向<ul><li>网络工程<ul><li>111111</li><li>111111</li><li>111111</li></ul></li><li type="circle">数字媒体专业</li></ul></li><li>数学方向<ul><li>应用统计</li><li>应用数学</li></ul></li></ul><!-- 2.有序列表ol 小项li 属性type start --><ol type="A" start="4"><li>网络工程</li><li type="circle">数字媒体专业</li><li>应用统计</li><li>应用数学<ul><li>应用统计</li><li>应用数学</li></ul></li></ol><!-- 3.定义列表dl 定义项dt 具体说明dd --><dl><dt>姓名：</dt><dd>张三</dd></dl><!-- <a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a>  --></body>
</html>

代码运行：