HTML 5 详解之链接标签

时间:2021-02-03 11:09:00 来源:互联网 作者: 神秘的大神 字体:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<!--使用 name 作为锚标记-->
<a name="top">顶部</a>
<br/>

<!--
a 标签
href:必填,表示跳转地址
target:表示窗口打开方式
    _blank:在新标签页中打开
    _self:在当前标签中打开【默认打开方式】
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<br/>

<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
<br/>

<a href="1.我的第一个网页.html">
    <img src="../resources/image/1.jpg" alt="我的头像" title="悬停文字" width="300" height="300">
</a>
<br/>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="我的头像" title="悬停文字" width="300" height="300">
    </a>
</p>
<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="我的头像" title="悬停文字" width="300" height="300">
    </a>
</p>
<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="我的头像" title="悬停文字" width="300" height="300">
    </a>
</p>
<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="我的头像" title="悬停文字" width="300" height="300">
    </a>
</p>
<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="我的头像" title="悬停文字" width="300" height="300">
    </a>
</p>

<!--
锚链接
1、需要一个锚标记
2、跳转到标记
通过 #name名实现跳转 回到顶部
注意:锚链接可跨页面实现跳转【博客右侧栏目常用】实现方式相同
-->
<a href="#top">回到顶部</a>
<br/>

<!--
功能性链接
邮件链接:mailto
QQ链接:QQ推广 -> 推广工具
-->
<a href="mailto:24736743@qq.com">点击联系我</a>
<br/>

<p>
    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=403132995&site=qq&menu=yes">
        <img border="0" src="http://pub.idqqimg.com/qconn/wpa/button/button_131.gif" alt="你好,加我领取小电影" title="你好,加我领取小电影"/>
    </a>
</p>

</body>
</html>