一、网页分析
用table制作一篇网页，展示我的常用英雄。
二、代码分析
要制作多行多列单元格，且大小合适，还需要用到跨列合并单元格。
三、代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="0" width="1700">
<tr height="50" bgcolor="gray">
<td width="150">类型</td>
<td width="300">图片</td>
<td width="150">英雄名称</td>
<td width="550">被动</td>
<td width="550">技能</td>
</tr>
<tr height="400" >
<td width="150" rowspan="2" >法师</td>
<td width="300" >
<img width="300" height="400" src="https://c-ssl.dtstatic.com/uploads/blog/202009/23/20200923235655_b832d.thumb.1000_0.jpeg"/>
</td>
<td width="150">小乔</td>
<td width="550">小乔释放技能命中敌人时，会增加25％移动速度，持续2秒</td>
<td width="550">绽放之舞、甜蜜恋风、星华缭乱</td>
</tr>
<tr height="400" >
<td width="300" >
<img width="300" height="400" src="https://ts1.cn.mm.bing.net/th/id/R-C.f76bac441ceb7e85721f30f04a031982?rik=C%2bM3BIXoAuO9EQ&riu=http%3a%2f%2fimg.netbian.com%2ffile%2f2018%2f0201%2f01d554bd24bd6c6b69d14d43c2e3f013.jpg&ehk=i7dTDskqF6vnbQrLE953VGGDT1iBY8SnE0qqOq67tQI%3d&risl=&pid=ImgRaw&r=0"/>
</td>
<td width="150">安琪拉</td>
<td width="550">安琪拉的技能会灼烧敌人，每层灼烧效果会在安琪拉使用技能攻击时额外增加8(+2%法术攻击)法术伤害并为自己增加2%移速，效果最多叠加10层，持续3秒，逐层消失。</td>
<td width="550">火球术、混沌火种、炽热光辉</td>
</tr>
<tr height="400" >
<td width="150" rowspan="2" >射手</td>
<td width="300" >
<img width="300" height="400" src="https://pic1.zhimg.com/v2-e397a746a287086983846de096bb2259_r.jpg?source=1940ef5c"/>
</td>
<td width="150">孙尚香</td>
<td width="550">孙尚香每次普通攻击命中敌人都会减少0.5秒翻滚突袭的冷却时间。</td>
<td width="550">翻滚突袭、红莲爆弹、究极弩炮</td>
</tr>
<tr height="400" >
<td width="300" >
<img width="300" height="400" src="https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/199/199-mobileskin-5.jpg"/>
</td>
<td width="150">公孙离</td>
<td width="550">普攻会对目标叠加枫之印记，叠满四层后对周围敌人造成110~220(+30%物理攻击)物理伤害，并对周围单位叠加一层印记。释放技能或收回纸伞的下次普攻后会追加一次普攻造成10~20(+30%物理攻击)物理伤害。
在释放技能后再次使用技能回归到纸伞的位置。手中没有纸伞时获得50点移速加成并增加10~20%攻速(随等级成长)。追加攻击最多可储存2层，持续4秒。</td>
<td width="550">岑中归月、霜叶舞、孤鹜断霞</td>
</tr>
<tr height="400" >
<td width="150" rowspan="2" >辅助</td>
<td width="300" >
<img width="300" height="400" src="https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/517/517-mobileskin-3.jpg"/>
</td>
<td width="150">少司缘</td>
<td width="550">少司缘每7.5秒~6秒(随英雄等级成长)强化下次普攻：荡秋千至敌人身前造成210~420(+100%物理攻击)(+30%法术攻击)法术伤害和击退，并借力向后跳跃。
当友方英雄受到"良缘赐福"(满生命时不触发金币奖励，主动对生命50%以上友方施放时金币奖励减半)，或敌方英雄受到"冤缘化解"时，少司缘达成业绩获得额外20金币奖励，并缩短强化普攻50%的准备时间。</td>
<td width="550">两同心、怨离别、因缘际会</td>
</tr>
<tr height="400" >
<td width="300" >
<img width="300" height="400" src="https://mobile-img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/preview/c03da29a7e3b4efc79898aa88f41df23_preview_mid.jpg"/>
</td>
<td width="150">瑶</td>
<td width="550">瑶被除压制以外的硬控技能命中后会立即解除控制并变为鹿灵，持续4秒，鹿灵状态将会刷新技能冷却，免疫所有效果但也失去攻击能力，灵鹿静怡的灵光会将敌人减速30%。</td>
<td width="550">若有人兮、风飒木萧、独立兮山之上</td>
</tr>
</table>
</body>
</html>
四、代码效果
屏幕截图 2024-12-10 211125.png
五、总结
熟悉了table的制作方法，感觉很有成就感。
