HTML img、a标签与表格合并单元格属性详解与代码实践

脚本专家 · 发表于 5 天前

在前端页面开发中，img图片标签、a超链接标签以及table表格标签是最常用的结构化元素。理解它们的属性、作用和常见用法，能有效提升页面构建的准确性和效率。本文基于实际开发场景，详细梳理这些标签的核心属性、注意事项，并给出可直接运行的HTML代码示例。

<html>
<head>
<title>img标签属性演示</title>
</head>
<body>
<p>
<strong>相对路径插入图片：</strong>
本目录下：<img src="cloud.png"><br>
本目录文件夹中：<img src="img/cloud.png"><br>
<strong>绝对路径插入图片：</strong><br>
输入本地路径：<img src="D://My Computer/cloud.png"><br>
网络图片：<img src="https://stricky-1319251483.cos.ap-chongqing.myqcloud.com/stricky/pic/202409111630616.png">
</p>
</body>
</html>

复制代码

img标签是单标签，必须配合src属性指定图片路径。src支持相对路径（如./xxx.png、./img/xxx.png、../xxx.png）、绝对路径（本地磁盘路径）和网络URL。

当图片因路径错误或加载失败无法正常显示时，alt属性会显示替代文本。例如：

<img src="cloud.pnggg" alt="白云图片加载出现问题">

复制代码

注意，alt只会在图片加载失败时出现，成功的图片不会显示alt内容。

title属性提供鼠标悬停提示文本：

<img src="cloud.png" alt="白云图片加载出现问题" title="这是一张美丽的白云图片">

复制代码

width和height控制图片宽高，推荐只修改其中一个，浏览器会自动等比例缩放，避免图片变形。单位为像素（px）。border属性给图片添加边框，参数为边框宽度像素，现代开发通常用CSS代替。

<img src="cloud.png" alt="白云图片加载出现问题" title="这是一张美丽的白云图片" width="200px" border="10px">

复制代码

属性顺序对显示结果无影响，每个属性用空格或回车隔开，值都需写在双引号内。

a超链接标签的href属性为必填，表示点击后跳转的页面。target控制打开方式：_self（默认，当前页面打开）、_blank（新标签页打开）。

<a href="https://www.baidu.com/">点击跳转百度</a>
<a href="https://www.baidu.com/"><img src="baidu.png" border="5px"></a>
<a href="#">跳转到当前页面</a>

复制代码

其中#为占位符，保持当前地址。

表格标签由table、tr（行）、td（单元格）、th（表头，会居中加粗）组成。thead和tbody分别定义表格头部区域和主体区域，语义更清晰。

<table border="1px" width="800" height="400" cellspacing="0" cellpadding="50" align="center">
<thead>
<tr>
<th>姓名</th><th>性别</th><th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td><td>男</td><td>18</td>
</tr>
<tr>
<td>李四</td><td>男</td><td>19</td>
</tr>
<tr>
<td>王五</td><td>女</td><td>18</td>
</tr>
</tbody>
</table>

复制代码

表格属性说明：border控制边框粗细；cellspacing控制单元格之间的距离（默认为2像素）；cellpadding控制内容与边框的距离（默认为1像素）；width/height设置表格尺寸；align控制表格相对于周围元素的对齐方式（如align="center"表示表格居中）。这些属性建议放在table标签内，但现代开发更倾向使用CSS控制单元格合并使用rowspan（合并列）和colspan（合并行）。合并时，被合并的单元格会被挤开，需要注释掉对应的td。

<table border="1px" width="800" height="400" cellspacing="0" cellpadding="50" align="center">
<thead>
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td rowspan="2">男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
</tr>
<tr>
<td colspan="2">王五/女</td>
<td>18</td>
</tr>
</tbody>
</table>

复制代码

rowspan="2"表示该单元格纵向占据两行，colspan="2"表示横向占据两列。合并后，需要将消失的单元格注释掉，否则会出现多余空白。

以上为img、a和表格标签的核心属性及代码实践。掌握这些细节能让你在页面布局和图片/链接处理时更加得心应手。

热心网友7 · 发表于 5 天前

感谢楼主的详细教程！对img、a和table标签的核心属性梳理得很清楚，特别是alt和title的区别、以及rowspan/colspan合并单元格时的实际注释处理，非常实用。想请教一下，现在img的border属性是不是在HTML5中已经不推荐用了，更建议用CSS的border来替代？另外，单元格合并时被挤掉的td是否需要手动注释掉，还是直接删除即可？期待更多实战分享。

HTML img、a标签与表格合并单元格属性详解与代码实践

Re: HTML img、a标签与表格合并单元格属性详解与代码实践

浏览过的版块

指导单位

旗下站点

联系我们