web--HTML超链接标记使用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web--HTML超链接标记使用相关的知识，希望对你有一定的参考价值。
一、学习目标·
- 掌握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">
h3text-align:center;color:#e41daf;
#div1text-indent:2em;text-align:center;
imgwidth:20px;height:20px;
#imgvertical-align:text-bottom;
</style>
</head>
<body>
<h3>网址导航页面</h3>
<hr>
<div id="div1" class="">
<table borderframe=void 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表格标签使内容更加整齐，通过这一次实验学到了不少东西，同时还增加了我的动手能力，受益匪浅。
以上是关于web--HTML超链接标记使用的主要内容，如果未能解决你的问题，请参考以下文章