一、学习目标·
- 掌握web前端开发工具的使用方法；
- 掌握HTML文档结构，学会编写简单的HTML程序；
- 熟悉HTML超链接及相关标记的使用方法，并掌握超链接标记的主要应用场景。
二、实验环境
VS Code,Win11
三、学习内容
（1）利用HTML超链接及相关标记编写一个网站导航页面，参考样式如图1所示：
四、代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网址导航</title> <style type="text/css"> h3{text-align:center;color:#e41daf;} #div1{text-indent:2em;text-align:center;} img{width:20px;height:20px;} #img{vertical-align:text-bottom;} </style> </head> <body> <h3>网址导航页面</h3> <hr> <div id="div1" class=""> <table borderframe=void width="700" height="80" align="center"> <tr> <td align="left"><img id=“img” src="百度.jpg"><a href="https://www.baidu.com/" title="baidu">百度</a></td> <td align="left"><img id="img" src="搜狐.jpg"><a href="https://www.sohu.com/" title="sohu">搜狐</a></td> <td align="left"><img id="img" src="新浪.jpg"><a href="https://www.sina.com/" title="xinlang">新浪</a></td> <td align="left"><img id="img" src="腾讯.jpg"><a href="https://www.qq.com/" title="baidu">腾讯</a></td> <td align="left"><img id="img" src="学信网.jpg"><a href="https://www.chsi.com.cn/" title="baidu">学信网</a></td> </tr> <tr> <td align="left"><img id="img" src="58.jpg"><a href="https://cc.58.com/" title="baidu">58</a></td> <td align="left"><img id="img" src="bilibili.jpg"><a href="https://www.bilibili.com/" title="baidu">bilibili</a></td> <td align="left"><img id="img" src="阳光高考.jpg"><a href="https://gaokao.chsi.com.cn/" title="baidu">阳光高考</a></td> <td align="left"><img id="img" src="知乎.jpg"><a href="https://www.zhihu.com/" title="baidu">知乎</a></td> <td align="left"><img id="img" src="淘宝.jpg"><a href="https://www.taobao.com/" title="baidu">淘宝</a></td> </tr> <tr> <td align="left"><img id=“img” src="凤凰网.jpg"><a href="https://www.ifeng.com/" title="baidu">凤凰网</a></td> <td align="left"><img id="img" src="12306.jpg"><a href="https://www.12306.cn/" title="baidu">12306</a></td> <td align="left"><img id="img" src="东方财富.jpg"><a href="https://www.eastmoney.com/" title="dongfangcaifu">东方财富</a></td> <td align="left"><img id="img" src="唯品会.jpg"><a href="https://www.vip.com/" title="weipinhui">唯品会</a></td> <td align="left"><img id="img" src="爱奇艺.jpg"><a href="https://www.iqiyi.com/" title="aiqiyi">爱奇艺</a></td> </tr> </div> </table> </body> </html>
五、心得体会
通过此次实验，我熟悉了HTML超链接及相关标记的使用方法，并掌握超链接标记的主要应用场景；并且对于网页的排版，我又使用了table表格标签使内容更加整齐，通过这一次实验学到了不少东西，同时还增加了我的动手能力，受益匪浅。
