作业分析
本次要使用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>
<style>
.video{
width: 500px;height: 260px;
}
</style>
</head>
<body>
<table
border="1" align="center" cellpadding="10" cellspacing="0">
<tr>
<th width="50">类别</th>
<th>图片</th>
<th>简介</th>
<th width="70">英雄名称</th>
<th>被动</th>
<th width="200">技能</th>
</tr>
<tr>
<th rowspan="3">刺客</th>
<td>
<a href="https://101.qq.com/#/hero-detail?heroid=157&datatype=5v5&tab=skin" target="_blank">
<img width="490px" height="260" src="./tu/YS.jpg"/td> </a>
<td><video controls class="video" src="./tu/YSSP.mp4" /td>
<td>疾风剑豪</td>
<td width="50"><img width="70" height="60" src="./tu/YS00.jpg" >浪客之道</td>
<td><ul>
<li><img width="40" height="40" src="./tu/YS01.jpg">Q.斩刚闪</li>
<li><img width="40" height="40" src="./tu/YS02.jpg">W.风之障壁</li>
<li><img width="40" height="40" src="./tu/YS03.jpg">E.踏前斩</li>
<li><img width="40" height="40" src="./tu/YS04.jpg">R.狂风绝息斩</li>
</ul></td>
<tr>
<td>
<a href="https://101.qq.com/#/hero-detail?heroid=91&datatype=5v5&tab=skin" target="_blank">
<img width="490px" height="260" src="./tu/ND.jpg"/td>
</a>
<td><video controls class="video" src="./tu/NDSP.mp4" /td>
<td>刀锋之影</td>
<td width="50"><img wdith="70" height="60" src="./tu/ND00.jpg"/>刀锋之末</td>
<td><ul>
<li><img width="40" height="40" src="./tu/ND01.jpg">Q.诺克萨斯外交</li>
<li><img width="40" height="40" src="./tu/ND02.jpg">W.斩草除根</li>
<li><img width="40" height="40" src="./tu/ND03.jpg">E.刺客之道</li>
<li><img width="40" height="40" src="./tu/ND04.jpg">R.暗影突袭</li>
</ul></td>
</tr>
<tr>
<td>
<a href="https://101.qq.com/#/hero-detail?heroid=238&datatype=5v5&tab=skin" target="_blank">
<img width="490px" height="260" src="./tu/J.jpg"/td>
</a>
<td><video controls class="video" src="./tu/JSP.mp4" /td>
<td>影流之主</td>
<td width="50"><img wdith="70" height="60" src="./tu/J00.jpg"/>影忍法！灭魂劫</td>
<td><ul>
<li><img width="40" height="40" src="./tu/J01.jpg">Q.影奥义！诸刃</li>
<li><img width="40" height="40" src="./tu/J02.jpg">W.影奥义！分身</li>
<li><img width="40" height="40" src="./tu/J03.jpg">E.影奥义！鬼斩</li>
<li><img width="40" height="40" src="./tu/J04.jpg">R.禁奥义！瞬狱影杀阵</li>
</ul></td>
</tr>
<tr>
<th rowspan="3">法师</th>
<td>
<a href="https://101.qq.com/#/hero-detail?heroid=99&tab=skin" target="_blank">
<img width="490px" height="260" src="./tu/GH.jpg"/td>
</a>
<td><video controls class="video" src="./tu/GHSP.mp4" /td>
<td>光辉女郎</td>
<td width="50"><img width="70" height="60" src="./tu/GH00.jpg" >光芒四射</td>
<td><ul>
<li><img width="40" height="40" src="./tu/GH01.jpg">Q.光之束缚</li>
<li><img width="40" height="40" src="./tu/GH02.jpg">W.曲光屏障</li>
<li><img width="40" height="40" src="./tu/GH03.jpg">E.透光奇点</li>
<li><img width="40" height="40" src="./tu/GH04.jpg">R.终极闪光</li>
</ul></td>
<tr>
<td>
<a href="https://101.qq.com/#/hero-detail?heroid=103&datatype=5v5&tab=skin" target="_blank">
<img width="490px" height="260" src="./tu/Al.jpg"/td>
</a>
<td><video controls class="video" src="./tu/ALSP.mp4" /td>
<td>九尾妖狐</td>
<td width="50"><img wdith="70" height="60" src="./tu/AL00.jpg"/>摄魂夺魄</td>
<td><ul>
<li><img width="40" height="40" src="./tu/AL01.jpg">Q.欺诈宝珠</li>
<li><img width="40" height="40" src="./tu/AL02.jpg">W.妖异狐火</li>
<li><img width="40" height="40" src="./tu/AL03.jpg">E.魅惑妖术</li>
<li><img width="40" height="40" src="./tu/AL04.jpg">R.灵魄突袭</li>
</ul></td>
</tr>
<tr>
<td>
<a href="https://101.qq.com/#/hero-detail?heroid=142&tab=skin" target="_blank">
<img width="490px" height="260" src="./tu/ZY.jpg"/td>
</a>
<td><video controls class="video" src="./tu/ZYSP.mp4" /td>
<td>暮光星灵</td>
<td width="50"><img wdith="70" height="60" src="./tu/ZY00.jpg"/>烟火四射</td>
<td><ul>
<li><img width="40" height="40" src="./tu/ZY01.jpg">Q.飞星乱入</li>
<li><img width="40" height="40" src="./tu/ZY02.jpg">W.窃法巧手</li>
<li><img width="40" height="40" src="./tu/ZY03.jpg">E.催眠气泡</li>
<li><img width="40" height="40" src="./tu/ZY04.jpg">R.折返跃迁</li>
</ul></td>
</tr>
</table>
<br>
<audio controls autoplay preload="auto" loop src="./tu/YY.mp3"></audio>
</body>
</html>
个人总结
感觉网页开发很有意思，但是难度也大，就这次作业来说，代码的运用不够熟练，位置排布也不太理解，需要后期大量的的练习和训练
