5、超链接标签
5、超链接标签
超链接标签就是我们常说的a标签
<a href="path" target="目标窗口位置">连接文本或图像</a>
<!--
href（必填项）：连接路径
target：连接在哪个窗口打开？是在新页面打开还是在当前页面打开常用值：_self在当前页面打开_blank在新页面打开
-->
一、页面间连接
（一）文字超链接
<a href="1.我的第一个网页.html">跳转到我的第一个网页</a>
<a href="https://www.baidu.com">跳转到百度</a>
（二）图片超链接
<!--图片超链接-->
<a href="1.我的第一个网页.html"><img src="../resources/image/1.jpg" alt="Dryant" title="悬停文字" width="300" height="300">
</a>
二、锚链接
锚链接也是“a标签”，但是他需要配合一些属性来使用，比如回到顶部、回到底部
- 需要一个标记：使用a标签的name属性作为标记
- 跳转到标记：通过#+标记名字跳转到锚链接位置
需要用“#”来跳转
回到顶部
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签学习</title>
</head>
<body>
<!--使用name属性作为标记-->
<a name="top"></a>
<!--a标签
href（必填项）：连接路径，表示要跳转到哪个页面
target：连接在哪个窗口打开？是在新页面打开还是在当前页面打开常用值：_self在当前页面打开，也就是在自己的页面打开_blank在新标签打开-->
<a href="1.我的第一个网页.html">跳转到我的第一个网页</a>
<a href="https://www.baidu.com">跳转到百度</a>
<br/><!--图片超链接-->
<a href="1.我的第一个网页.html"><img src="../resources/image/1.jpg" alt="Dryant" title="悬停文字" width="300" height="300">
</a><p><a href="1.我的第一个网页.html"><img src="../resources/image/1.jpg" alt="Dryant" title="悬停文字" width="300" height="300"></a>
</p><p><a href="1.我的第一个网页.html"><img src="../resources/image/1.jpg" alt="Dryant" title="悬停文字" width="300" height="300"></a>
</p>
<p><a href="1.我的第一个网页.html"><img src="../resources/image/1.jpg" alt="Dryant" title="悬停文字" width="300" height="300"></a>
</p>
<p><a href="1.我的第一个网页.html"><img src="../resources/image/1.jpg" alt="Dryant" title="悬停文字" width="300" height="300"></a>
</p><!--锚链接-->
<a href="#top">回到顶部</a>
</body>
</html>
三、功能性连接
（一）邮件链接
mailto
<!--邮件链接
mailto
-->
<a href="mailto:******@qq.com">联系邮箱</a>
（二）QQ推广
- 搜索QQ推广，上官网
- 在推广工具中自动生成a标签源代码