作业分析
本次要使用table表格标签编写如下
image.png
代码实现
使用HTML标签，a标签（超链接），audio音频标签，video视频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#a1{
color:#000;
text-decoration:none ;
font-size: 16px;
}
#a1:hover{
color:red;
font-size: 18px;
}
#a2{
color:#000;
text-decoration:none ;
font-size: 16px;
}
#a2:hover{
color:red;
font-size: 18px;
}
#a3{
color:#000;
text-decoration:none ;
font-size: 16px;
}
#a3:hover{
color:red;
font-size: 18px;
}
#a4{
color:#000;
text-decoration:none ;
font-size: 16px;
}
#a4:hover{
color:red;
font-size: 18px;
}
#a5{
color:#000;
text-decoration:none ;
font-size: 16px;
}
#a5:hover{
color:red;
font-size: 18px;
}
</style>
<script>
var audio=document.getElementById('myaudio');
audio.play();
audio.pause();
audio.volume=0.5;
</script>
</head>
<body>
<audio id="myaudio" controls>
<source src="./music/Dax - Lonely Dirt Road.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<table border="1"
cellspacing="0"
cellspadding="10"
width="800"
align="center">
<tr width="800">
<td colspan="5" align="center"><a id="a1" href="https://m.yjwujian.cn/index.html" target="_blank">永劫无间</a></td>
</tr>
<tr>
<td>姓名</td>
<td width="100px">图片</td>
<td width="100px">视频</td>
<td>技能介绍</td>
<td>评价</td>
</tr>
<tr>
<td> <a id="a2" href="https://baike.baidu.com/item/%E5%9C%9F%E5%BE%A1%E9%97%A8%E8%83%A1%E6%A1%83/57491834" target="_blank">土御门胡桃</a></td>
<td>
<img width="104px" height="auto" src="./images/hutao2.png"></a>
</td>
<td>
<video src="./视频/胡桃.mp4" controls width="200px" height="auto">
Your browser does not support the audio element
</video>
</td>
<td>
<ul>
<li>庇护（可以连接一名队友并持续治疗双方）</li>
<li>庇护.增援（与庇护技能类似，但额外提升连接目标20%的攻击力）</li>
<li>庇护.守护（与庇护类似，但额外为连接目标增加20%伤害减免）</li>
<li>净天地（清除所有减益效果并回复体力）</li>
<li>净天地.固甲（净天地效果由回复体力转变为回复护甲）</li>
<li>净天地.急疗（不在释放法阵，而是给全体队友瞬间回复一定体力和护甲）</li>
</ul>
</td>
<td>永劫无间的爆金圣体，名副其实的“金堆”，一身生存技能点满</td>
</tr>
<tr>
<td><a id="a3" href="https://baike.baidu.com/item/%E5%BC%A0%E8%B5%B7%E7%81%B5/64587489?secondId=85126507&fromModule=search-result_lemma-recommend" target="_blank">张起灵</a></td>
<td>
<img width="100px" height="auto" src="./images/zql2.jpg"></a>
</td>
<td>
<video src="./视频/张起灵.mp4" controls width="200px" height="auto">
Your browser does not support the audio element
</video>
</td>
<td>
<ul>
<li>F技能（闪避）（快速向前冲刺一段距离，对路径上敌人造成持续伤害，并可持续使用两次，第二次会有一个短暂的无敌时间，可用于躲避敌人攻击）</li>
<li>V技能（秘术）（召唤一个秘术阵，对范围内的敌人造成持续伤害，并减少敌人移速，同时为队友提供一定的增益效果）</li>
<li>奥义技能（张起灵的终极技能可以召唤一个强大的秘术风暴，对范围内的敌人造成巨额伤害，并有控制效果）</li>
</ul>
</td>
<td>强度适中，F技能可以打控制，奥义可以力挽狂澜也可夺命狂奔，及控制与输出与一身</td>
</tr>
<tr>
<td><a id="a4" href="https://baike.baidu.com/item/%E5%AE%81%E7%BA%A2%E5%A4%9C/57491706?fr=ge_ala" target="_blank">宁红夜</a></td>
<td>
<img width="104px" height="auto" src="./images/nhy.webp">
</td>
<td>
<video src="./视频/宁红夜/宁红夜.mp4" controls width="200px" height="auto">
Your browser does not support the audio element
</video>
</td>
<td>
<ul>
<li>昆仑决（快速击飞身前敌人，受击中可用）</li>
<li>昆仑决.封（对命中的敌人造成伤害，并使其在8秒内无法使用技能和奥义，但无法打断霸体招式）</li>
<li>昆仑决.禁疗（对命中的敌人造成伤害，并在15秒内降低其受到的治疗效果，但无法打断霸体招式）</li>
<li>赤练无明（召唤阴神之眼注视范围内的敌人，持续5秒。召唤结束后，被注视的敌人将被眩晕5秒，敌人被注视时无法使用飞索，宁红夜在召唤时无法攻击）</li>
</ul>
</td>
<td>适合新手，打架时直接不需要任何技巧，被控也没用关系，你有F技能解控，打不过就开奥义，定住敌人后能打就打，不能打就跑</td>
</tr>
<tr>
<td><a id="a5" href="https://www.bilibili.com/video/BV1dqytY4EBA/" target="_blank">季莹莹</a></td>
<td>
<img width="104px" height="auto" src="./images/jiyingying.webp" ></a>
</td>
<td>
<video src="./视频/季莹莹/季莹莹.mp4" controls width="200px" height="auto">
Your browser does not support the audio element
</video>
</td>
<td>
<ul>
<li>幽冥火：季莹莹化身为不会受到打击的“幽冥火”，持续3秒。1秒后可再次按F键击退附近敌人，攻击或使用道具会结束“幽冥火”，受击中可用。该技能有三种变体.</li>
<li>无常锁：季莹莹替换武器为“无常锁”，持续30秒。随着战斗进行，“无情劲”逐渐增长，积累到最大值时，蓄力招式被替换为“链舞”。链舞是向前方快速甩出“无常锁”，进行连续三段打击并回复自身，消耗全部“无情劲”12。</li>
</ul>
</td>
<td>没玩过，但她的皮肤好看</td>
</tr>
</table>
</body>
</html>
个人总结
1.人物名字超链接到相应的网站。永劫无间也超链接到永劫无间官方网站。
2.在将视频做到表格标签时，因为视频下载与格式问题被卡了一段时间，但最终还是做出来了，但表格的设计还不够完善，还需改进。
