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

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

news 2026/5/31 8:15:04

在 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

保姆级教程：在CentOS 7上用达梦8搭建DCA练习环境（附ulimit、VNC、ODBC全配置）

达梦8 DCA认证实战&#xff1a;CentOS 7环境搭建与调优全指南 在国产数据库技术快速发展的今天&#xff0c;达梦数据库作为核心产品之一&#xff0c;其DCA认证已成为众多从业者提升竞争力的重要选择。与理论为主的认证不同&#xff0c;DCA更注重实际操作能力&#xff0c;而一个…...

编程新知 2026/5/26 3:38:09

作业本耐用度差距巨大？深圳大明印刷厂拆解合规工艺，告别定制作业本掉页开裂通病

在校园日常教学中&#xff0c;很多学校都会遇到同一个难题&#xff1a;同一学期采购的作业本、定制作业本&#xff0c;品质差距悬殊&#xff0c;有的完好无损用到期末&#xff0c;有的短短几周就出现书脊开裂、页面脱落、边角破损、翻页卡顿等问题。不少人误以为是学生使用习惯…...

编程新知 2026/5/26 3:07:54

潮州东方轻奢风全屋高定找哪家

开篇引言根据《2026年中国全屋定制行业发展报告》&#xff0c;潮州市全屋定制市场规模同比增长38%&#xff0c;其中全屋高端定制细分市场同比增长52%。目前&#xff0c;潮州市家庭全屋定制需求占比72%&#xff0c;高端定制需求占比45%。为了帮助潮州市消费者选择合规、靠谱、差…...

编程新知 2026/5/26 1:04:50

【紧急预警】92%的DeepSeek测试用例生成失败源于这4个隐性配置缺陷——资深SDET连夜整理修复清单

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;DeepSeek测试用例生成的现状与危机本质 当前&#xff0c;DeepSeek系列大模型&#xff08;如DeepSeek-Coder、DeepSeek-VL&#xff09;在代码生成与理解任务中展现出强大能力&#xff0c;但其测试用例自动生成…...

编程新知 2026/5/26 0:56:48

放弃编码器！纯靠MPU6050和PID算法，手把手教你用TT马达实现平衡小车稳定控制（STM32F103C8T6实战）

纯MPU6050STM32F103的TT马达平衡车实战&#xff1a;无编码器PID控制全解析当大多数平衡小车方案都在强调编码器对速度反馈的不可或缺性时&#xff0c;我们决定挑战一个更极简的配置&#xff1a;仅用5美元的TT马达、9轴的MPU6050和STM32F103C8T6最小系统板&#xff0c;完全舍弃编…...

编程新知 2026/5/26 0:44:32

基于Netburner NANO54415构建工业级嵌入式Web服务器：从硬件选型到广域监控实战

1. 项目概述&#xff1a;一个为广域与本地监控而生的嵌入式Web服务器如果你正在寻找一个能部署在野外、工厂角落或者任何需要远程数据采集与控制场景下的嵌入式Web服务器方案&#xff0c;并且对市面上那些要么性能孱弱、要么开发门槛极高的开发板感到厌倦&#xff0c;那么这个基…...

编程新知 2026/5/25 21:50:00

GIS工程应用记录（AI辅助编程）

问题的问题&#xff1a;语境坍缩“从各个角度提出问题&#xff0c;AI做出对应积极答复和修改&#xff0c;结果没有什么变化。”这&#xff0c;就是元问题最核心的症状。你尝试了所有你已知的“高级”协作手段&#xff0c;但就像重拳打在棉花上&#xff0c;AI永远在积极回应&…...

编程新知 2026/5/25 21:19:36

Elden Ring帧率解锁终极指南：从60帧到144+的完整教程

Elden Ring帧率解锁终极指南&#xff1a;从60帧到144的完整教程 【免费下载链接】EldenRingFpsUnlockAndMore A small utility to remove frame rate limit, change FOV, add widescreen support and more for Elden Ring 项目地址: https://gitcode.com/gh_mirrors/el/Elden…...

编程新知 2026/5/25 20:20:05

基于C#实现（WinForm）P2P聊天程序

♻️ 资源 大小&#xff1a; 29.8MB ➡️ 资源下载&#xff1a;https://download.csdn.net/download/s1t16/87430269 p2p聊天程序 一、功能介绍 1.1 登录 用户凭用户名和密码登录系统&#xff0c;可以更换服务器 IP 和端口&#xff0c;以防网络不畅通&#xff0c;连接服务…...

编程新知 2026/5/25 18:03:50

Java网络编程基础分享

在学习 Java 的过程中&#xff0c;网络编程是非常重要的一环。无论是后端开发、分布式系统、即时通讯、文件传输&#xff0c;还是游戏服务、物联网设备&#xff0c;都离不开网络通信一、计算机网络基础1.1 什么是计算机网络把不同地理位置、具有独立功能的计算机&#xff0c;通…...

编程新知 2026/5/25 17:34:28