作业分析
要使用table表格标签编写如下的效果
image.png
代码实现
使用html标签代码实现
<!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>
<table border="1" cellpadding="10"cellspacing="0"width="1500px"
<tr>
<th width="50">类型</th>
<th>图像</th>
<th width="100">英雄名称</th>
<th width="500">被动</th>
<th width="500">技能</th>
</tr>
<tr>
<td rowspan="2" >射手</td>
<td><img src="file:///E:/%E5%9B%BE%E7%89%87/%E5%AD%99%E5%B0%9A%E9%A6%99.jpg"></td>
<td>孙尚香</th>
<td>孙尚香每次普通攻击命中敌人都会减少0.5秒翻滚突袭的冷却时间。</td>
<td><p>一技能:翻滚突袭</p>
<p>二技能:红莲爆弹</p>
<p>三技能:究极弩炮</p>
</td>
</tr>
<tr>
<td><img src="https://img2.baidu.com/it/u=1306022052,2791496070&fm=253&fmt=auto&app=120&f=JPEG?w=888&h=500 width="340px" height="177px"</td>
<td>马可波罗</td>
<td>马可波罗的每次普攻与技能伤害会给目标附加1层防御破坏效果,达到10层后回复30点能量,同时目标触发防御破坏效果。 防御破坏期间目标每次受到马可波罗的伤害都会真实伤害。</td>
<td><p>一技能:华丽左轮</p>
<p>二技能:漫游之枪</p>
<p>三技能:狂热弹幕</p>
</td>
</tr>
<tr>
<td >战士</td>
<td><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.kdFTALhXCVS5gXBr91OzwQHaEr?w=243&h=180&c=7&r=0&o=5&pid=1.7" width="340px" height="auto"></td>
<td>狂铁</td>
<td>普攻每命中回复能量,技能命中能量。充能≥30点时,技能会获得不同的强化效果,每次普攻附带50点物理伤害,并在命中敌人时回复自身生命值。强化技能使用时会消耗能量。</td>
<td><P>一技能:碎裂之刃</P>
<p>二技能:强袭风暴</p>
<p>三技能:力场压制</p>
</td>
</tr>
<tr>
<td>法师</td>
<td><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Kq377UnR2UmQiy-kxOJ1owHaDZ?w=299&h=160&c=7&r=0&o=5&pid=1.7" width="340px" height="auto"></td>
<td>诸葛亮</td>
<td>技能命中敌方目标会叠加印记,达到5层会召唤5颗法球,自动攻击周围目标造成法术伤害。
法球会优先攻击敌方英雄,不会攻击非战斗状态的野怪,法球对于野怪的伤害减少40%,对于小兵的伤害增加40%。</td>
<td><p>一技能:东风破袭</p>
<p>二技能:时空穿梭</p>
<p> 三技能:元气弹</p>
</tr>
</table>
</body>
</html>
个人总结
本来想做的更精美一些但是知识还是有点差距