嗨喽大家好,在上一篇HTML基础篇(五)里主要讲到了HTML表格标记的一些内容,那么接下来我们开始学习超链接吧。
我们平时在浏览网页时,点击某张照片,或者某些字体时就会跳转到另一个页面了,这就是超链接在起作用啦,而且正是超链接,才能将一个个网页连接起来,从而构成一个网站,因此超链接是十分重要的。
超链接的标记是双标记超链接文字,写在 内的字符在网页上会显示出不同的颜色,并且带有下划线。标记具有以下属性:
href属性:定义了这个超链接指向页面的url,即点击了这个超链接后页面是哪个页面,由url决定。这个属性对于超链接来说是一定要有的;name属性:定义锚点的名称,在锚点超链接上会用到;title属性:定义链接的注释文字,鼠标放在超链接上所显示的注释文字;target属性:规定在何处打开超链接指向页面,例如target="_blank"时超链接所指向的页面会在新窗口打开。
超链接有很多种,一般可以分为内部超链接、外部超链接、图片超链接、锚点超链接和邮件超链接五种,下面就一一介绍这五种超链接吧。
一、内部超链接
所谓内部超链接,是指超链接href属性的url是一个相对地址,这个地址是存在于自己的电脑上的,上面讲到过,正是超链接,才能将一个个网页连接起来,因此内部超链接的url其实就是我们所写的HTML文件的地址。将它们放在同一处(如都是在桌面或都是在xx文件夹里)时,url可以直接是HTML文件名+后缀名。
点击前的页面显示
点击后的页面显示
二、外部超链接
外部超链接跟内部超链接相反,它的url是一个绝对地址,就是我们平常看到的网址,像https://www.baidu.com这样的有域名的网址。这个超链接可以使得我们的网页能够跳转到互联网上的网页。
点击超链接前的页面
点击超链接后的页面
三、图片超链接
图片超链接,顾名思义就是以图片的形式的超链接,因此需要用到前面所讲过的图片标记。标记写在 标记内即可使图片变成一个超链接。
图片超链接示例
四、锚点超链接
锚点超链接是一种特殊的超链接,其它的超链接是跳转到不同的页面,而锚点超链接则是在同一个页面中不同的位置间跳转。
对于页面比较长的网页,锚点超链接可以方便访客快速地在页面不同部分间跳转。
上面讲到的name属性,就是用于这类超链接的。作为超链接的字符,其href属性要以“#+锚点名称”命名,例如“href=#p1”,而被跳转的锚点的name属性就是以“锚点名称”命名,“#”要去掉,例如“name=p1”,那么点击了这个锚点超链接,就会跳转到所设置的相应的锚点那里。
点击锚点超链接前的页面
点击锚点超链接后的页面
五、邮件超链接
邮件超链接,就是点击超链接后会跳到邮件页面的超链接,但要想成功跳转,必须保证电脑上有相关的邮箱软件,例如Office的Outlook。
邮件超链接标记格式如下:
超链接文字
其中,“mailto:”后面写的是自己的邮箱,并且以“?”结尾;“cc=”后面是收件人的邮箱;“bcc=”后面是以秘密发送形式发送的收件人的邮箱;“subject=”后面是这封邮件的主题;“body=”后面是发送邮件所要写的内容。而连接符“&”是起连接作用的,不能缺少。
需要注意的是,其它的元素可以省略不写,但“mailto:”的内容必须要写。并且如果要用到空格,不能直接按Enter键,而是使用“ %20” 来替换,这样浏览器才能正确显示。
点击邮件超链接前的页面
点击邮件超链接后的页面
六、练习题
好了,超链接的内容就这么多,又到了练习环节啦~
以上就是本篇文章的全部内容,下一篇开始讲框架啦!
如果你看到了这里,就是对我最大的鼓励~
练习答案晚点会在评论区公布哦!
咱们下一篇见~
每天学习一点点,每天进步一点点。
声明:部分图片来源于网络,如有侵权请联系告知删除,谢谢!
举报/反馈