建立超链接

什么是超链接?

超链接是互联网提供的最令人兴奋的创新之一,它们从一开始就一直是互联网的一个特性,使互联网成为互联的网络。超链接使我们能够将我们的文档链接到任何其他文档(或其他资源),也可以链接到文档的指定部分,我们可以在一个简单的网址上提供应用程序(与必须先安装的本地应用程序或其他东西相比)。几乎任何网络内容都可以转换为链接,点击(或激活)超链接将使网络浏览器转到另一个网址(URL)。

链接的解析

通过将文本(或其他内容,见块级链接)转换为<a>元素内的链接来创建基本链接, 给它一个href属性(也称为目标),它将包含您希望链接指向的网址。

<p>我创建了一个指向
<a href="https://www.mozilla.org/zh-CN/">Mozilla 主页</a>
的超链接。
</p>

结果如下所示:

我创建了一个指向 Mozilla 主页 的超链接。

使用title属性添加支持信息

您可能要添加到您的链接的另一个属性是标题;这旨在包含关于链接的补充有用信息,例如页面包含什么样的信息或需要注意的事情。 例如:

<p>我创建了一个指向
<a href="https://www.mozilla.org/zh-CN/"
   title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">Mozilla 主页</a>
的超链接。
</p>

结果如下(当鼠标指针悬停在链接上时,标题将作为提示信息出现)

块级链接

如上所述,你可以将一些内容转换为链接,甚至是块级元素。例如你想要将一个图像转换为链接,你只需把图像元素放到<a></a>标签中间。

<a href="https://www.mozilla.org/zh-CN/">
  <img src="mozilla-image.png" alt="链接至 Mozilla 主页的 Mozilla 标志">
</a>

文档片段

超链接除了可以链接到文档外,也可以链接到HTML文档的特定部分(被称为文档片段)。要做到这一点,你必须首先给要链接到的元素分配一个id属性。例如,如果你想链接到一个特定的标题,可以这样做:

<h2 id="Mailing_address">邮寄地址</h2>

然后链接到那个特定的id,您可以在URL的结尾使用一个井号指向它,例如:

<p>要提供意见和建议,请将信件邮寄至 <a href="contacts.html#Mailing_address">我们的地址</a>。</p>

你甚至可以在同一份文档下,通过链接文档片段,来链接到同一份文档的另一部分:

<p>本页面底部可以找到 <a href="#Mailing_address">公司邮寄地址</a>。</p>

电子邮件链接

当点击一个链接或按钮时,打开一个新的电子邮件发送信息而不是连接到一个资源或页面,这种情况是可能做到的。这样做是使用<a>元素和mailto:URL的方案。
其最基本和最常用的使用形式为一个mailto:link (链接),链接简单说明收件人的电子邮件地址。例如:

<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>

这会创建一个链接,看起来像这样: 向 nowhere 发邮件

 

具体细节

除了电子邮件地址,您还可以提供其他信息。事实上,任何标准的邮件头字段可以被添加到你提供的邮件URL。 其中最常用的是主题(subject)、抄送(cc)和主体(body) (这不是一个真正的头字段,但允许您为新邮件指定一个短内容消息)。 每个字段及其值被指定为查询项。

下面是一个包含cc、bcc、主题和主体的示例:

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

注意: 每个字段的值必须是URL编码的。 也就是说,不能有非打印字符(不可见字符比如制表符、换行符、分页符)和空格 percent-escaped. 同时注意使用问号(?)来分隔主URL与参数值,以及使用&符来分隔mailto:中的各个参数。 这是标准的URL查询标记方法。阅读 GET 方法 以了解哪种URL查询标记方法是更常用的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值