作业分析
使用html标签实现网页中视频的自动播放和音频的自动播放，实现如下效果
09.png
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Keywords" content="王者荣耀，王者，王者简介">
<title>王者荣耀英雄简介</title>
<style>#a1{ color:rgb(248, 4, 4);text-decoration:none;}
</style>
</head>
<body>
<h1><a href="https://pvp.qq.com/web201605/herolist.shtml" target="_blan" id="a1">王者荣耀各英雄</a></h1>
<table border="1" cellpadding="1" cellspacing="0" align="center">
<tr>
<td>职业</td>
<td width="150px" ali gn="center">英雄名称</td>
<td align="center">视频</td>
<td width="300px" align="center">技能</td>
<td width="800px" align="center">被动</td>
</tr>
<tr>
<td rowspan="5">刺客</td>
<td><a href="https://pvp.qq.com/web201605/herodetail/sunwukong.shtml" target="_blank">孙悟空</a></td>
<td><video src="D:\cloudprogram2024\01.web\code\lesson06\img\无标题视频——使用Clipchamp制作.mp4" width="320px" height="200px" muted autoplay loop>
<source src="D:\cloudprogram2024\01.web\code\lesson06\img\无标题视频——使用Clipchamp制作.mp4">
</video></td>
<td><ul><li>护身咒法</li>
<li>斗战冲锋</li>
<li>如意金箍</li></ul>
</td>
<td>大圣神威：孙悟空释放技能后下次普攻变为强力敲击，冲锋至目标身旁并造成475
(+100%物理攻击)物理伤害，该伤害可全额享受暴击收益。
孙悟空天生拥有20%暴击率，但初始只能造成150%暴击效果。</td>
</tr>
<tr>
<td><a href="https://pvp.qq.com/web201605/herodetail/libai.shtml" target="_blank">李白</a></td>
<td><video src="D:\cloudprogram2024\01.web\code\lesson06\img\李白.mp4" width="320px" height="200px" muted autoplay loop>
<source src="D:\cloudprogram2024\01.web\code\lesson06\img\李白.mp4">
</video></td>
<td><ul><li>将进酒</li>
<li>神来之笔</li>
<li>青莲剑歌</li></td>
<td>侠客行：李白使用普攻攻击敌人时，会积累1道剑气，持续3秒。积累4道剑气后会进入【侠客行】状态，
增加30点物理攻击并解除【青莲剑歌】的封印，持续5秒。
攻击建筑不会积累剑气。</td>
</tr>
<tr>
<td><a href="https://pvp.qq.com/web201605/herodetail/lanlingwang.shtml" target="_blank">兰陵王</a></td>
<td><video src="D:\cloudprogram2024\01.web\code\lesson06\img\兰陵王.mp4" width="320px” height="200px" muted autoplay loop>
<source src="D:\cloudprogram2024\01.web\code\lesson06\img\兰陵王.mp4">
</video></td>
<td><ul>
<li>秘技·分身</li>
<li>秘技·影蚀</li>
<li>秘技·暗袭</li>
<li>秘技·隐匿</li>
</ul>
</td>
<td>秘技·极意：兰陵王朝敌方英雄移动时会增加15%~30%移动速度。</td>
</tr>
<tr>
<td><a href="https://pvp.qq.com/web201605/herodetail/yunzhongjun.shtml" target="_blank">云中君</a></td>
<td><video src="D:\cloudprogram2024\01.web\code\lesson06\img\云中君.mp4" width="320px" height="200px" muted autoplay loop>
<source src="D:\cloudprogram2024\01.web\code\lesson06\img\云中君.mp4">
</video></td>
<td><ul>
<li>聊翱游兮</li>
<li>飒风飞羽</li>
<li>猋远举兮云中</li>
</ul>
</td>
<td>云神·展翼：4级后云中君永久无视地形飞行，普攻可以积攒气息值，为云中君提供0~60点移速加成，
未进行普攻后气息值会迅速下降；普攻和技能命中会叠加一层撕裂效果，
敌人移动时对其造成0.24%最大生命值的物理伤害(每50点额外攻击力，提升0.02%的比例)，
上限5层，持续2秒，层数越多撕裂伤害越强，最多提升10倍。
敌方英雄不移动也会受到50%的撕裂伤害，对于小兵、野怪撕裂效果无需移动即会全部触发，
每0.2秒造成(2.7%物理攻击)物理伤害。</td>
</tr>
<tr>
<td><a href="https://pvp.qq.com/web201605/herodetail/zhaoyun.shtml" target="_blank">赵云</a></td>
<td><video src="D:\cloudprogram2024\01.web\code\lesson06\img\赵云.mp4" width="320px" height="200px" muted autoplay loop>
<source src="D:\cloudprogram2024\01.web\code\lesson06\img\赵云.mp4">
</video></td>
<td><ul>
<li>惊雷之龙</li>
<li>破云之龙</li>
<li>天翔之龙</li>
</ul>
</td>
<td>龙鸣：赵云愈战愈勇，生命值降低会迸发潜能，提升免伤比例并强化基础技能。
【潜龙在渊】66%＜生命值≤100%：5%免伤
【见龙在田】33%＜生命值≤66%：10%免伤；一技能位移距离提升50；二技能增加1段龙枪
【飞龙在天】 0＜生命值≤33%：20%免伤；一技能位移距离提升100；二技能增加2段龙枪
溢出当前档位的生命值回复会转化为永久护盾。血盾总量填满一个档位时，档位以下的护盾会转化为生命值。</td>
</tr>
<tr>
<td rowspan="5">射手</td>
<td><a href="https://pvp.qq.com/web201605/herodetail/lubanqihao.shtml" target="_blank">鲁班</a></td>
<td><video src="D:\cloudprogram2024\01.web\code\lesson06\img\鲁班.mp4" width="320px" height="200px" muted autoplay loop>
<source src="D:\cloudprogram2024\01.web\code\lesson06\img\鲁班.mp4">
</video></td>
<td><ul>
<li>河豚手雷</li>
<li>无敌鲨嘴炮</li>
<li>空中支援</li>
</ul>
</td>
<td>火力压制：鲁班七号第五次普攻或使用技能后的下次普攻会强化为扫射，扫射对敌人造成3次伤害，
每次对英雄造成70~140(+4.5%目标最大生命)的物理伤害(每点额外物理攻击提升0.01%)，
对非英雄单位造成120(+50%物理攻击)物理伤害。</td>
</tr>
<tr>
<td><a href="https://pvp.qq.com/web201605/herodetail/houyi.shtml" target="_blank">后羿</a></td>
<td><video src="D:\cloudprogram2024\01.web\code\lesson06\img\后羿.mp4" width="320px" height="200px" muted autoplay loop>
<source src="D:\cloudprogram2024\01.web\code\lesson06\img\后羿.mp4">
</video></td>
<td><ul>
<li>多重箭矢</li>
<li>落日余晖</li>
<li>灼日之矢</li>
</ul>
</td>
<td>惩戒射击：后羿普攻命中会累积射击状态，每层增加4%攻速，最多累计3层。
3层后进入【惩戒射击】 状态，普攻射出3支箭矢，总共造成原来120%的伤害，状态持续3秒。
期间每次命中会刷新持续时间。
每支箭矢造成50%法球效果。</td>
</tr>
<tr>
<td><a href="https://pvp.qq.com/web201605/herodetail/makeboluo.shtml" target="_blank">马可波罗</a></td>
<td><video src="D:\cloudprogram2024\01.web\code\lesson06\img\马可波罗.mp4" width="320px" height="200px" muted autoplay loop>
<source src="D:\cloudprogram2024\01.web\code\lesson06\img\马可波罗.mp4">
</video></td>
<td><ul>
<li>华丽左轮</li>
<li>漫游之枪</li>
<li>狂热弹幕</li>
</ul>
</td>
<td>连锁反应：马可波罗的每次普攻与技能伤害会给目标附加1层防御破坏效果(对小兵为5层)，
达到10层后回复30点能量，同时目标触发防御破坏效果。
防御破坏期间目标每次受到马可波罗的伤害都会额外受到40( +35%物理攻击)真实伤害(该伤害可以暴击)，
持续5秒。马可波罗的技能伤害仅享受50%的法球加成。</td>
</tr>
<tr>
<td><a href="https://pvp.qq.com/web201605/herodetail/sunshangxiang.shtml" target="_blank">孙尚香</a></td>
<td><video src="D:\cloudprogram2024\01.web\code\lesson06\img\孙尚香.mp4" width="320px" height="200px" muted autoplay loop>
<source src="D:\cloudprogram2024\01.web\code\lesson06\img\孙尚香.mp4">
</video></td>
<td><ul>
<li>翻滚突袭</li>
<li>红莲爆弹</li>
<li>究极弩炮</li>
</ul>
</td>
<td>活力迸发：孙尚香每次普通攻击命中敌人都会减少0.5秒翻滚突袭的冷却时间。</td>
</tr>
<tr>
<td><a href="https://pvp.qq.com/web201605/herodetail/bailishouyue.shtml" target="_blank">百里守约</a></td>
<td><video src="D:\cloudprogram2024\01.web\code\lesson06\img\百里守约.mp4" width="320px" height="200px" muted autoplay loop>
<source src="D:\cloudprogram2024\01.web\code\lesson06\img\百里守约.mp4">
</video></td>
<td><ul>
<li>静谧之眼</li>
<li>狂风之息</li>
<li>逃脱</li>
</ul>
</td>
<td>瞄准：百里守约无攻击行为1.5秒后，会快速获得伏击效果，最多叠加5层，
拥有伏击效果时提升百里守约20%物理穿透和40~80点普攻伤害。每次普攻命中敌方英雄消耗1层伏击，
技能命中敌方英雄消耗5层伏击效果。
每增加1%的暴击率，会提升4点狂风之息和2点逃脱的伤害。</td>
</tr>
<tr>
<td rowspan="5">法师</td>
<td><a href="https://pvp.qq.com/web201605/herodetail/xiaoqiao.shtml" target="_blank">小乔</a></td>
<td><video src="D:\cloudprogram2024\01.web\code\lesson06\img\小乔.mp4" width="320px" height="200px" muted autoplay loop>
<source src="D:\cloudprogram2024\01.web\code\lesson06\img\小乔.mp4">
</video></td>
<td><ul>
<li>绽放之舞</li>
<li>甜蜜恋风</li>
<li>星华缭乱</li>
</ul>
</td>
<td>治愈微笑：小乔释放技能命中敌人时，会增加25％移动速度，持续2秒</td>
</tr>
<tr>
<td><a href="https://pvp.qq.com/web201605/herodetail/xishi.shtml" target="_blank">西施</a></td>
<td><video src="D:\cloudprogram2024\01.web\code\lesson06\img\西施.mp4" width="320px" height="200px" muted autoplay loop>
<source src="D:\cloudprogram2024\01.web\code\lesson06\img\西施.mp4">
</video></td>
<td><ul>
<li>纱缚之印</li>
<li>幻纱之灵</li>
<li>心无旁骛</li>
</ul>
</td>
<td>少女的把戏:西施的技能伤害会随着自身与敌人间的距离增加而强化，距离每增加100，伤害增加5%，最多提升40%。</td>
</tr>
<tr>
<td><a href="https://pvp.qq.com/web201605/herodetail/nvwa.shtml" target="_blank">女娲</a></td>
<td><video src="D:\cloudprogram2024\01.web\code\lesson06\img\女娲.mp4" width="320px" height="200px" muted autoplay loop>
<source src="D:\cloudprogram2024\01.web\code\lesson06\img\女娲.mp4">
</video></td>
<td><ul>
<li>神晖：缔造</li>
<li>神晖：融聚</li>
<li>神晖：降临</li>
<li>神晖：诛灭</li>
</ul></td>
<td>寰宇神识： 女娲提升10~20%视野、普攻与技能释放范围。</td>
</tr>
<tr>
<td><a href="https://pvp.qq.com/web201605/herodetail/diaochan.shtml" target="_blank">貂蝉</a></td>
<td><video src="D:\cloudprogram2024\01.web\code\lesson06\img\貂蝉.mp4" width="320px" height="200px" muted autoplay loop>
<source src="D:\cloudprogram2024\01.web\code\lesson06\img\貂蝉.mp4">
</video></td>
<td><ul>
<li>落·红雨</li>
<li>缘·心结</li>
<li>绽·风华</li>
</ul></td>
<td>花印：貂蝉的技能命中会为敌人叠加花之印记，持续8秒，叠加满4层后印记触发，回复130~260(+1.5%额外生命值)生命，
同时会对周围敌人造成130~260(+40%法术攻击)真实伤害并减少其25~50%移速，持续1秒。</td>
</tr>
<tr>
<td><a href="https://pvp.qq.com/web201605/herodetail/wuzetian.shtml" target="_blank">武则天</a></td>
<td><video src="D:\cloudprogram2024\01.web\code\lesson06\img\武则天.mp4" width="320px" height="200px" muted autoplay loop>
<source src="D:\cloudprogram2024\01.web\code\lesson06\img\武则天.mp4">
</video></td>
<td><ul>
<li>女帝辉光</li>
<li>女帝威严</li>
<li>生杀予夺</li>
</ul></td>
<td>天命之女：被动效果的脱离战斗触发时间为3秒（默认脱战时长仍为6秒），武则天脱离战斗后会增加50点移动速度，
同时每秒会回复2％最大法力值。</td>
<audio src="D:\cloudprogram2024\01.web\code\lesson06\img\白挺 - 你从未离去.mp3" autoplay loop>
<source src="D:\cloudprogram2024\01.web\code\lesson06\img\白挺 - 你从未离去.mp3" type="audio/.mp3">
</audio>
</body>
</html>
个人总结
相对简单，掌握了相关标签还是很容易实现。
