html六个基本标签,HTML基础篇（六）

嗨喽大家好，在上一篇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” 来替换，这样浏览器才能正确显示。

点击邮件超链接前的页面

点击邮件超链接后的页面

六、练习题

好了，超链接的内容就这么多，又到了练习环节啦～

以上就是本篇文章的全部内容，下一篇开始讲框架啦！

如果你看到了这里，就是对我最大的鼓励～

练习答案晚点会在评论区公布哦！

咱们下一篇见～

每天学习一点点，每天进步一点点。

声明：部分图片来源于网络，如有侵权请联系告知删除，谢谢！

举报/反馈