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

一、ul无序列表定义

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

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

         <ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

二、无序列表项目符号

type="disc"    实心圆

type="circle"   空心圆

type="square"    方块符

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

<ul>

  <li>咖啡</li>

  <li>茶

    <ul>

    <li>红茶</li>

    <li>绿茶</li>

    </ul>

  </li>

 

</ul>

 

一、ol有序列表定义

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

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

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

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

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

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

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

三、有序列表的嵌套

<ol>

  <li>咖啡</li>

  <li>茶

    <ul>

    <li>红茶</li>

    <li>绿茶</li>

    </ul>

  </li>

 

</ol>

 

一、dl定义列有的含义

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

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

 

结构:

 

<dl>

   <dt>苹果手机</dt>

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

   <dt>58同城</dt>

   <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>

 

你可能感兴趣的:(html,Web,css,前端开发)