4、HTML非表单标签(三)

列表标签：

列表标签是用作与在页面上展示列表项而存在的，此列表不单单是文字列表，还可以在其中嵌套图像等。

列表标签分为：有序列表、无序列表、自定义列表。

特点：
	1、属于双标签
	2、列表标签的根标签为ol/ul/dl标签，列表项为li/dt/dd标签
	3、列表ol/ul/dl标签中只能嵌套列表项标签
	4、列表项标签中可以嵌套文本/图像
	5、有序/无序列表标签默认会有边距/项目符号等样式，若不需要，可以更改样式

有序列表：

格式：
	<ol>								//ol标签中，只能嵌套li标签，不允许嵌入其它标签
		<li> 列表项1 </li>				//li标签中通常嵌入文本或者图像，会在列表项前面自动加上编号
		<li> 列表项2 </li>
		<li> 列表项3 </li>
		...
	</ol>

	<ol>
		<li> 北京 </li>
		<li> 上海 </li>
		<li> 深圳 </li>
	</ol>
	<ol>
		<li> 
			<img src="xx/1.jpg"/> 
		</li>
		<li> 
			<img src="xx/2.jpg"/> 
		</li>
		<li> 
			<img src="xx/3.jpg"/> 
		</li>
	</ol>

结果类似于：
	1.北京
	2.上海
	3.深圳

无序列表：

格式：
	<ul>								//ul标签中，只能嵌套li标签，不允许嵌入其它标签
		<li> 列表项1 </li>				//li标签中通常嵌入文本或者图像，会在列表项前面自动加上 · 
		<li> 列表项2 </li>
		<li> 列表项3 </li>
		...
	</ul>

	<ul>
		<li> 北京 </li>
		<li> 上海 </li>
		<li> 深圳 </li>
	</ul>
	<ul>
		<li> 
			<img src="xx/1.jpg"/> 
		</li>
		<li> 
			<img src="xx/2.jpg"/> 
		</li>
		<li> 
			<img src="xx/3.jpg"/> 
		</li>
	</ul>

结果类似于：
	·北京
	·上海
	·深圳

自定义列表：

自定义列表常用于对术语或名词进行解释和描述，自定义列表没有任何项目符号。

格式：
	<dl>
		<dt> 名词1 </dt>
		<dd> 名词1解释1 </dd>
		<dd> 名词1解释2 </dd>
		...
		<dt> 名词2 </dt>
		<dd> 名词2解释1 </dd>
		<dd> 名词2解释2 </dd>
	</dl>

	<dl>
		<dt> 淘宝 </dt>
		<dd> 电子商务 </dd>
		<dd> 购物 </dd>
		
		<dt> 腾讯 </dt>
		<dd> 社交 </dd>
		<dd> 游戏 </dd>
	</dl>

结果类似于：
	淘宝
		电子商务
		购物
	腾讯
		社交
		游戏

表格标签：

表格标签用于在HTML页面中排布一些整齐的数据，常见处理和显示表格式数据。

特点：
	1、属于双标签
	2、表格的跟标签为table标签
	3、表格标签table中可以用thead标签来包裹表头部分，用tbody标签包裹表格具体数据
	4、th/td标签只能嵌入在tr标签中，th标签中的文本默认粗体
格式：
	<table>
		<caption> 表格标题 </caption>
		<thead>
			<tr>
				<th>表头1<th>
				<th>表头2<th>
				...
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>第一行第一列</td>
				<td>第一行第二列</td>
				...
			</tr>
		</tbody>
	</table>
说明：
	table ： 用于定义一个表格，为表格标签的根标签
	caption ： 用于在表格中定义表格标题
	thead : 用于在表格中定义头部信息
	tbody : 用于在表格中定义表格主体部分
	tr : 用于在表格中定义一行，只能嵌套th/td
	td/th ： 用于在表格对应行中定义列，像一个容器，可以容纳所有元素
属性：
	border : 设置表格边框（默认为0，单位：像素）
	cellspacing ： 单元格与单元格边框间的空白间距(默认：2个像素)c
	cellpadding ： 单元格内容与单元格边框之间的空白间距(默认：1个像素)
	width : 表格宽度（单位：像素）
	height ： 表格高度（单位：像素）
	align : 表格在网页中的水平对齐方式（left center right）
合并：
	rowspan  : 跨行合并
	colspan : 跨列合并

	<table>
		<caption>水果种类</caption>
		<thead>
			<tr>
				<th>序号</th>
				<th>名称</th>
				<th>价格</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>苹果</td>
				<td>5.8</td>
			</tr>

			<tr>
				<td>2</td>
				<td>香蕉</td>
				<td>4.2</td>
			</tr>
		</tbody>
	</table>

结果类似于：
		水果种类	
	序号   名称   价格
	1      苹果   5.8
	2      香蕉   4.2