HTML的列表标签

HTML的列表标签

HTML中的列表标签主要是分为三大类,分别为:有序列表,无序列表和自定义列表;
此次内容对而言比较简单,
源代码如下:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>列表</title>
		<meta name="keywords" content="无序,有序,自定义">
		<meta name="descrption" content="今天讲的是列表">
		<!-- 样式, 让页面变美的地方 -->
		<style type="text/css">
			li{
				/* list-style:none; */  /* 这个是设置后边列表中的序号为空 */
			}
		</style>
	</head>
	<body>
		<!--列表
			无序列表
				ul>li  ul的子集一定是li 其他的可以嵌套在li中
				li代表列表项
				ul 自带外边距,内边距
			有序列表
			自定义列表
		-->
		这是一<br/> <!--  br是换行标签,其中斜杠可以在前可以在后,也可以不写 -->
		这是一<br/>
		这是一<br/>
		<!-- 标签特性:ul外边距,内边距
		属性:
			type:列表样式
				disc“实心圆(默认)
				cricle:空心圆
				square:方块
		使用场景:通常用于导航,菜单,列表等布局 -->
		<ul type="circle" style="font-size:20px;"> <!-- type和style都是属性,属性之间用空格隔开,font(是)size(大小) -->
			<li type="disc">这是一</li>
			<li>这是二</li>
			<li>
				<b>这是三</b>
			</li>
		</ul>
		
		<!-- 属性:
			type:列表样式
				a:字母
				1:数字
				i:罗马数字
		使用场景:使用较少,可用于目录等 -->
		<ol type="a">
			<li><b>我是一</b></li>
			<li>我是二</li>
			<li>我是三</li>
			<li>这是四</li>
		</ol>

		<!-- 
		自定义列表
		标签特性:dl默认边距,dd默认外边距
		属性:
			type:列表样式
				disc:实心圆(默认)
				cricle:空心圆
				square:方块
		使用场景:常用与上下(左右)的图文区域布局,标题-内容区块 -->
		<dl>
			<dt>谷某人</dt> <!-- 会向右靠齐 类似标题-->
			<dd>谷某人毕业于天津中德应用技术大学</dd><!-- 首行缩进两个字符 -->
		</dl>
	</body>
</html>

制成网页如下:
在这里插入图片描述
总而言之,在今后的运用中,根据事实情况而言来选择不同的列表方式。

猜你喜欢

转载自blog.csdn.net/g960526/article/details/88784915