首页 前端知识 HTML — 链接

HTML — 链接

2024-02-14 09:02:37 前端知识 前端哥 421 276 我要收藏

一. 概述

        HTML 使用超链接与网络上的另一个文档相连,可以实现点击即查看另一个文档的内容。HTML 中的链接允许用户在浏览网页时单击文本或图片来跳转到其他位置。

二. HTML 链接🔗 —— 使用标签

        HTML 中使用  <a></a> 标签来设置网页中的超链接。在需要的位置给设置 <a></a> 标签,将内容包含在标签中,同时设置 href 属性,设置点击超链接后跳转的地址。

<a href="https://www.com">超链接书写事例</a>

        在网页中,当鼠标移动到超链接上时,箭头会变成小手。而 🔗 的展现形式如下:

  • 未访问过的 🔗 字体为蓝色,带有下划线;
  • 访问过的 🔗 字体为紫色,带有下划线;
  • 点击 🔗 时,字体为红色,带有下划线。

超链接可根据情况自定义样式,具体现实情况以真实代码为主。

三. HTML 链接🔗 — 语法

        创建超链接主要使用的 HTML 元素是 <a> 标签元素(又称锚元素)。

        <a> 标签的属性如下所示:

  • href:指定链接目标的URL,这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
  • target(可选):指定链接如何在浏览器中打开。常见的值包括 _blank(在新标签或窗口中打开链接)和 _self(在当前标签或窗口中打开链接)。
  • title(可选):提供链接的额外信息,通常在鼠标悬停在链接上时显示为 title 提示。
  • rel(可选):指定与链接目标的关系,如 nofollow、noopener 等。
  • id 属性:用于创建一个 HTML 文档书签。
1.文本链接
<a href="https://www.example.com">
  文本示例
</a>

2.图片链接

<a href="https://www.example.com">
  <img src="example.jpg" alt="示例图片">
</a>

3.锚点
<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>

4.下载
<a href="document.pdf" download>下载文档</a>

        其中 <a> 标签的锚点指的是可以在同一页面内创建内部链接,这称为锚点链接。要创建锚点链接,需要在目标位置使用 <a> 元素定义一个标记,并使用#符号引用该标记。

        而如果想将链接用于下载文件而不是导航到另一个网页,可以使用 download 属性。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1996.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!