HTML 5 详解之链接标签

<!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>
赞 (0)

相关推荐