- it技术
- html概述（续）
html概述(续)
1.超链接锚点
<body>
<a name="top"></a>
<a href="#p1">产品1
</a>
<a href="#p2">产品2
</a>
<a href="#p3">产品3
</a>
<a href="#p4">产品4
</a>
<a href="#p5">产品5
</a>
<hr />
<h3>产品1
<a name="p1"></a> </h3>
<img src="img/1.png" />
<h3>产品2
<a name="p2"></a></h3>
<img src="img/2.png" />
<h3>产品3
<a name="p3"></a></h3>
<img src="img/3.png" />
<h3>产品4
<a name="p4"></a></h3>
<img src="img/4.png" />
<h3>产品5
<a name="p5"></a></h3>
<img src="img/5.png" />
<hr />
<p align="center"><a href="#top">返回顶部
</a></p>
</body>
2.表格标签及表格属性
<body>
<table border="1" width="400" height="300" cellspacing="0" cellpadding="10" bgcolor="aqua" background="img/QQ图片20200924142653.jpg">
<tr height="200" >
<th width="150">单元格内容
</th>
<th bgcolor="yellow">单元格内容
</th>
<th background="img/3.png">单元格内容
</th>
</tr>
<tr >
<td>单元格内容
</td>
<td>单元格内容
</td>
<td>单元格内容
</td>
</tr>
<tr>
<td >单元格内容
</td>
<td>单元格内容
</td>
<td>单元格内容
</td>
</tr>
<tr >
<td>单元格内容
</td>
<td>单元格内容
</td>
<td>单元格内容
</td>
</tr>
</table>
3.表格中的单元格合并
<body>
<table border="1" width="400" height="300" ">
<tr >
<td colspan="3">单元格内容
</td>
</tr>
<tr>
<td rowspan="2" >单元格内容
</td>
<td>单元格内容
</td>
<td>单元格内容
</td>
</tr>
<tr >
<td>单元格内容
</td>
<td>单元格内容
</td>
</tr>
4.一个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3 align="center">财务报表
</h3>
<table border="1" align="center" cellspacing="0">
<tr>
<th colspan="2">品牌
</th>
<th colspan="3">春装
</th>
<th colspan="3">夏装
</th>
<tr>
<th colspan="2"></th>
<th>男装
</th>
<th>女装
</th>
<th>童装
</th>
<th>男装
</th>
<th>女装
</th>
<th>童装
</th>
</tr>
<tr>
<th rowspan="2">JC
</th>
<th>牛仔系列
</th>
<th>116
</th>
<th>98
</th>
<th>68
</th>
<th>88
</th>
<th>86
</th>
<th>46
</th>
</tr>
<tr>
<th>休闲系列
</th>
<th>120
</th>
<th>100
</th>
<th>80
</th>
<th>98
</th>
<th>88
</th>
<th>50
</th>
</tr>
</table>
</body>
</html>
