通过以下代码我实现了下面图像的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无畏锲约简单英雄介绍</title>
</head>
<body >
<h1>歌曲播放<audio controls><source src="D:\cloud program\web\code\lesson4\img\Jay-J_I_E_ - 又ᵉᵐ⁰了 (Inst_).ogg"></audio></h1>
<center><table border="1" width="1000" cellpadding="10" cellspacing="0">
<tr bgcolor="grey">
<td >阵容</td>
<td width="300">图片</td>
<td >名称</td>
<td colspan="2">技能</td>
</tr>
<tr height="200">
<td rowspan="5">决斗</td>
<td><a href="https://val.qq.com/game-data.html?pageType=1&&heroId=11" target="_blank"><img src="D:\cloud program\web\code\lesson4\img\d19e518b119a74007b7dca2e0ecc31de.jpg"width="300" height="200" ></a></td>
<td width="100"><video src="D:\cloud program\web\code\lesson4\img\合集_2024-12-13_无畏契约英雄介绍\【无畏契约】英雄介绍——芮娜.mp4" width="300" height="200"controls ></video>蕾娜</td>
<td>
c.睥睨
q.噬尽
e.逐散
x.女皇指令
</td>
<td>c对敌人造成致盲.q获得额外的生命值.e灵魂状态 .x对所有技能进行加强同时提高移速和攻击速度.</td>
</tr>
<tr height="200">
<td><a href="https://val.qq.com/game-data.html?pageType=1&&heroId=18" target="_blank"><img src="D:\cloud program\web\code\lesson4\img\89b40f8f33cdd6aa7f91489004f098b8.jpg"width="300" height="200"></a></td>
<td width="100"><video src="D:\cloud program\web\code\lesson4\img\合集_2024-12-13_无畏契约英雄介绍\【无畏契约】英雄介绍——霓虹.mp4"width="300" height="200"controls></video></td>
<td>
c.高速通道
q.闪电弹球
e.充能疾驰
x.超限暴走
</td>
<td>c 能量墙.q震荡弹e加速和一段距离的滑铲 .x超高速的加速和激光只不过有时间限制.</td>
</tr>
<tr height="200">
<td><a href="https://val.qq.com/game-data.html?pageType=1&&heroId=2" target="_blank"><img src="D:\cloud program\web\code\lesson4\img\72d001954631e521c64a074b55eef2b4.jpg"width="300" height="200"></a></td>
<td width="100"><video src="D:\cloud program\web\code\lesson4\img\合集_2024-12-13_无畏契约英雄介绍\【无畏契约】英雄介绍——捷风.mp4"width="300" height="200"controls></video>捷风</td>
<td>
c.瞬云
q.凌空
e.逐风
x.飓刃
</td>
<td>c一个风烟.q一个大跳.e一个冲刺 .x5个飞镖在击杀人之后会自动刷新.</td>
</tr>
<tr height="200">
<td><a href="https://val.qq.com/game-data.html?pageType=1&&heroId=3" target="_blank"><img src="D:\cloud program\web\code\lesson4\img\a19889a0c56cae3b082059f65e051240.jpg" width="300" height="200"></a></td>
<td width="100"><video src="D:\cloud program\web\code\lesson4\img\合集_2024-12-13_无畏契约英雄介绍\【无畏契约】英雄介绍——雷兹.mp4"width="300" height="200"controls></video>雷兹</td>
<td>
c.花车巡游
q.惊喜翻腾
e.彩雷飞溅
x.晚安火焰
</td>
<td>c一个侦察类的机器.q一个炸弹包可以击飞.e一个手雷可以造成范围伤害 .x一个大范围的爆炸并照成大量伤害.</td>
</tr>
<tr height="200">
<td><a href="https://val.qq.com/game-data.html?pageType=1&&heroId=6" target="_blank"><img src="D:\cloud program\web\code\lesson4\img\0b7f9a75edba101a063c091fdb383373.png"width="300" height="200"></a></td>
<td width="100"><video src="D:\cloud program\web\code\lesson4\img\合集_2024-12-13_无畏契约英雄介绍\【无畏契约】英雄介绍——不死鸟.mp4"width="300" height="200"controls></video>不死鸟</td>
<td>
c.火冒三丈
q.闪光曲球
e回血火球
x.再火一回
</td>
<td>c火墙.q一个闪光蛋.e一个大火球并且有伤害 .x一个有时间限制的自己.</td>
</tr>
</table>
</body>
</html>
</center>
总结:
通过这次作业的书写我对web开发的兴趣更加浓厚同时也学习到了表格标签<tr><td><img src="><a href="链接路径"><video controls><source src="">等等这类标签的掌握我只能说我爱云计算