html标签笔记-列表

77 阅读 0 评论 51 点赞

我是靠谱客的博主老迟到大门，最近开发中收集的这篇文章主要介绍html标签笔记-列表，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

无序列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			无序列表: 不尊需一定的顺序
			每组列表都是被ul进行管理,li叫列表项, ul只能包含li标签,li里面可以包含其他的任何标签
		-->
		本店销售的商品有
		<ul>
			<li>苹果</li>
			<li>鸭梨</li>
			<li>橘子</li>
			<li>橙子</li>
			<li>
				<h1>下号</h1>
			</li>
		</ul>
	</body>
</html>

在这里插入图片描述

有序列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			有序列表:尊需一定的顺序.
			被一组ol进行管理,ol只能包含li,li可以包含其他标签
		-->
		本店水果销售排行榜
		<ol>
			<li>iPhone4</li>
			<li>iPhone5</li>
			<li>iPhone6</li>
			<li>iPhone7</li>
			<li>iPhone8</li>
		</ol>
	</body>
</html>

在这里插入图片描述
3. 自定义列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			自定义列表:
			是被一组dl管理,dl只能包含dt和dd,dt和dd可以包含其他的标签
		-->
		
		<dl>
			<dt>
				<h1>中国</h1>
			</dt>
			<dd>
				<strong>北京</strong>
			</dd>
			<dd>呵呵呵</dd>
			<dd>试试</dd>
			<dd>快看看</dd>
			<dt>阿卡卡</dt>
			<dd>看卡</dd>
			<dd>卡卡卡</dd>
			<dd>斯是陋室</dd>
			<dd>海慧寺</dd>
		</dl>
		<dl>
			<dt>赖赖</dt>
烫头			<dd>大阪</dd>
			<dd>一样</dd>
			
		</dl>
	</body>
</html>

在这里插入图片描述