八、HTML 链接

news2025/6/9 21:48:22

一、HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。

HTML中的链接是一种用于在不同网页之间导航的元素。

链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。

链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。

 1、实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>HTML链接</title>
</head>

<body>

    <p>
        <a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。
    </p>

    <p><a href="http://www.baidu.com/">本文本</a> 指向百度页面的链接。</p>

</body>

</html>

运行结果：

二、HTML 超链接（链接）

HTML使用标签 <a> 来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签 <a> 中使用了 href 属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

  • 一个未访问过的链接显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 点击链接时，链接显示为红色并带有下划线。

 注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

三、HTML 链接语法

以下是 HTML 中创建链接的基本语法和属性：<a> 元素：创建链接的主要HTML元素是<a>（锚）元素。<a>元素具有以下属性：

  • href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
  • target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。
  • title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
  • rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。

链接的 HTML 代码很简单，它类似这样：

<a href="url">链接文本</a>

href 属性描述了链接的目标。

1、实例

<a href="https://www.baidu.com/">访问百度</a>

上面这行代码显示为：访问百度首页

点击这个超链接会把用户带到菜鸟教程的首页。

提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

2、文本链接

最常见的链接类型是文本链接，它使用 <a> 元素将一段文本转化为可点击的链接，例如：

<a href="https://www.example.com">访问示例网站</a>

3、图像链接

您还可以使用图像作为链接。在这种情况下，<a> 元素包围着 <img> 元素。例如：

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

4、锚点链接

除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用 <a> 元素定义一个标记，并使用#符号引用该标记。例如：

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

5、下载链接

如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。例如：

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

四、HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。

下面的这行中的blank表示会在新窗口打开文档：

<a href="https://www.baidu.com/" target="_blank" rel="noopener noreferrer">访问百度首页</a>

五、HTML 链接- id 属性

id 属性可用于创建一个 HTML 文档书签。

提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

1、实例

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

<a href="#tips">访问有用的提示部分</a>

 或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

六、基本的注意事项 - 有用的提示

注释： 请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。

七、案例

1、本例演示如何跳出框架，假如你的页面被固定在框架之内

本例演示如何使用书签

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>如何使用书签</title>
</head>

<body>

    <p>
        <a href="#C4">查看章节 4</a>
    </p>

    <h2>章节 1</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 2</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 3</h2>
    <p>这边显示该章节的内容……</p>

    <h2><a id="C4">章节 4</a></h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 5</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 6</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 7</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 8</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 9</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 10</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 11</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 12</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 13</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 14</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 15</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 16</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 17</h2>
    <p>这边显示该章节的内容……</p>

</body>

</html>

运行结果：

点击后会自动跳转到章节4的位置

2、跳出框架

本例演示如何跳出框架，假如你的页面被固定在框架之内。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>百度</title>
</head>

<body>

    <p>跳出框架?</p>
    <a href="http://www.baidu.com/" target="_top">点击这里!</a>

</body>

</html>

运行结果：

 点击紫色按钮会跳转到百度

 3、创建电子邮件链接

本例演示如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>创建电子邮件链接</title>
</head>

<body>

    <p>
        这是一个电子邮件链接：
        <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
            发送邮件</a>
    </p>

    <p>
        <b>注意:</b> 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
    </p>

</body>

</html>

 运行结果：

 4、创建电子邮件链接2

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>创建电子邮件2</title>
</head>

<body>

    <p>
        这是另一个电子邮件链接：
        <a href="mailto:someone@example.com?
            cc=someoneelse@example.com&bcc=andsomeoneelse@example
             .com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!"
            target="_top">发送邮件!</a>
    </p>

    <p>
        <b>注意:</b> 单词之间的空格使用 %20 代替，以确保浏览器可以正常显示文本。
    </p>

</body>

</html>

运行结果：

点击后会自动跳转到邮件页面

七、HTML 链接标签

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1355058.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C#: Label、TextBox 鼠标停留时显示提示信息

C#: Label、TextBox 鼠标停留时显示提示信息

说明&#xff1a;记录在 Label、TextBox 控件上 鼠标停留时显示提示信息的方法。 1.效果图 2.具体实现步骤 1. 在Form 窗口中先创建 Label 并取名&#xff1a;KEY_label &#xff0c;或 TextBox 取名&#xff1a;KEY_textBox 在 Form1 函数中添加初始化代码&#xff0c;如下&…
阅读更多...
各章练习题解析

各章练习题解析

目录 第1章 EDIT模型概述 题目 解析 第1章 EDIT模型概述 题目 第1题 第2题
阅读更多...
深度学习中的大模型「幻觉」问题：解析、原因及未来展望

深度学习中的大模型「幻觉」问题：解析、原因及未来展望

如何解决大模型的「幻觉」问题&#xff1f; 什么是大模型「幻觉」 大模型幻觉是指在深度学习领域中&#xff0c;尤其是涉及大型神经网络时&#xff0c;模型展现出在理论上不应具备的性能或能力。这种现象可能导致误导性的结果&#xff0c;表现为在训练数据上过度拟合&#xff0…
阅读更多...
Apache 网页优化

Apache 网页优化

技能目标&#xff1a; 掌握 Apache 网页压缩掌握 Apache 网页缓存掌握Apache 隐藏版本信息掌握 Apache 网页防盗链 1.1网页压缩与缓存 在使用 Apache 作为 Web 服务器的过程中&#xff0c;只有对 Apache 服务器进行适当的优化配 置才能让 Apache 发挥出更好的性能。反过来说&…
阅读更多...
CompressAI:深度学习与传统图像压缩

CompressAI:深度学习与传统图像压缩

1、图像压缩算法原理 传统的有损图像压缩方法&#xff0c;如JPEG &#xff0c; JPEG2000 &#xff0c; HEVC或AV1或VVC&#xff0c;在类似的编码方案上进行了迭代改进&#xff1a;将图像划分为像素块&#xff0c;使用变换域通过线性变换(例如:DCT或DWT)去相关空间频率&#xf…
阅读更多...
Unity 打包AB 场景烘培信息丢失

Unity 打包AB 场景烘培信息丢失

场景打包成 AB 资源的时候&#xff0c;Unity 不会打包一些自带相关的资源 解决办法&#xff1a;在 Project settings > Graphics下设置&#xff08;Automatic 修改成 Custom&#xff09;
阅读更多...
ELement UI时间控件el-date-picker误差8小时解决办法

ELement UI时间控件el-date-picker误差8小时解决办法

一、问题描述&#xff1a; 在项目中引用了elementui中的date-picker组件&#xff0c;选中的时间跟实际相差八小时&#xff0c;且格式不是自己想要的格式 <el-date-pickertype"date"placeholder"选择日期"format"yyyy/M/d"v-model"form…
阅读更多...
宏集PC Runtime软件助推食品行业生产线数字化革新

宏集PC Runtime软件助推食品行业生产线数字化革新

一、前言 近年来&#xff0c;中国食品行业发展迅速且灵活多变&#xff0c;在当前经济下行的情形下&#xff0c;食品行业正面临着日益激烈的竞争&#xff0c;导致企业利润下降。 为了保持企业市场竞争力&#xff0c;国内某top10食品企业采用宏集SCADA解决方案—PC Runtime软件…
阅读更多...
2020年认证杯SPSSPRO杯数学建模B题(第二阶段)分布式无线广播全过程文档及程序

2020年认证杯SPSSPRO杯数学建模B题(第二阶段)分布式无线广播全过程文档及程序

2020年认证杯SPSSPRO杯数学建模 B题 分布式无线广播 原题再现&#xff1a; 以广播的方式来进行无线网通信&#xff0c;必须解决发送互相冲突的问题。无线网的许多基础通信协议都使用了令牌的方法来解决这个问题&#xff0c;在同一个时间段内&#xff0c;只有唯一一个拿到令牌…
阅读更多...
Flutter迁移到空安全步骤

Flutter迁移到空安全步骤

Flutter迁移到空安全将你现有的代码带到空安全的世界https://dart.cn/null-safety/migration-guide1. 下载并使用Flutter 3.7.12 SDK&#xff0c; 2. 使用dart pub outdated 检查并更新你的依赖&#xff08;然后使用下面的命令升级依赖&#xff09; &#xff08;1&#xff09…
阅读更多...
django websocket

django websocket

目录 核心代码 consumers.py from channels.generic.websocket import WebsocketConsumer from channels.exceptions import StopConsumer import datetime import time from asgiref.sync import async_to_sync class ChatConsumer(WebsocketConsumer):def websocket_conne…
阅读更多...
HT81698 内置升压双声道 相互p2p兼容 HT81696

HT81698 内置升压双声道 相互p2p兼容 HT81696

HT81698内置升压的立体声D类音频功率放大器&#xff0c;其支持单节锂电、双节锂电串联、5V、12V等多种输入&#xff0c;升压后的电压提供给功放供电&#xff0c;功放支持双通道立体声BTL输出以及并联PBTL单声道输出; HT81698内置的升压电路&#xff0c;可通过FB脚设置升压值&a…
阅读更多...
HT760 2x30W12S输入，无电感，立体声D类放大器

HT760 2x30W12S输入，无电感，立体声D类放大器

HT760 典型应用图&#xff1a; HT760 引脚图&#xff1a; HT760 引脚定义信息&#xff1a; #HT760
阅读更多...
Netty实战(待完善)

Netty实战(待完善)

Netty组件 1. Bootstrap, ServerBootstrap Netty 中 Bootstrap 类是客户端程序的启动引导类&#xff0c;ServerBootstrap 是服务端启动引导类。 2. NioEventLoop, NioEventLoopGroup NioEventLoop 中维护了一个线程和任务队列&#xff0c;支持异步提交执行任务&#xff0c;…
阅读更多...
RK3568驱动指南｜第九篇 设备模型-第103章 在总线下注册设备实验

RK3568驱动指南｜第九篇 设备模型-第103章 在总线下注册设备实验

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…
阅读更多...
LeetCode-Java(29)

LeetCode-Java(29)

29. 两数相除 结果肯定落在dividend上&#xff0c;于是对这个区间每一个数进行二分查找&#xff0c;判断方法就是 while (l < r) {long mid l r 1 >> 1;if (mul(mid, y) < x) {l mid;} else {r mid - 1;}} 其中mul是一个要定义的快速乘法。 完整代码如下 …
阅读更多...
CH341StreamI2C参数解释

CH341StreamI2C参数解释

总体思路&#xff1a; 第一步&#xff1a;使用EEPROM写入相应的数据 第二步&#xff1a;使用EEPROM读取相应的数据 第三步&#xff1a;使用CH341StreamI2C函数还原读取过程 每一步需要逻辑分析仪进行对比。 第一步&#xff1a;数据写入CH341WriteEEPROM 使用CH341WriteE…
阅读更多...
当AI遇见大脑：电脑与人脑协同“进化”

当AI遇见大脑：电脑与人脑协同“进化”

编者按&#xff1a;2023年是微软亚洲研究院建院25周年。借此机会&#xff0c;我们特别策划了“智启未来”系列文章&#xff0c;邀请到微软亚洲研究院不同研究领域的领军人物&#xff0c;以署名文章的形式分享他们对人工智能、计算机及其交叉学科领域的观点洞察及前沿展望。希望…
阅读更多...
百度搜索金融：构建高时效、高可用的分布式数据传输系统

百度搜索金融：构建高时效、高可用的分布式数据传输系统

作者 | 搜索技术平台研发部 导读 分布式数据传输系统是一种用于在多个计算节点之间高效传输大量数据的系统&#xff0c;诣在高效的解决大规模数据迁移、备份、跨地域复制等问题&#xff0c;其广泛应用在实时数据流传输、跨数据中心数据迁移、多媒体传输等场景&#xff0c;在大多…
阅读更多...
一文读懂$mash 通证的 “Fair Launch” 规则，将公平发挥极致

一文读懂$mash 通证的 “Fair Launch” 规则，将公平发挥极致

Solmash 是Solana生态中由社区主导的铭文资产LaunchPad平台&#xff0c;该平台旨在为Solana原生铭文项目&#xff0c;以及通过其合作伙伴SoBit跨链桥桥接到Solana的Bitcoin生态铭文项目提供更广泛的启动机会。有了Solmash&#xff0c;将会有更多的Solana生态的铭文项目、资产通…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023