ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
# 链接标签 链接(hyperlink)是互联网的核心。它允许用户在页面上,从一个网址跳转到另一个网址,从而把所有资源联系在一起。 URL 是链接指向的地址。链接不仅可以指向另一个网页,也可以指向文本、图像、文件等资源。可以这样说,所有互联网上的资源,都可以通过链接访问。 ## 1.`<a>` 链接通过`<a>`标签表示,用户点击后,浏览器会跳转到指定的网址。下面就是一个典型的链接。 ```html <a href="https://www.dodoke.com/">渡课首页</a> ``` 上面代码就定义了一个超级链接。浏览器显示“渡课首页”,文字下面默认会有下划线,表示这是一个链接。用户点击后,浏览器跳转到`href`属性指定的网址。 `<a>`标签内部不仅可以放置文字,也可以放置其他元素,比如段落、图像、多媒体等等。 ~~~html <a href="https://noi.dodoke.com/"> <img src="http://noi.dodoke.com/images/logo.png"> </a> ~~~ 上面代码中,`<a>`标签内部就是一个图像。用户点击图像,就会跳转到指定网址。 - **href 属性** `href`属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。 上文已经给出了完整 URL 的例子,下面是锚点的例子。 ~~~html <a href="#demo">示例</a> ~~~ 上面代码中,`href`属性的值是`#`加上锚点名称。点击后,浏览器会自动滚动,停在当前页面里面`demo`锚点所在的位置。 - **target 属性** `target`属性指定如何展示打开的链接。它可以是在指定的窗口打开,也可以在`<iframe>`里面打开。 ~~~html <p><a href="http://www.dodoke.com" target="_blank">渡课首页</a></p> <p><a href="http://noi.dodoke.com" target="_blank">渡课 Online Judge</a></p> ~~~ 上面代码中,两个链接都在空白窗口打开。首先点击链接`渡课首页`,浏览器新建一个窗口,在该窗口打开`www.dodoke.com`。然后,用户又点击链接`渡课 Online Judge`,浏览器同样新建一个窗口,在该窗口打开`noi.dodoke.com`。 `target`属性的值也可以是以下四个关键字之一。 * `_self`:当前窗口打开,这是默认值。 * `_blank`:新窗口打开。 * `_parent`:上层窗口打开,这通常用于从父窗口打开的子窗口,或者`<iframe>`里面的链接。如果当前窗口没有上层窗口,这个值等同于`_self`。 * `_top`:顶层窗口打开。如果当前窗口就是顶层窗口,这个值等同于`_self`。 ## 2.邮件链接 链接也可以指向一个邮件地址,使用`mailto`协议。用户点击后,浏览器会打开本机默认的邮件程序,让用户向指定的地址发送邮件。 ~~~html <a href="mailto:contact@dodoke.com">联系我们</a> ~~~ 上面代码中,链接就指向邮件地址。点击后,浏览器会打开一个邮件地址,让你可以向`contact@dodoke.com`发送邮件。 除了邮箱,邮件协议还允许指定其他几个邮件要素。 * `subject`:主题 * `cc`:抄送 * `bcc`:密送 * `body`:邮件内容 使用方法是将这些邮件要素,以查询字符串的方式,附加在邮箱地址后面。 ~~~html <a href="mailto:contact@dodoke.com?cc=admin@dodoke.com&subject=hello&body=say%20hello">发送邮件</a> ~~~ 上面代码中,邮件链接里面不仅包含了邮箱地址,还包含了`cc`、`subject`、`body`等邮件要素。这些要素的值需要经过 URL 转义,比如空格转成`%20`。 不指定邮箱也是允许的,就像下面这样。这时用户自己在邮件程序里面,填写想要发送的邮箱,通常用于邮件分享网页。 ~~~html <a href="mailto:">告诉朋友</a> ~~~ ## 3.电话链接 如果是手机浏览的页面,还可以使用`tel`协议,创建电话链接。用户点击该链接,会唤起电话,可以进行拨号。 ~~~html <a href="tel:12345678900">拨打电话</a> ~~~ 上面代码在手机中,点击链接会唤起拨号界面,可以直接拨打指定号码。