024_html列表

最新推荐文章于 2024-05-03 03:40:32 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-05-03 03:40:32 发布

阅读量105

点赞数

分类专栏： html学习

本文链接：https://blog.csdn.net/aihiao/article/details/108977475

版权

html学习专栏收录该内容

89 篇文章 2 订阅

订阅专栏

1. html支持有序、无序和定义列表

2. 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

3. 无序列表

3.1. <ul>标签定义无序列表。

3.2. <li>标签定义列表项目。

3.3. <li>标签可用在有序列表(<ol>)和无序列表(<ul>)中。

3.4. 无序列表始于<ul>标签。每个列表项始于<li>。

3.5. 可能的属性

3.6. 例子

3.6.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>无序列表</title>	
	</head>

	<body>
		<h4>Disc项目符号列表:</h4>
		<ul type="disc">
		 	<li>苹果</li>
		 	<li>香蕉</li>
		 	<li>柠檬</li>
		 	<li>桔子</li>
		</ul>  

		<h4>Circle项目符号列表:</h4>
		<ul type="circle">
		 	<li>苹果</li>
		 	<li>香蕉</li>
		 	<li>柠檬</li>
		 	<li>桔子</li>
		</ul>  

		<h4>Square项目符号列表:</h4>
		<ul type="square">
		 	<li>苹果</li>
		 	<li>香蕉</li>
		 	<li>柠檬</li>
		 	<li>桔子</li>
		</ul>  
	</body>
</html>

3.6.2. 效果图

4. 有序列表

4.1. <ol>标签定义有序列表。

4.2. 有序列表始于<ol>标签。每个列表项始于<li>标签。

4.3. 可能的属性

4.4. 例子

4.4.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>有序列表</title>
	</head>

	<body>
		<h4>数字列表:</h4>
		<ol>
		 	<li>苹果</li>
		 	<li>香蕉</li>
		 	<li>柠檬</li>
		 	<li>桔子</li>
		</ol>  

		<h4>字母列表:</h4>
		<ol type="A">
		 	<li>苹果</li>
		 	<li>香蕉</li>
			<li>柠檬</li>
			<li>桔子</li>
		</ol>  

		<h4>小写字母列表:</h4>
		<ol type="a">
			<li>苹果</li>
		 	<li>香蕉</li>
		 	<li>柠檬</li>
		 	<li>桔子</li>
		</ol>  

		<h4>罗马字母列表:</h4>
		<ol type="I">
		 	<li>苹果</li>
		 	<li>香蕉</li>
		 	<li>柠檬</li>
		 	<li>桔子</li>
		</ol>  

		<h4>小写罗马字母列表:</h4>
		<ol type="i">
		 	<li>苹果</li>
		 	<li>香蕉</li>
		 	<li>柠檬</li>
		 	<li>桔子</li>
		</ol>  
	</body>
</html>

4.4.2. 效果图

5. 定义列表

5.1. <dl>标签定义了定义列表。

5.2. <dt>标签定义了定义列表中的项目(即术语部分)。

5.3. <dd>在定义列表中定义条目的定义部分。

5.4. 例子

5.4.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>定义列表</title>
	</head>

	<body>
		<h2>一个定义列表:</h2>
		<dl>
			<dt>计算机</dt>
		   	<dd>用来计算的仪器 ... ...</dd>
		   	<dt>显示器</dt>
		   	<dd>以视觉方式显示信息的装置 ... ...</dd>
		</dl>
	</body>
</html>

5.4.2. 效果图