Sumlime编写html中的列表标签

最新推荐文章于 2024-07-12 20:49:16 发布

小白成长札记

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量127

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_45734905/article/details/130114711

版权

本次介绍主要包含三部分，分别是无序列表、有序列表和自定义列表。为了方便大家理解，我在代码注释中对他们进行了详细的介绍和分别举例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>列表标签</title>
</head>
<body>
	<!-- 
		ul全称unordered list 无序列表；(ul里面只能是li)
		块级元素，独立成行，可以设置宽高
		type属性：
		---- disc  黑心圆点（默认） ---circle 空心圆圈  --square 黑心方块 --none  无样式

		li：list item ；li里面可以嵌套其他标签，
		块级元素，独立成行，可以设置宽高
	 -->
	<ul style="height:300px; width:300px; background-color:greenyellow;" type="circle">
		
			<li style="height:100px; width:200px; background-color: deeppink;">王者荣耀</li>
			<li>英雄联盟</li>
			<li>金铲铲</li>

	</ul>
			<ul  type="none">	
			<li >王者荣耀</li>
			<li>英雄联盟</li>
			<li>金铲铲</li>

	</ul>
			<ul type="square">
				<li>长跑</li>
				<li>田径</li>
	</ul>
	        <ul type="disc">
				<li>beijign</li>
				<li>篮球</li>
			</ul>

	<!-- 	有序列表
			ol：orderedn list 有序列表；ol里面只能是li
			li：list item li里面可以嵌套其他标签，
			type:
			--1 默认值
			--a
			--A
			--i
			--I 罗马数字
	-->

	<ol type="a" >
		<li>张三</li>
		<li>李四</li>
		<li>王五</li>

	</ol>
		<ol type="A" >
		<li>张三</li>
		<li>李四</li>
		<li>王五</li>

	</ol>
		<ol type="i" >
			<li>里斯</li>
			<li>wangwu</li>
			<li>杜甫</li>
		</ol>
		<ol type="I">
			<li>丽萨</li>
			<li>八嘎</li>
			<li>萨瓦迪卡</li>
		</ol>

	<!-- 自定义列表
			dl:definition list  自定义列表
			--dt:自定义列表的标题
			--dd:自定义列表的描述
			标签使用规则与ul相似；dt和dd不能单独使用，父级必须是dl
	 -->
	 <dl>
	 		<dt>山东省</dt>
			<dd>济南</dd>
			<dd>青岛</dd>
			<dd>烟台</dd>
			<dd>威海</dd>

			<dt>河南</dt>
			<dd>开封</dd>
			<dd>洛阳</dd>
	 </dl>
</body>
</html>

列表相对来说还是很简单的。