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标签源代码