详解HTML超链接
超链接是互联网提供的最令人兴奋的创新之一,它们从一开始就一直是互联网的一个特性,使互联网成为互联的网络。HTML超链接也是各个网站网页之间实现相互连接的一个手段之一,被广泛应用在各大网站。
HTML超链接使我们能够将我们的文档链接到任何其他文档(或其他资源),也可以链接到文档的指定部分,我们可以在一个简单的网址上提供应用程序(与必须先安装的本地应用程序或其他东西相比)。几乎任何网络内容都可以转换为链接,点击(或激活)超链接将使网络浏览器转到另一个网址(URL)。URL 可以指向 HTML 文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。 如果浏览器不知道如何显示或处理文件,它会询问您是否要打开文件(需要选择合适的本地应用来打开或处理文件)或下载文件(以后处理它)。
HTML超链接大致分为以下7类:
1、简单链接
<a href="这里写链接地址" title="前端一万小时">知乎:itsOli</a>
<!-- 注释:这里的 title 属性,作用是:当我们把鼠标停在 itsOli 上时,会弹出一个文本框:
前端一万小时。 -->复制代码
2、外部链接
将 target 设置成 _blank 时,点击这个链接,浏览器会新开一个窗口打开该网页:
<a href="这里写链接地址" title="前端一万小时" target="_blank">知乎:itsOli</a>
<!-- 注释:当然这里的 target 属性还可以设置成其他值。-->复制代码
3、 返回页面顶部链接
<a href="#">返回页面顶部</a>
<!-- 注释:这里的 # 后边是可以加东西的,可以是文档中某个元素的 ID,也可以是某个标题等等(但前
提是这些东西要唯一,不然没办法定位到具体位置)。 -->复制代码
4、 图片链接
用图片来作为链接可点击的对象。
5、下载链接
<a href="https://……这里放下载的链接" download>下载</a>
<!-- 注释:当我们点击“下载”二字时,就会自动下载这个链接的东西。 -->复制代码
6、电话链接
<a href="tel:+86177******">打电话给 Oli</a>
<!-- 注释:当用户是手机浏览页面时,点击“打电话给 Oli”,手机就会自动拨号到这个号码。 -->
7、 Email 链接
<a href="mailto:olizhao@qq.com">发邮件给 Oli</a>
<!-- 注释:当点击“发邮件给 Oli ”时,则自动打开邮箱跳转到写信页面; -->
<a href="mailto:olizhao@qq.com" cc="seema.qdywxs@gmail.com">发邮件给 Oli 并抄送给 Seema</a>
<!-- 注释:当点击“发邮件给 Oli 并抄送给 Seema”,则自动打开邮箱跳转到写信页面并填好抄送人。 -->
HTML超链接是HTML技术中非常重要的一个知识点,几乎所有的网站多多少少都有上述的几种超链接存在,也是互联网的特性之一。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架