HTML列表详解

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 < ul > < li >标签

实例

代码:

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul> 
           

效果

多级无序列表

代码实例

<ul>
	<li>一级1</li>
	<li>一级2</li>
	<li>一级3
	<ul>
		<li>二级1</li>
		<li>二级2</li>
	</ul>
	</li>
	<li>一级4
	<ul>
		<li>二级3</li>
		<li>二级4</li>
		<li>二级5
		<ul>
			<li>三级1</li>
			<li>三级2</li>
		</ul>
		</li>
	</ul>
	</li>
</ul> 
           

修改小圆点

修改无序列表的Type属性

disc(实心圆) square(实心方块) circle(空心圆) none(去除)是type四个值

实例

代码

<ul type="circle">
	<li>一级1</li>
	<li>一级2</li>
	<li>一级3
	<ul type="square">
		<li>二级1</li>
		<li>二级2</li>
	</ul>
	</li>
	<li>一级4
	<ul type="disc">
		<li>二级3</li>
		<li>二级4</li>
		<li>二级5
		<ul>
			<li>三级1</li>
			<li>三级2</li>
		</ul>
		</li>
	</ul>
	</li>
</ul> 
           

效果

HTML有序列表

1. 标签定义了一个有序列表. 列表排序以数字来显示。

属性	值	描述
compact	compact	HTML5中不支持，不赞成使用。请使用样式取代它。 规定列表呈现的效果比正常情况更小巧。
reversed	reversed	指定列表倒序(9,8,7…)
start	number	HTML5不支持，不赞成使用。请使用样式取代它。 规定列表中的起始点。
type	1 A a I none	i 规定列表的类型。不赞成使用。请使用样式代替。

实例

<ol type="1">
	<li>一级1</li>
	<li>一级2</li>
	<li>一级3
	<ol type="A">
		<li>二级1</li>
		<li>二级2</li>
	</ol>
	</li>
	<li>一级4
	<ol type="Ⅰ" reversed="reversed">
		<li>二级3</li>
		<li>二级4</li>
		<li>二级5
		<ol type="i">
			<li>三级1</li>
			<li>三级2</li>
		</ol>
		</li>
	</ol>
	</li>
</ol> 
           

HTML自定义列表

标签定义一个描述列表。

标签与 （定义项目/名字）和

（描述每一个项目/名字）一起使用。 实例 代码:

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
           

效果