HTML列表

最新推荐文章于 2024-04-19 12:54:59 发布

原创最新推荐文章于 2024-04-19 12:54:59 发布 · 3w 阅读

7 ·

CC 4.0 BY-SA版权

CSDN_Qayrup

文章标签：

#html #html5 #css #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有序列表

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

属性	值	描述
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>

效果
在这里插入图片描述