013-HTML-列表

最新推荐文章于 2024-05-06 10:59:29 发布

天又热了

最新推荐文章于 2024-05-06 10:59:29 发布

阅读量118

点赞数

分类专栏： HTML 文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_43404791/article/details/122874629

版权

HTML 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!--
	HTML列表
		HTML支持有序,无序和定义列表
	在线实例
		无序列表
			本例演示无序列表
		有序列表
			本例演示有序列表
	HTML无序列表
		无序列表是一个项目的列表,
		此列项目使用粗体圆点(典型的小黑圆圈)进行标记
		无序列表使用<ul>标签
		<ul>
			<li>Coffee</li>
			<li>Milk</li>
		</ul>
	HTML有序列表
		同样,有序列表也是一列项目,列表项目使用数字进行标记.
		有序列表始于<ol>标签,每个列表项始于<li>标签
		列表项使用数字来标记
		<ol>
			<li>Coffee</li>
			<li>Milk</li>
		</ol>
	HTML自定义列表
		自定义列表不仅仅是一列项目,而是项目及其注释的组合
		自定义列表以<dl>标签开始,每个自定义列表项以<dt>开始,
		每个自定义列表项以<dt>开始.每个自定义列表的定义以<dd>开始
	注意事项-有用提示
		提示:列表项的内部可以使用段落,换行符,图片,链接以及其他列表等
	更多实例
		不同类型的有序列表
		不同类型的无序列表
		嵌套列表
	HTML 列表标签
		<ol>-定义有序列表
		<ul>-定义无序列表
		<li>-定义列表项
		<dl>-定义列表
		<dt>-自定义列表项目
		<dd>-定义自定义列表项的描述
	-->
	<body>
		<h4>无序列表</h4>
		<ul>
			<li>Coffee</li>
			<li>Tea</li>
			<li>Milk</li>
		</ul>
		<h4>有序列表</h4>
		<ol>
			<li>Coffer</li>
			<li>Tea</li>
			<li>Milk</li>
		</ol>
		<h4>自定义列表</h4>
		<dl>
			<dt>Coffee</dt>
			<dd>- black hot drink</dd>
			<dt>Milk</dt>
			<dd>- white cold drink</dd>
		</dl>
		<h4>编号列表</h4>
		<ol>
			<li>Apples</li>
			<li>Bananas</li>
			<li>Lemons</li>
			<li>Oranges</li>
		</ol>
		<h4>大写字母列表</h4>
		<ol type="A">
			<li>Apples</li>
			<li>Bananas</li>
			<li>Lemons</li>
			<li>Oranges</li>
		</ol>
		<h4>小写字母列表</h4>
		<ol type="a">
			<li>Apples</li>
			<li>Bananas</li>
			<li>Lemons</li>
			<li>Oranges</li>
		</ol>
		<h4>罗马数字列表</h4>
		<ol type="I">
			<li>Apples</li>
			<li>Bananas</li>
			<li>Lemons</li>
			<li>Oranges</li>
		</ol>
		<h4>小写罗马数字列表</h4>
		<ol type="i">
			<li>Apples</li>
			<li>Bananas</li>
			<li>Lemons</li>
			<li>Oranges</li>
		</ol>
		<p>注意:在HTML4中ul属性已经废弃,HTML5已经不支持该属性,
		因此我们使用CSS代替来定义不同类型的无序列表如下</p>
		<h4>圆点列表</h4>
		<ul style="list-style-type: disc;">
			<li>Apples</li>
			<li>Bananas</li>
			<li>Lemons</li>
			<li>Oranges</li>
		</ul>
		<h4>圆圈列表</h4>
		<ul style="list-style-type: circle;">
			<li>Apples</li>
			<li>Bananas</li>
			<li>Lemons</li>
			<li>Oranges</li>
		</ul>
		<h4>正方形列表</h4>
		<ul style="list-style-type: square;">
			<li>Apples</li>
			<li>Bananas</li>
			<li>Lemons</li>
			<li>Oranges</li>
		</ul>
		<h4>嵌套列表</h4>
		<ul>
			<li>Coffee</li>
			<li>Tea
				<ul>
					<li>Black tea</li>
						<ul>
							<li>China</li>
							<li>Africa</li>
						</ul>
					<li>Green tea</li>
				</ul>
			</li>
			<li>Milk</li>
		</ul>
	</body>
</html>

天又热了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
013-HTML-列表

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <!-- HTML列表 HTML支持有序,无序和定义列表在线实例无序列表本例演示无序列表有序列表本例演示有序列表 HTML无序列表无序列表是一个项目的列表, 此列项目使用粗体圆点(典型的小黑圆圈)进行标记
复制链接

扫一扫