aperçu html (suite)
1. Ancre de lien hypertexte
<body>
<a name="top"></a>
<!--
超链接跳转到制定的锚点
<a href="#+锚点name">产品1</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 />
<!-- 定义锚点 <a name="锚点name"></a> -->
<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. Balises et attributs de table
<body>
<!--
表格标签:
table:表格内容区域
属性标签: border="1" 设置表格边框;width="400" height="300" 设置表格整体的宽高
bgcolor="aqua"表格背景颜色;background="img/QQ图片20200924142653.jpg">表格背景图片
cellspacing="number"表格边框的填充值,number为0时边框为一条线
cellpadding="number" 表格内容到边框的距离;
tr:表格行
属性标签:height="200" 行高
th:表头,也是单元格,内容会加粗,居中
属性标签:width="150" 列宽 bgcolor="yellow" 单元格背景颜色
background="img/3.png" 单元格背景图片
td:普通的单元格
注意:表格中的内容必须都写在单元格中。
-->
<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. Fusionner les cellules du tableau
<body>
<!-- colspan="合并数量" 单元格跨列合并
从哪个开始合并,就在哪个中加入该标签
删除多余的单元格
rowspan="合并数量" 单元格跨行合并
-->
<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. Un exemple
<!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>