HTML小识2

（三）HTML基础语法：

2.常见的标签

2.11、列表标签

作用：用来将文字或者图片制成表的形式（是一种形式） 这就叫做列表
形式：
有序列表
无序列表
自定义列表

2.11.1有序列表

按照顺序来的（这种循序一般是用在法律文献或者是必须强调用连续的数字的时候）
举例：

		<ol type="I">（列表样式）
			<li>打开冰箱</li>
			<li>把大象放进去</li>
			<li>关上冰箱门</li>
		</ol>

效果：

1. 
   
2. 打开冰箱
3. 
   
4. 把大象放进去
5. 
   
6. 关上冰箱门
7. 
   

2.11.2无序列表

就是没有顺序的排列
举例：

	<ul> （可以后接 type ，来选择列表前图表的样式）
			<li>男的</li>
			<li>穷的</li>
			<li>胖的</li>
			<li>黑的</li>
		</ul>

效果：

• 
  
• 男的
• 
  
• 穷的
• 
  
• 胖的
• 
  
• 黑的
• 
  

2.11.3自定义列表

就是没有顺序可根据需要自行更改相应样式的排列
举例：

<dl>
			<!--列表的标题-->
			<dt>灌篮高手</dt>
			<!--内容项-->
			<dd>樱木花道</dd>
		</dl>

效果：

动画片

灌篮高手

樱木花道

2.12 表格标签

适用：有规律的数据 大量的数据显示 查询 并不推荐使用table布局。注意，table中的border color bgcolor等式可以继承到tr/td上
< table>< /table>
< caption>表格的标题< / caption>
< tr> 表格中的行< /tr>
< td> 表格中单元格 < /td>
属性：
宽高 ： width 、height
边框 ：border
边距;
①：边框和内容的边距：cellpadding
②:单元格边框的距离 ：cellspacing


举例：

<table height="500px" width="1200" border="1" cellspacing="0" cellpadding="">

<tr align="center">
			<td colspan="2">姓名</td>
			<td></td>
			<td>职务</td>
			<td></td>
			<td colspan="2">出差事由</td>   (cospan:表示横行合并，2个框合成一个框)
			<td colspan="4"></td>(rospan:表示列合并，4个框合成一个框)
			</tr>

效果：
PS：
复杂应用：1、thead 表头
2、tbody 表内容
3、tfoot 表格尾部

注意：头、内容、脚在表格中独立存在，且不论书写顺序严格按照头身尾排列。头身尾样式与表格table中直接带的tr、td独立存在。

		<!--复杂应用-->
		<table border="1" bordercolor="red" cellspacing="0" width="500">
			<!--行分组-->
			<!--1.表头-->
			<thead>
				<tr>
					<!--th表头-->
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>操作</th>
					
				</tr>
			</thead>
			<!--2.表主体-->
			<tbody>
				<tr>
					<td>贾宝玉</td>
					<td>男</td>
					<td>18</td>
					<td rowspan="2">
						<a href="#">指婚</a>
					</td>
				</tr>
				<tr>
					<td>林黛玉</td>
					<td>女</td>
					<td>16</td>
					<!--<td>指婚</td>-->

				</tr>
			</tbody>
			<!--3.表尾行-->
			<tfoot>
				<tr>
					<td colspan="4" align="right">---来至 红楼梦</td>
				</tr>
			</tfoot>
		</table>