当前位置： 首页 > news >正文

HTML 超链接（简单易懂较详细）

news 2025/11/6 22:06:38

在 HTML 中，超链接是通过 <a> 标签（anchor tag）创建的。超链接允许用户通过点击文本、图像或其他元素跳转到另一个网页、文件或页面的特定部分。本文将详细介绍 HTML 超链接的语法、属性和应用场景。

一、基本语法

<a href="URL">链接文本</a>
  • <a>：表示超链接的开始。
  • href：属性用于指定链接的目标 URL。
  • URL：可以是绝对 URL（完整地址）或相对 URL（相对于当前页面的地址）。
  • 链接文本：用户在浏览器中看到的可点击部分。

二、超链接的类型

1. 外部链接

外部链接用于链接到其他网站或资源。

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

2. 内部链接

内部链接用于在同一个网站的不同页面之间跳转。

<a href="/about.html">关于我们</a>

3. 锚点链接

锚点链接用于在页面内跳转到特定的位置。

<a href="#section1">跳转到第一部分</a><!-- 页面中的目标位置 -->
<h2 id="section1">第一部分</h2>

三、常用属性

1. href

href 属性用于指定链接的目标 URL。

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

2. target

target 属性用于指定链接在何处打开。

  • _self：在当前窗口中打开链接（默认行为）。
  • _blank：在新窗口中打开链接。
  • _parent：在父框架中打开链接。
  • _top：在整个窗口中打开链接。
<a href="https://www.example.com" target="_blank">在新窗口中打开</a>

3. download

download 属性用于指定下载链接。

<a href="/path/to/file.pdf" download>下载文件</a>

4. title

title 属性为链接提供额外的信息，通常作为工具提示显示。

<a href="https://www.example.com" title="这是一个示例网站">访问示例网站</a>

5. rel

rel 属性用于指定链接与当前文档的关系。

  • nofollow：告诉搜索引擎不要跟随此链接。
  • noopener：防止新窗口中的页面与原始页面建立关系。
  • noreferrer：防止新窗口中的页面访问原始页面的引用信息。
<a href="https://www.example.com" rel="nofollow">访问示例网站</a>

四、示例

以下是一个包含多种超链接类型的完整 HTML 示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML 超链接示例</title>
</head>
<body><h1>HTML 超链接示例</h1><!-- 外部链接 --><p><a href="https://www.example.com">访问示例网站</a></p><!-- 内部链接 --><p><a href="/about.html">关于我们</a></p><!-- 锚点链接 --><p><a href="#section1">跳转到第一部分</a></p><!-- 下载链接 --><p><a href="/path/to/file.pdf" download>下载文件</a></p><!-- 在新窗口中打开 --><p><a href="https://www.example.com" target="_blank">在新窗口中打开</a></p><!-- 带有工具提示的链接 --><p><a href="https://www.example.com" title="这是一个示例网站">访问示例网站</a></p><!-- 锚点目标位置 --><h2 id="section1">第一部分</h2><p>这是第一部分的内容。</p>
</body>
</html>

五、总结

HTML 超链接是网页中不可或缺的部分，通过 <a> 标签和其属性可以实现多种类型的链接。以下是常用的属性及其作用：

属性名描述示例
href指定链接的目标 URL<a href="https://www.example.com">
target指定链接在何处打开<a target="_blank">
download指定下载链接<a download>
title为链接提供额外的信息<a title="这是一个示例网站">
rel指定链接与当前文档的关系<a rel="nofollow">

通过合理使用这些属性，可以创建出更加丰富、动态和用户友好的网页。

相关文章：

HTML 超链接（简单易懂较详细）

在 HTML 中&#xff0c;超链接是通过 <a> 标签&#xff08;anchor tag&#xff09;创建的。超链接允许用户通过点击文本、图像或其他元素跳转到另一个网页、文件或页面的特定部分。本文将详细介绍 HTML 超链接的语法、属性和应用场景。 一、基本语法 <a href"U…...

编程日记 2025/3/10 12:36:14

rpc和proto

rpc全称远程过程控制&#xff0c;说白了是一种对信息发送和接收的规则编写方法&#xff0c;来自google&#xff0c;这些规则会以protobuf代码存到proto文件里。我以autoGen中agent_worker.proto为例&#xff0c;大概长这样 syntax "proto3";package agents;option …...

编程日记 2025/3/10 12:32:08

OPENGLPG第九版学习 -颜色、像素和片元 PART1

文章目录 4.1 基本颜色理论4.2 缓存及其用途颜色缓存深度缓存 / z缓存 / z-buffer模板缓存 4.2.1 缓存的清除4.2.2 缓存的掩码 4.3 颜色与OpenGL4.3.1 颜色的表达与OpenGL4.3.2 平滑数据插值 4.4 片元的测试与操作4.4.1 剪切测试4.4.2 多重采样的片元操作4.4.3 模板测试模板查询…...

编程日记 2025/3/10 12:29:05

【js逆向】某精灵网

地址&#xff1a;aHR0cHM6Ly93d3cuamluZ2xpbmdzaHVqdS5jb20vYXJ0aWNsZXM f12查看数据包&#xff0c;下面这个不是&#xff0c;你得到的是你的用户信息&#xff0c;需要点击第2页才会显示数据接口 查看载荷 查看预览数据&#xff0c;发现是加密的 查看启动器&#xff0c;看到 Pr…...

编程日记 2025/3/10 12:23:59

自然语言处理：高斯混合模型

介绍 大家好&#xff0c;博主又来给大家分享知识了&#xff0c;今天给大家分享的内容是自然语言处理中的高斯混合模型。 在自然语言处理这个充满挑战与机遇的领域&#xff0c;我们常常面临海量且复杂的文本数据。如何从这些数据中挖掘出有价值的信息&#xff0c;对文本进行有…...

编程日记 2025/3/10 12:22:58

RISC-V汇编学习（三）—— RV指令集

有了前两节对于RISC-V汇编、寄存器、汇编语法等的认识&#xff0c;本节开始介绍RISC-V指令集和伪指令。 前面说了RISC-V的模块化特点&#xff0c;是以RV32I为作为ISA的核心模块&#xff0c;其他都是要基于此为基础&#xff0c;可以这样认为&#xff1a;RISC-V ISA 基本整数指…...

编程日记 2025/3/10 12:21:57

OpenCV连续数字识别—可运行验证

前言 ​ 文章开始&#xff0c;瞎说一点其他的东西&#xff0c;真的是很离谱&#xff0c;找了至少两三个小时&#xff0c;就一个简单的需求&#xff1a; 1、利用OpenCV 在Windows进行抓图 2、利用OpenCV 进行连续数字的检测。 3、使用C&#xff0c;Qt 3、将检测的结果显示出来 …...

编程日记 2025/3/10 12:20:55

Python中与字符串操作相关的30个常用函数及其示例

以下是Python中与字符串操作相关的30个常用函数及其示例&#xff1a; 1. str.capitalize() 将字符串的第一个字符大写&#xff0c;其余字符小写。 s "hello world" print(s.capitalize()) # 输出: Hello world2. str.lower() 将字符串中的所有字符转换为小写。…...

编程日记 2025/3/10 12:12:48

007-Property在C++中的实现与应用

Property在C中的实现与应用 以下是在C中实现属性(Property)的完整实现方案&#xff0c;结合模板技术和运算符重载实现类型安全的属性访问&#xff0c;支持独立模块化封装&#xff1a; #include <iostream> #include <functional>template<typename HostType, t…...

编程日记 2025/3/10 12:11:46

【实战篇】【DeepSeek 全攻略：从入门到进阶，再到高级应用】

凌晨三点，某程序员在Stack Overflow上发出灵魂拷问：“为什么我的DeepSeek会把财务报表生成成修仙小说？” 这个魔性的AI工具，今天我们就来场从开机键到改造人类文明的硬核教学。（文末含高危操作集锦，未成年人请在师父陪同下观看） 一、萌新村任务：把你的电脑变成炼丹炉 …...

编程日记 2025/3/10 12:09:43

clickhouse属于国产吗

《ClickHouse&#xff1a;探索其背景与国内的应用实例》 当我们谈论数据库技术时&#xff0c;ClickHouse是一个绕不开的话题。很多人可能会好奇&#xff0c;ClickHouse是否属于国产软件呢&#xff1f;答案是&#xff0c;虽然ClickHouse最初并非在中国开发&#xff0c;但这款列…...

编程日记 2025/3/10 12:08:42

ESP32 UART select解析json数据，上位机控制LED灯实验

前言&#xff1a; 本实验的目的主要是通过上位机通过UART来控制ESP32端的LED的点亮以及熄灭&#xff0c;整个项目逻辑比较简单&#xff0c;整体架构如下&#xff1a; 上位机(PC)主要是跑在PC端的一个软件&#xff0c;主要作用包含&#xff1a; 1&#xff09;串口相关配置&…...

编程日记 2025/3/10 12:04:37

K8S 集群搭建——cri-dockerd版

目录 一、工作准备 1.配置主机名 2.配置hosts解析 3.配置免密登录&#xff08;只需要在master上操作&#xff09; 4.时间同步&#xff08;每台节点都要做&#xff0c;必做&#xff0c;否则可能会因为时间不同步导致集群初始化失败&#xff09; 5.关闭系统防火墙 6.配置…...

编程日记 2025/3/10 12:02:34

基于Python的电商销售数据分析与可视化系统实

一、系统架构设计 1.1系统流程图 #mermaid-svg-Pdo9oZWrVHNuOoTT {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Pdo9oZWrVHNuOoTT .error-icon{fill:#552222;}#mermaid-svg-Pdo9oZWrVHNuOoTT .error-text{fill:#5…...

编程日记 2025/3/10 11:59:31

学习笔记：Python网络编程初探之基本概念（一）

一、网络目的 让你设备上的数据和其他设备上进行共享&#xff0c;使用网络能够把多方链接在一起&#xff0c;然后可以进行数据传递。 网络编程就是&#xff0c;让在不同的电脑上的软件能够进行数据传递&#xff0c;即进程之间的通信。 二、IP地址的作用 用来标记唯一一台电脑…...

编程日记 2025/3/10 11:57:28

高效处理 List＜T＞ 集合：更新、查找与优化技巧

引言 在日常开发中，List<T> 是我们最常用的数据结构之一。无论是批量更新数据、查找特定项还是进行复杂的集合操作，掌握 List<T> 的高级用法可以显著提高代码的效率和可读性。本文将详细介绍如何使用 List<T> 进行批量更新、查找匹配项以及优化性能的方法…...

编程日记 2025/3/10 11:56:26

HTML5(Web前端开发笔记第一期)

p.s.这是萌新自己自学总结的笔记&#xff0c;如果想学习得更透彻的话还是请去看大佬的讲解 目录 三件套标签标题标签段落标签文本格式化标签图像标签超链接标签锚点链接默认链接地址 音频标签视频标签 HTML基本骨架综合案例->个人简介列表表格表单input标签单选框radio上传…...

编程日记 2025/3/10 11:55:25

Windows控制台函数：标准输入输出流交互函数GetStdHandle（）

目录 什么是 GetStdHandle&#xff1f; 它长什么样&#xff1f; 怎么用它&#xff1f; 它跟 std::cout 有什么不一样&#xff1f; GetStdHandle 是一个 Windows API 函数&#xff0c;用于获取标准输入、标准输出或标准错误设备的句柄。它定义在 Windows 的核心头文件 <…...

编程日记 2025/3/10 11:54:24

Vue3 中 Computed 用法

Computed 又被称作计算属性&#xff0c;用于动态的根据某个值或某些值的变化&#xff0c;来产生对应的变化&#xff0c;computed 具有缓存性&#xff0c;当无关值变化时&#xff0c;不会引起 computed 声明值的变化。 产生一个新的变量并挂载到 vue 实例上去。 vue3 中 的 com…...

编程日记 2025/3/10 11:53:22

常见的三种锁

一、互斥锁 互斥锁 Mutex 保证在任意时刻只有一个线程能够进入被保护的临界区。当一个线程获取到互斥锁后&#xff0c;其他线程若要进入临界区就会被阻塞&#xff0c;直到该线程释放锁。 互斥锁是一种阻塞锁&#xff0c;当线程无法获取到锁时&#xff0c;会进入阻塞状态。 应…...

编程日记 2025/3/10 11:52:20

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/11/5 22:34:21

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/10/31 22:17:06

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/10/10 10:23:21

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2025/11/4 16:29:30

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/11/5 9:52:04

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/10/27 13:40:44

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2025/11/2 3:42:18

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2025/10/4 3:01:43

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2025/10/7 0:04:52