1.作业分析
本次要使用table表格标签编写如下效果
音频及超链接效果.png
视频及列表效果.png
2.代码实现--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>
<audio controls="controls"><source src="audio/DJ蔷薇 - 【游戏】开心消消乐背景音乐.mp3" type="audio/mp3" /> </audio>
<table border="1" cellspacing="0" cellpadding="15 " width="800" align="center" >
<tr >
<td>类型</td>
<td>图片</td>
<td>名称</td>
<td>描述</td>
</tr>
<tr>
<td rowspan="4">人物</td>
<td><a href="https://cn.bing.com/search?q=%e5%bc%80%e5%bf%83%e6%b6%88%e6%b6%88%e4%b9%90%e5%ae%98%e7%bd%91&FORM=HDRSC1"><img src="./莱萌鸡.jpg" width="90"></a></td>
<td>莱萌鸡</td>
<td>无</td>
</tr>
<tr >
<td><a href="https://cn.bing.com/search?q=%e5%bc%80%e5%bf%83%e6%b6%88%e6%b6%88%e4%b9%90%e5%ae%98%e7%bd%91&FORM=HDRSC1"><img src="./栗雄.png" width="90"></a></td>
<td>栗雄</td>
<td>无</td>
</tr>
<tr >
<td>
<a href="https://cn.bing.com/search?q=%e5%bc%80%e5%bf%83%e6%b6%88%e6%b6%88%e4%b9%90%e5%ae%98%e7%bd%91&FORM=HDRSC1"><img src="./么么狐.jpg" width="90"></a></td>
<td>么么狐</td>
<td>无</td>
</tr><tr >
<td><a href="https://cn.bing.com/search?q=%e5%bc%80%e5%bf%83%e6%b6%88%e6%b6%88%e4%b9%90%e5%ae%98%e7%bd%91&FORM=HDRSC1"><img src="./紫咪小鹰.jpg" width="90"></a></td>
<td>紫咪小鹰</td>
<td>无</td>
</tr>
<tr>
<td rowspan="3">障碍</td>
<td><a href="https://cn.bing.com/search?q=%e5%bc%80%e5%bf%83%e6%b6%88%e6%b6%88%e4%b9%90%e5%ae%98%e7%bd%91&FORM=HDRSC1"><img src="./毛球.png" width="90"></a></td>
<td>黑色毛球</td>
<td>在灰色毛球周围匹配消除</td>
</tr>
<tr >
<td><a href="https://cn.bing.com/search?q=%e5%bc%80%e5%bf%83%e6%b6%88%e6%b6%88%e4%b9%90%e5%ae%98%e7%bd%91&FORM=HDRSC1"><img src="./冰块.png" width="90"></a></td>
<td>冰块</td>
<td>
<ul>
<li>消除冰块上的小动物可以击碎冰块</li>
<li>冰块最多三层</li>
</ul>
</td>
</tr>
<tr >
<td><a href="https://cn.bing.com/search?q=%e5%bc%80%e5%bf%83%e6%b6%88%e6%b6%88%e4%b9%90%e5%ae%98%e7%bd%91&FORM=HDRSC1"><img src="./金豆荚.png" width="90"></a></td>
<td>金豆荚</td>
<td>消除金豆荚下方小动物使其消除</td>
</tr>
<tr>
<td rowspan="3">外挂</td>
<td> <video controls width="90" height="90" ><source src="video/video2.mp4" ></video></td>
<td>小木槌</td>
<td><ul>
<li>消除任意障碍或动物一次</li>
<li>每局只能使用三次</li>
</ul>
</td>
</tr>
<tr >
<td><video controls width="90" height="90"><source src="video/video3.mp4"> </video></td>
<td>强制交换</td>
<td>
<ul>
<li>强制交换相邻两个动物</li>
<li>每局限用两次</li>
</ul>
</td>
</tr>
<tr >
<td><video controls width="90" height="90"><source src="video/video1.mp4"> </video></td>
<td>加5步</td>
<td>
<ul>
<li>剩余步数增加五步</li>
<li>步数低于6步时使用</li>
<li>不限使用次数</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
3.总结
通过VSCode开发工具，使用表格(table)，超链接(a)，列表(ul)，音频(audio)，视频（video）等标签书写代码实现游戏介绍表格页面。
