descripción general de html (continuación)

descripción general de html (continuación)

1. Anclaje de hipervínculo

<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. Etiquetas de tabla y atributos de tabla

<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. Combinar celdas en la tabla

<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 ejemplo

<!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>


Supongo que te gusta

Origin blog.csdn.net/weixin_45866849/article/details/109191637
Recomendado
Clasificación