HTML第3天 路径、列表与表格

相对路径

实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用路径的方式来指定图像文件的位置。路径可以分为：相对路径和绝对路径

	<!--当图片等在html文件所在位置的上一级目录下时-->
	<!--表述图片的相对路径-->
	<img src= "../wo.jpg" /><!--注意，img标签是一个单标签-->

绝对路径

绝对路径又分为网络绝对路径和主机绝对路径
主机绝对路径很少使用，仅作了解
如何去查看图片等的主机绝对路径呢？

网络绝对路径的引用如下例：

<img src = "http://www.itcast.cn/images/logo.png" />

那么，如何复制网络图片等的绝对路径呢？

列表标签

什么是列表？

列表分为三大类：

• 无序列表
• 有序列表
• 自定义列表

无序列表ul

后发先执行
li标签里面可以放任意标签

<h3>你喜欢的水果？</h3>
<ul>
	<li>苹果</li>
	<li>橘子</li>
	<li>百香果</li>
</ul>

→

有序列表ol

<ol>
	<li>美国</li>
	<li>中国</li>
	<li>英国</li>
</ol>

→

自定义列表

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

表格

创建表格

<table>
	<tr><!--行-->
		<td><!--单元格里的文字等--></td>
		<td><!--这里和li标签相同--></td>
		<td><!--你想放什么都行--></td>
		...
	</tr>
</table>

td标签里面只能放tr标签

tr标签像一个容器，能放很多东西

表格属性

<table width="500" height="300" border="1">
	<tr><!--行-->
		<td><!--单元格里的文字等--></td>
		<td><!--单元格里的文字等--></td>
		<td><!--单元格里的文字等--></td>
		...
	</tr>
</table>

表头标签

<table width="500" height="300" border="1">
	<tr><!--行-->
		<th><!--单元格里的文字等--></th>
		<th><!--单元格里的文字等--></th>
		<th><!--单元格里的文字等--></th>
		...
	</tr>
</table>

表格结构

<table width="500" height="300" border="1">
	<thead>
		<tr><!--行-->
			<th><!--单元格里的文字等--></th>
			<th><!--单元格里的文字等--></th>
			<th><!--单元格里的文字等--></th>
			...
		</tr>
	</thead>
	<tbody>
		<tr><!--行-->
			<td><!--单元格里的文字等--></td>
			<td><!--单元格里的文字等--></td>
			<td><!--单元格里的文字等--></td>
			...
		</tr>
	</tbody>
</table>

表格标题

<table width="500" height="300" border="1">
		<caption>表格标题</caption>
	<thead>
	</thead>
	<tbody>
	</tbody>
</table>

合并单元格

• 合并单元格的思想：
  多个内容合并的时候，就会有多余的东西，把它刪除。例如把3个td合并成一个，那就多余了2个，需要刪除。
  公式：删除的个数=合并的个数- 1

跨行合并(rowspan)

<table width="500" height="300" border="1">
	<thead>
		<tr><!--行-->
			<th><!--单元格里的文字等--></th>
			<th><!--单元格里的文字等--></th>
			<th><!--单元格里的文字等--></th>
			...
		</tr>
	</thead>
	<tbody>
		<tr><!--行-->
			<td><!--单元格里的文字等--></td>
			<td><!--单元格里的文字等--></td>
			<td rowspan="2"><!--单元格里的文字等--></td>
			...
		</tr>
		<tr><!--行-->
			<td><!--单元格里的文字等--></td>
			<td><!--单元格里的文字等--></td>
		</tr>
	</tbody>
</table>

跨列合并(colspan)

<table width="500" height="300" border="1">
	<thead>
		<tr><!--行-->
			<th><!--单元格里的文字等--></th>
			<th><!--单元格里的文字等--></th>
			<th><!--单元格里的文字等--></th>
			...
		</tr>
	</thead>
	<tbody>
		<tr><!--行-->
			<td><!--单元格里的文字等--></td>
			<td><!--单元格里的文字等--></td>
			<td ><!--单元格里的文字等--></td>
			...
		</tr>
		<tr><!--行-->
			<td><!--单元格里的文字等--></td>
			<td colspan="2"><!--单元格里的文字等--></td>
		</tr>
	</tbody>
</table>