散人研Blog
不学无术的前端工程师

HTML | 三种列表标签(列表嵌套)

无序列表

HTML中的无序列表基本结构为<ul><li>内容<li/><li>内容</li></ul>。其中每一对<li>包含一行内容。

<ul>
	<li>我有一杯酒</li>
	<li>足以慰风尘</li>
	<li>千杯不解饮</li>
	<li>万杯苦沉沦</li>
</ul>

无序列表具有type属性,值有disc、square、circle。其中disc代表黑点、square代表实心方形,circle代表空心圆圈。

有序列表

HTML中有序列表与无序列表相似,结构为<ol><li></li><li></li></ol>。其中每一对<li>包含一行内容。

<ol>
	<li>我有一杯酒</li>
	<li>足以慰风尘</li>
	<li>千杯不解饮</li>
	<li>万杯苦沉沦</li>
</ol>	

有序列表具有type属性,值有1、A、a、i、I,代表不同的计数方式。

有序列表具有start属性,值为数字,规定有序列表的起始值。

有序列表具有reversed属性,值为reversed,可以使符号倒序。

定义列表

定义列表有<dl></dl>、<dt></dt>、<dd></dd>标签共同组合完成,其中<dl>为最外层标签,不可以省略!<dt>为项目标签,可以使具体的名字。<dd>内放的是对<dt>的描述。

	<dl>
		<dt>河南大学</dt>
		<dd>地点是开封</dd>
		<dd>是一所历史悠久的大学</dd>
		<dt>清华大学</dt>
		<dd>地点是北京</dd>
		<dd>中国最优秀的大学之一</dd>
	</dl>	

列表嵌套

在列表中通过列表嵌套,可以实现如下结构:

具体代码如下所示,要注意,嵌套列表时,被嵌套的列表标签与外列表内容同级。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>千峰大食堂</h2>
		<ul>
			<li>卤肉菜
				<ul>
					<li>卤鸡肉</li>
					<li>卤鸭肉</li>
					<li>卤牛肉</li>
				</ul>
			</li>
			<li>
				盖浇饭
				<ul>
					<li>西红柿鸡蛋</li>
					<li>小炒肉</li>
					<li>鱼香肉丝</li>
				</ul>
			</li>
			<li>炒菜
				<ul>
					<li>蒜薹炒肉</li>
					<li>宫保鸡丁</li>
					<li>烧茄子</li>
				</ul>
			</li>
			<li>饮品
				<ul>
					<li>蜂蜜柚子茶</li>
					<li>冰糖雪梨</li>
					<li>可口可乐</li>
				</ul>
			</li>
		</ul>
	</body>
</html>
赞(2) 打赏
未经允许不得转载:散人研Blog » HTML | 三种列表标签(列表嵌套)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

只要五角钱,我就可以买一包辣条!

支付宝扫一扫打赏

微信扫一扫打赏