超链接标签

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像。将文档链接到其他文档或资源,链接到文档的特定部分。

(1)语法

<a href="">文字或图片</a>

(2)语义

超链接

(3)默认样式

  • 不独占一行

  • 默认当前窗口打开

  • 默认带有下划线、文字颜色

(4)超链接属性

  • href属性

    • 作用:指定链接跳转的地址

      <a href="http://www.jd.com">京东商城(文字链接)</a>
      <a href="4.例-导航.html" target="_blank"><img src="pic.png" alt="">(图片链接)</a>
  • target属性

    • 作用:指定目标地址的打开方式

    • 取值

      • _blank新窗口打开

      • _self当前窗口打开(默认值 )

       <a href="http://www.jd.com" target="_blank"><img src="pic.png" alt=""></a>

  • title属性

    • 作用:定义提示文本,将鼠标悬停在链接上会显示标题作为工具提示

(5)链接的类型

  • 空链接

    • 描述:如果当时没有确定链接的目标时使用空链

      <a href="#">商品</a>
  • 外部链接

    • 描述:链接到站外其他 网站的链接 (绝对地址)

      <a href="https://www.baidu.com"> 百度 </a>
  • 内部链接 (相对地址)

    • 描述:网站内部页面之间的相互链接。直接链接内部页面的名称

      <a href="index.html">首页</a>
  • 下载链接

    • 描述:如果href里面的地址是一个文件或压缩包,会下载这个文件。

    • 代码演示

      <a href="1.txt">下载文本文件</a>

    (6)锚点链接

    描述:当我们点击锚点链接时,可以快速定位到页面中的某个位置。

    • 跳转至当前页面指定位置的锚点

      • 语法:

      定义目标:<p id="box"></p> 
      定义跳转:<a href="#box"></a>
    • 跳转至其它页面的锚点

      • 语法:

      定义目标:a.html页面的 <div id="box"></div>
      定义跳转:<a href="a.html#test"></a>

    总结:重点掌握内部链接,外部链接,锚点链接。

    效果参考:腾讯公司 - Tencent 腾讯 腾讯企业站

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值