HTML 的超链接元素
1.文本链接
2.瞄点链接
3.图像链接
4.图像热区链接
5.E-mail链接
6.JavaScript链接
7.空链接
首先了解一下超链接跳转动作的四个方式:
效果图展示:
跳转是个动作,需要录屏才能让你们看到效果,但是小女子不才,下面附上代码,自己点一下试试就理解了~
文本链接,指的是 <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>
空链接顾名思义,就是空的呗。