HTML 七大超链接 && 跳转方式的区别

   日期:2024-12-26    作者:sorbitols 移动:http://ljhr2012.riyuangf.com/mobile/quote/51081.html

HTML 的超链接元素

1.文本链接

2.瞄点链接

3.图像链接

4.图像热区链接

5.E-mail链接

6.JavaScript链接

7.空链接


首先了解一下超链接跳转动作的四个方式

<a> 标签的 target 属性值     属性值                                       含义   _self默认值,在超链接所在窗口打开目标页面  _blank在新的浏览器窗口打开目标页面  _parent将目标页面载入到含有该超链接框架的父框架或父窗口中  _top在当前的整个浏览器窗口中打开目标页面,删除所有框架

 

效果图展示

跳转是个动作,需要录屏才能让你们看到效果,但是小女子不才,下面附上代码,自己点一下试试就理解了~

 
 

文本链接,指的是 <a> 和 </a> 标签之间的内容为文本。链接目标可以是站内或者站外目标,注意站外目标必须使用绝对路径。

根据瞄点快速跳转到你想看的地方,就跟目录一样。比如你想看第十章的内容,你点第十章就立马跳到第十章了,不需要一章一章的翻阅。格式:先定义 id 值,在 <a> 标签的 name属性 "#+你刚刚定义的 id"

页面立刻跳转到第一章,这就很开心,很多页面都是用的瞄点链接,写的返回顶部的功能哦!学起来呀

类似于引用别的网站上的图片,直接看效果吧。

这是我百度上随便找的一张图片,把地址复制下来了,非盈利哈。图片就不给你们看了,万一说我(qinquan~)。

你想要引用哪张图片,就把图片地址复制到 img 标签的 src 里面就行了,原封不动的复制,错一个图片都找不到。 

图像热区链接指的是一张图片不同的位置可以链接不同的目标位置。这是就不再是<a>标签,而是<area>标签,包含了 shape 和 cords 两个属性。下面是对应的 shape(形状) 对应的 cords 属性.

  • circle : 圆形               x,y,r                              (x,y) 圆心坐标 , r 是半径
  • rect : 矩形                 x1,y1;x2,y2                  (x1,y1) 矩形左上角坐标;(x2,y2) 矩形右下角坐标
  • poly : 多边形             x1,y1;x2,y2;x3.....        (x1,y1);(x2,y2)多边形各个点的坐标

注意:<area>的坐标系是在第四象限,就是 x 正半轴 ,y 负半轴

 
 

格式:<a href="mailto:这里写邮箱地址">这里写内容</a>

点击内容,就跳转到发送邮件那个页面,这个不展示了,直接跳走啦≧ ﹏ ≦

格式:<a href="javascript:alert('我是兔兔小淘气~')">点击</a>

空链接顾名思义,就是空的呗。

 
 


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号