欢迎光临
我们一直在努力

HTML | 超链接与空链接

超链接与空链接

HTML超链接常用于不同页面之间的跳转,几乎所有页面都存在着超链接。超链接使用的标签为<a>标签,可以通过文字、图片等进行跳转,你可以跳转到任何链接(通过相对位置跳转到内部页面或通过URL跳转到外部链接。)

空链接指的是把<a>标签的href属性设置为#,这样该链接会具有正常链接的样式,但不会进行跳转。空链接常用于不确定跳转到哪个链接时使用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <!--下面是文字超链接 -->
        <a href="http://blog.sanrenyan.com"><p>点我打开散人研博客</p></a> <!--跳转到外部链接-->
        <a href="line2.html"><p>点我跳转到另一个链接!</p></a> <!--跳转到内部链接-->

        <!--下面是图片超链接,即在图片<img>标签外添加<a>标签-->
        <p>点击下面的图片,你可以打开百度!</p>
        <a href="http://www.baidu.com"><img src="img/baidu.jpg" alt="点我打开百度" width="150px" height="100px"></a><br>

        <!--下面是空连接,通常如果我们不确定往哪里跳转,可以先设置链接为#-->
        <a href="#"><p>这是一个空连接,点我是没有任何用的!</p></a>
    </body>
</html>

<a>标签的基本属性

<a>标签有很多属性,我们常用的有href(链接地址)、target(新页面打开方式)、name(定义锚的名称,HTML5中不支持,下一篇文章介绍)。

在target中的两个值 _blank 和_self最为常用,其中_blank为在新页面打开链接,_self为在当前页面打开链接!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <!--下面是不同target打开方式 -->
        <a href="http://blog.sanrenyan.com"  target="_blank"><p>点我打开散人研博客</p></a> <!--新页面打开-->
        <a href="http://blog.sanrenyan.com"  target="_self"><p>点我打开散人研博客</p></a> <!--原页面打开-->

    </body>
</html>

超链接发送邮箱

通过<a href = "mailto:邮件地址">...</a>可以直接设置发送邮件。

赞(0) 打赏
未经允许不得转载:散人研 » HTML | 超链接与空链接
分享到: 更多 (0)

评论 抢沙发

9 + 9 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏