第五章:三种列表知识详解

作者：2023面试高手 | 2024-03-28 08:24:13

踩

有序列表的项目符号有哪些

一、ul无序列表定义

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

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

<ul>

<li>Coffee</li>

</ul>

二、无序列表项目符号

type="disc" 实心圆

type="circle" 空心圆

type="square" 方块符

三、无序列表的嵌套 (li 放内容，标签，图片，链接)

<ul>

<li>茶

<ul>

</ul>

</li>

</ul>

一、ol有序列表定义

有序列表也是一列项目，列表项目使用数字进行标记。

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

<ol>

<li>Coffee</li>

</ol>

二、有序列表项目符号 <ol type="A"></ol>

type="A" A B C...序列号

type="a" a b c ...序列号

type="I" I II III...序列号

三、有序列表的嵌套

<ol>

<li>茶

<ul>

</ul>

</li>

</ol>

一、dl定义列有的含义

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

结构:

<dl>

<dd>这是一种用来装逼的通讯工具... ...</dd>

<dd>这是一个神奇的网站 ... ...</dd>

</dl>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
	<head>
	<!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8 国际编码-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!--当前页面的三要素-->
		<title>标题</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="描述">
		<!-- css js -->
		<style type="text/css">
			*{margin:0px;padding:0px;}
			ul.news li{height:30px; width:200px; line-height:30px; color:#666;font-size:12px; 
			border-bottom:1px solid #555;}
		</style>
	</head>
 
	<body>
		<!--无序列表:是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
		无序列表始于<ul>标签。每个列表项始于<li>-->
		<ul>
			<li type="circle">列表项一</li>
			<li type="square">列表项二</li>
			<li>列表项三</li>
		</ul>
		
		<ul>
			<li>茶
				<ul>
					<li>红茶</li>
					<li>绿茶</li>
					<li>列表项三</li>
				</ul>
			</li>
		</ul>
 
		<!--ol有序列表 type="A"    A B C...序列号 
			type="a"     a b c ...序列号
			type="I"     I  II III...序列号-->
		<ol type="a">
			<li>列表项一</li>
			<li>列表项二</li>
			<li>列表项三</li>
		</ol>
 
		<ol>
			<li>茶
				<ul>
					<li>红茶</li>
					<li>绿茶</li>
					<li>列表项三</li>
				</ul>
			</li>
		</ol>
 
		<!--dl 自定义列表 自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始-->
		<dl>
			<dt>苹果手机</dt>
			<dd>一种装逼的通讯工具</dd> <!--默认自动比dt缩进两个字符，用于对dt内容的解释说明-->
		</dl>
		
		<!--ul案例-->
		<ul class="news">
			<li>大众自造磁悬球形车</li>
			<li>传林心如领证</li>
			<li>穆加贝当众跌倒</li>
			<li>空难现场比剪刀手</li>
		<ul>
 
		<!--dl定义标签-->
		<dl>
			<dt><img src="1.jpg"/></dt>
			<dd>这是一个美女。。。</dd>
		</dl>
	</body>
</html>

JAVA技术交流群 532101200

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/328873