1
无序列表中每一个表项的前面是项目符号（如■ 、 ● 等）。
建立无序列表使用<UL>标记和<LI>表项标记。格式为：
<UL type=符号类型>
<LI type=符号类型>第一个列表项
<LI type=符号类型>第二个列表项
……
……
</UL>
2
<LI>标记：是单标记，即一个表项的开始，就是前一个表
项的结束。
Type： 指定每个表项左端的符号类型，可为
disc（实心圆点●）、
circle（空心圆点○）、
square（方块□），
还可以自己设置图片，
如<LI img src=mygraph.gif>默认为实心圆点。
3
例 无序列表标记的使用
<HTML>
<HEAD>
<TITLE>无序列表标记的使用</TITLE>
</HEAD>
<BODY>
<FONT size=4>网络的拓扑结构</FONT>
<UL>
<LI>总线结构
<LI type="circle">星型结构
<LI type="square">环型结构
</UL>
</BODY>
</HTML>
4
有序列表
使用<OL>标记可以建立有序列表，表项的标记仍为LI，格式为：
<OL type=符号类型>
<LI type=符号类型>第一个表项
<LI type=符号类型>第二个表项
……
……
</OL>
5
type属性可设定5种序号：
数字（type=1）、
大写英文字母（type=A）、
小写英文字母（type=a）、
大写罗马字母（type=I）、
小写罗马字母（type=i），
缺省的序号标记是数字。
6
例 有序列表标记的使用
<HTML>
<HEAD>
<TITLE>有序列表标记的使用</TITLE>
</HEAD>
<BODY>
通过拨号网络连接Internet的步骤
<OL>
<LI>安装调制解调器
<LI>创建拨号连接
<LI type="A">设置拨号网络
<LI type="i">设置拨号网络
</OL>
</BODY>
</HTML>
7
列表的嵌套
列表嵌套能将制作的网页页面分割为多层次，比如图书的目录，让人觉得有很强的层次感。有序列表和无序列表不仅能自身嵌套，而且也能互相嵌套。
8
无序列表中套无序列表
9
有序列表中套无序列表
END
注意事项
注意一般不采用无序列表嵌套有序列表
采用无序列表还是有序列表取决于目录的性质与数量
1.编辑器（指 部分代码块被隐藏）：您可能对您的编辑器进行了相关设置。解决办法：调整设置 或 点击编辑区左侧的隐藏／显示符号
2.浏览器（指 父元素过小导致子元素无法正常显示）：＜ul＞是 块元素，宽、高小于所需最小值都会导致其内的元素无法正常显示。
解决办法：
＜style＞
ul{display:blockwidth:autoheight:auto}
＜／style＞
也可尝试将width和height设为较大值以解决此问题
Html中列表共有三种：有序列表、无序列表和自定义列表。下面分开解释下：
1.有序列表是一列使用数字进行标记的项目，它使用<li>包含于<ol>标签内。示例如下：
执行效果为：1.语文
2.数学
3.体育
4.英语
有序列表在当列表项目的每个列表项目前面需要一个递增值得时候使用（例如1,2，3等）。有序列表的列表类型list-style-type可以被设置为任何在无序列表下可以设置的值。大部分情况下，有序列表要么前面是个递增数值，要么前面没有任何标记。
2.无序列表：是一组使用黑点庄进行标记的项目，它使用<li>包含在<ul>标签内；
实现的效果：
无序列表的一些特定的css属性有list-style-type,list-style-position和list-style-image.这些睡在那个设置了列表项目符号的类型，标记的位置，以及使用图片代替标记。这三个属性可以使用list-style进行合并缩写。
3.定义列表：语义上表示项目及其注释的组合，它以<dl>标签开始，自定义列表以<dt>开始，自定义列表项的定义以<dd>开始。实例如下：
效果如下：
注意：可以在单个dd下面使用多个dt，也可以在单个dt下面使用多个dd。
从语义上来讲，三组标签分别对应不同具有含义的列表：无序列表适合元素之间无级别顺序关系的情形；有序列表适合各项目之间存在顺序关系的情形；定义列表用于一个术语名对应多重定义或者多个术语名同一个给出的定义，也可以只有术语名称或只有定义，即<dt>与<dd>在其中数量不限，对应关系不限。
列表中的CSS：
列表最重要的CSS属性便是list-style属性，他的语法如下：
list-style:list-style-image||list-style-position||list-style-type
list-style-image可定义列表前所使用图片，list-style-position属性取值含outside、insideoutside为默认值，列表项目标记此时被放置在文本之外，它将环绕文本在文本之外，inside列表项目旋转在文本之内，环绕文本对齐。示例如下：
执行效果如下：
list-style-type我列表显示乐行，常见的9种属性值：a.disc：默认值，实心圆；b.circle:空心圆；c.square:实心方块；d.decimal:阿拉伯数字；e.lower-roman:小写罗马数字；f：upper-roman:大写罗马数字；g.lower-alpha:小写英文字母；h.upper-alpha:大写英文字母；i.none:不适用项目符号
列表之间的嵌套： 在Html里允许在一个列表里嵌套另一个列表，每个嵌套的列表都会再一次以缩进形式显示，但不建议对列表进行多次嵌套，这样在浏览器的显示会有点乱。在HTML中，无序列表中除了可以嵌套无序列表，也可以嵌套有序列表，反之亦然。示例如下：
执行效果：
参考：
1. 关于html中的列表 - walkingp - 博客园
2. html之列表 - 郑志伟 - 博客园
3. CSS有序列表无序列表嵌套冲突问题测试实例页面
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）