WTF HTML教程,帮助新人快速入门HTML。
推特:@WTFAcademy_ | @0xAA_Science
WTF Academy社群: 官网 wtf.academy | WTF Solidity教程 | discord | 微信群申请
所有代码和教程开源在github: github.com/WTFAcademy/WTF-HTML
超链接是 HTML 中的一项基本功能,它可以链接到网页的其他部分,或者链接到其他网页,甚至是其他网站。在这一章节,我们将详细介绍如何在 HTML 中使用超链接。
超链接在 HTML 中主要通过 <a>
标签来创建。<a>
标签内部一般包含一些文本或者图片,这些内容将成为链接的可点击部分。同时,我们通过<a>
标签的 href
属性指定链接的目标地址。
<a href="https://wtf.academy">访问 WTF Academy 的官网</a>
浏览器效果:
你可能要添加到你的链接的另一个属性是 title(标题);这旨在包含关于链接的补充信息,例如页面包含什么样的信息或需要注意的事情。
<a href="https://wtf.academy/" title="面向开发者的Web3开源学院。">访问 WTF Academy 的官网</a>
结果如下(当鼠标指针悬停在链接上时,标题将作为提示信息出现):
Note
链接的标题仅当鼠标悬停在其上时才会显示,这意味着使用键盘来导航网页的人很难获取到标题信息。如果标题信息对于页面非常重要,你应该使用所有用户能都方便获取的方式来呈现,例如放在常规文本中。
有时,我们希望点击链接后在新的浏览器窗口或者标签页中打开,而不是在当前页面打开。这可以通过 <a>
标签的 target
属性来实现。如果我们希望链接在新的标签页打开,可以将 target
属性设置为 _blank
。
例如:
<a href="https://wtf.academy" target="_blank">访问 WTF Academy 的官网</a>
浏览器效果:
这个超链接点击后将在新的浏览器标签页中打开 WTF Academy 的官网。
在一个长的网页中,我们可能希望创建链接到页面内部某个部分的链接。这可以通过锚点链接来实现。首先,我们需要使用 <a>
标签的 name
或 id
属性来标记目标位置,然后在链接的 href
属性中使用 #
加上目标的 name
或 id
值来创建链接。
例如:
<a name="section1"></a>
<!-- 一些内容 -->
<a href="#section1">跳转到 section1</a>
浏览器效果:
这个超链接点击后将会跳转到页面的 section1
部分。
除了链接到其他网页,<a>
标签还可以链接到电子邮件地址。通过在 href
属性值前面添加 mailto:
,可以创建一个点击后会启动用户默认的邮件客户端,并创建一封新邮件的链接。
例如:
<a href="mailto:example@example.com">发送邮件到 example@example.com</a>
这个超链接点击后将启动用户的邮件客户端,并创建一封发送到 example@example.com
的新邮件。
<a href="https://wtf.academy/img/wtflogo.png" download="wtflogo">下载 WTFAcademy logo</a>
在这一章节中,我们介绍了如何在 HTML 中创建和使用超链接,包括普通链接、在新标签页打开的链接、邮箱链接和锚点链接。理解和掌握超链接是学习 HTML 的一个重要步骤,它能使你的网页和其他网页或者页面内部的其他部分相互连接。