HTML学习之列表

最新推荐文章于 2022-11-01 16:21:33 发布

Gsdxiaohei

最新推荐文章于 2022-11-01 16:21:33 发布

阅读量352

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/Gsdxiaohei/article/details/82191382

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

①列表标签

HTML列表标签
标签	意义
dd	定义定义的描述
dl	定义定义列表
dt	定义定义项目
li	定义列表项
ol	定义有序列表
ul	定义无序列表

②无序列表

<!DOCTYPE html>
<html>
<body>
	<p>这是一个无序列表</p>
	<ul>
		<li>C++</li>
		<li>Python</li>
		<li>HTML</li>
	</ul>
</body>
</html>

③有序列表

<!DOCTYPE html>
<html>
<body>
	<p>这是一个有序列表</p>
	<ol>
		<li>C++</li>
		<li>Python</li>
		<li>HTML</li>
	</ol>
	<p>可以自己设置开始的序号</p>
	<ol start="100">
		<li>C++</li>
		<li>Python</li>
		<li>HTML</li>
	</ol>
</body>
</html>

④定义列表

定义列表是列表项和列表项注释的组合：

<!DOCTYPE html>
<html>
<body>
	<p>这是一个定义列表</p>
	<dl>
		<dt>饕餮之徒</dt>
		<dd>(tāo tiè zhī tú)比喻贪吃的人。</dd>
		<dt>羽扇纶巾</dt>
		<dd>(yǔ shàn guān jīn)拿着羽毛扇子，戴着青丝绶的头巾。形容态度从容。</dd>
	</dl>
</body>
</html>

不管是什么列表，列表项也可以为一个链接，图片等。

⑤通过type属性改变列表样式

<html>
<body>
	<p>不同样式的无序列表</p>
	
	<p>"disc"</p>	
	<ul type="disc">
 	<li>C++</li>
 	<li>Python</li>
 	<li>HTML</li>
	</ul>  

	<p>"circle"</p>	
	<ul type="circle">
 	<li>C++</li>
 	<li>Python</li>
 	<li>HTML</li>
	</ul>  

	<p>"square"</p>	
	<ul type="square">
 	<li>C++</li>
 	<li>Python</li>
 	<li>HTML</li>
	</ul>  
</body>
</html>

<!DOCTYPE html>
<html>
<body>

	<p>不同样式的有序列表</p>
	
	<p>阿拉伯数字(默认)</p>
	<ol>
 	<li>C++</li>
	<li>Python</li>
 	<li>HTML</li>
	</ol>  

	<p>大写字母</p>
	<ol type="A">
 	<li>C++</li>
	<li>Python</li>
 	<li>HTML</li>
	</ol>
	
	<p>小写字母</p>
	<ol type="a">
 	<li>C++</li>
	<li>Python</li>
 	<li>HTML</li>
	</ol>
	
	<p>大写罗马字母</p>
	<ol type="I">
 	<li>C++</li>
	<li>Python</li>
 	<li>HTML</li>
	</ol>

	<p>小写罗马字母</p>
	<ol type="i">
 	<li>C++</li>
	<li>Python</li>
 	<li>HTML</li>
	</ol>
</body>
</html>

⑥嵌套

<!DOCTYPE html>
<html>
<body>
	<p>这是一个嵌套列表</p>
	<ul>
		<li>C++
		<ul>
			<li>支持数据封装和数据隐藏</li>
			<li>支持继承和重用</li>
			<li>支持多态性</li>
		</ul>
		</li>
		<li>Python
		<ul>
			<li>优雅</li>
			<li>明确</li>
			<li>简单</li>
		</ul>
		</li>
		<li>HTML
		<ul>
			<li>简易</li>
			<li>可拓展</li>
			<li>平台无关</li>
		</ul>
		</li>	
	</ul>
</body>
</html>