八、HTML 链接

一、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.mzph.cn/news/595436.shtml

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

相关文章

Python进程、线程、协程：多任务并发编程指南

Python进程、线程、协程：多任务并发编程指南

概要 在当今计算机时代&#xff0c;为了提高程序的性能和响应速度&#xff0c;多任务并发编程成为了一种必不可少的技术手段。而Python作为一门高级编程语言&#xff0c;提供了多种多任务并发编程的方式&#xff0c;包括进程、线程和协程。本文将详细介绍这三种方式的使用教程…
阅读更多...
指针大礼包2

指针大礼包2

第11题 &#xff08;1.0分&#xff09; 题号:6877 难度:中 第8章 若有定义语句:double a, *p&a ; 以下叙述中错误的是(). A:定义语句中的*号是一个间址运算符 B:定义语句中的*号是一个说明符 C:定义语句中的p只能存放double类型变量的地址 D:定…
阅读更多...
【c语言】飞机大战终

【c语言】飞机大战终

效果展示 效果演示 源码展示 #include<stdio.h> #include <graphics.h> #include <assert.h> #include <stdlib.h> #include<conio.h>//_getch(); #include <time.h> #include <math.h> #include<mmsystem.h>//包含多媒体设备…
阅读更多...
Unity 打包AB 场景烘培信息丢失

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

场景打包成 AB 资源的时候&#xff0c;Unity 不会打包一些自带相关的资源 解决办法&#xff1a;在 Project settings > Graphics下设置&#xff08;Automatic 修改成 Custom&#xff09;
阅读更多...
基于web的电影院购票系统

基于web的电影院购票系统

**&#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;**一 、设计说明 1.1选题动因 …
阅读更多...
cnPuTTY 0.80.0.1—PuTTY Release 0.80中文版本简单说明~~

cnPuTTY 0.80.0.1—PuTTY Release 0.80中文版本简单说明~~

2023-12-18 官方发布了PuTTY 0.80本次发布主要是针对Terrapin攻击(CVE-2023-48795)的修改发布。 更多详细的内容请查看PuTTY Change Log。 有关Terrapin攻击可用简单参考&#xff1a;警告&#xff01;&#xff01;&#xff01;Terrapin攻击(CVE-2023-48795)~~~ 为了缓解此漏洞…
阅读更多...
振弦采集仪在地基沉降监测中的应用研究

振弦采集仪在地基沉降监测中的应用研究

振弦采集仪在地基沉降监测中的应用研究 振弦采集仪是一种专门用于测量地基沉降的仪器&#xff0c;它采用振弦原理来测量地基的沉降情况。振弦采集仪通过在地基上安装一根细长的弹性振弦&#xff0c;并测量振弦的变形来获得地基沉降的数据。在地基沉降监测中&#xff0c;振弦采…
阅读更多...
TypeScript Array(数组)

TypeScript Array(数组)

目录 1、数组初始化 2、Array 对象 3、数组迭代 4、数组在函数中的使用 4.1、作为参数传递给函数 4.2、作为函数的返回值 5、数组方法 数组对象是使用单独的变量名来存储一系列的值。数组非常常用。假如你有一组数据&#xff08;例如&#xff1a;网站名字&#xff09;…
阅读更多...
从“五力”看百亿西凤的必然性

从“五力”看百亿西凤的必然性

执笔 | 文 清 编辑 | 萧 萧 2023年末&#xff0c;西凤成功突破市场阻碍、跑赢行业周期&#xff0c;正式跻身中国百亿白酒品牌阵容。这是一份全行业及全体西凤人“预期之内”的成绩单。 当下&#xff0c;中国白酒已经进入“存量竞争”时代&#xff0c;马太效应使得强者恒强…
阅读更多...
8-链表-旋转链表

8-链表-旋转链表

这是链表的第8篇算法&#xff0c;力扣链接。 给你一个链表的头节点 head &#xff0c;旋转链表&#xff0c;将链表每个节点向右移动 k 个位置。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], k 2 输出&#xff1a;[4,5,1,2,3]示例 2&#xff1a; 输入&#xff1a;h…
阅读更多...
[足式机器人]Part2 Dr. CAN学习笔记-Ch01自动控制原理

[足式机器人]Part2 Dr. CAN学习笔记-Ch01自动控制原理

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-Ch01自动控制原理 1. 开环系统与闭环系统Open/Closed Loop System1.1 EG1: 烧水与控温水壶1.2 EG2: 蓄水与最终水位1.3 闭环控制系统 2. 稳定性分析Stability2.1 序言2.2 稳定的分类2.3 稳定的对…
阅读更多...
【PTA-C语言】编程练习5 - 函数与指针

【PTA-C语言】编程练习5 - 函数与指针

如果代码存在问题&#xff0c;麻烦大家指正 ~ ~有帮助麻烦点个赞 ~ ~ 编程练习5 - 函数与指针 6-1 求实数和的函数&#xff08;分数 10&#xff09;6-2 求解一元二次方程实根的函数&#xff08;分数 10&#xff09;6-3 求集合数据的均方差&#xff08;分数 10&#xff09;6-4 计…
阅读更多...
一、基础入门笔记

一、基础入门笔记

01基础语法 字面量 被写下来的固定的值 数字 整数int 1&#xff0c;2&#xff0c;3&#xff0c;4浮点数float 13.14复数complet 43J布尔 TrueFalse 字符串"ccc" 描述文本的数据类型大小比较依据ASC||&#xff0c;a>A> 按照位比较 列表 有序的可变序列 元组 有序…
阅读更多...
天融信TOPSEC Cookie 远程命令执行漏洞

天融信TOPSEC Cookie 远程命令执行漏洞

产品介绍 天融信TopSec 安全管理系统&#xff0c;是基于大数据架构&#xff0c;采用多种技术手段收集各类探针设备安全数据&#xff0c;围绕资产、漏洞、攻击、威胁等安全要素进行全面分析&#xff0c;提供统一监测告警、集中策略管控、协同处置流程&#xff0c;实现客户等保合…
阅读更多...
FindMy技术用于鼠标

FindMy技术用于鼠标

鼠标是计算机的标准配置之一&#xff0c;其设计初衷是为了使计算机的操作更加简便快捷&#xff0c;减少用户在操作中的负担。用户可以通过移动鼠标&#xff0c;实现光标的精确移动&#xff0c;进而选择、拖拽、复制、粘贴等操作。这种操作方式&#xff0c;使得计算机的操作变得…
阅读更多...
人工智能未来发展前景怎么样?

人工智能未来发展前景怎么样?

人工智能的未来发展前景怎么样&#xff1f;人工智能的未来发展前景非常广阔&#xff0c;有以下几个方面的发展趋势和前景&#xff1a; 1、人工智能的未来发展前景-应用领域扩展&#xff1a;人工智能将在各个领域得到广泛应用&#xff0c;包括医疗保健、金融、交通、制造业、农业…
阅读更多...
0.3-0.2 = 0.09999999999999998 问题解析（精度缺失问题）

0.3-0.2 = 0.09999999999999998 问题解析（精度缺失问题）

写在前面 这个问题其实一直存在&#xff0c;我也看了很多博主写的文章&#xff0c;但是没有一篇文章真的说明白了这个问题&#xff0c;所以今天我尽量将这个问题讲明白&#xff0c;废话不多说&#xff0c;开整 问题表象 研究一下0.3 - 0.2 不等于0.1的问题&#xff0c;做前端时…
阅读更多...
＜软考高项备考＞《论文专题 - 45 范围管理（4） 》

＜软考高项备考＞《论文专题 - 45 范围管理（4） 》

5 过程4-创建WBS 5.1 问题 4W1H过程做什么把项目可交付成果和项目工作分解成较小、更易于管理的组件的过程作用&#xff1a;为所要交付的内容提供0架构为什么做WBS代表着项目范围说明书所规定的工作&#xff0c;可以针对WBS 的工作包安排进度&#xff0c;估算成本和实施监控谁…
阅读更多...
java SSM体育器材租借管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

java SSM体育器材租借管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM体育器材租借管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要…
阅读更多...
海外服务器2核2G/4G/8G和4核8G配置16M公网带宽优惠价格表

海外服务器2核2G/4G/8G和4核8G配置16M公网带宽优惠价格表

腾讯云海外服务器租用优惠价格表&#xff0c;2核2G10M带宽、2核4G12M、2核8G14M、4核8G16M配置可选&#xff0c;可以选择Linux操作系统或Linux系统&#xff0c;相比较Linux服务器价格要更优惠一些&#xff0c;腾讯云服务器网txyfwq.com分享腾讯云国外服务器租用配置报价&#x…
阅读更多...
最新文章

Copyright @ 2022~2023