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

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

news 2026/2/8 15:42:11

在 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

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2026/1/28 10:02:54

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2026/1/2 4:05:05

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2026/1/23 7:15:40

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2026/1/26 14:19:52

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2026/2/4 15:29:40

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2026/1/31 10:55:22

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

编程新知 2025/10/4 21:24:40

2.3 物理层设备

在这个视频中&#xff0c;我们要学习工作在物理层的两种网络设备&#xff0c;分别是中继器和集线器。首先来看中继器。在计算机网络中两个节点之间&#xff0c;需要通过物理传输媒体或者说物理传输介质进行连接。像同轴电缆、双绞线就是典型的传输介质&#xff0c;假设A节点要给…...

编程新知 2026/2/6 22:23:38

【QT控件】显示类控件

目录 一、Label 二、LCD Number 三、ProgressBar 四、Calendar Widget QT专栏&#xff1a;QT_uyeonashi的博客-CSDN博客 一、Label QLabel 可以用来显示文本和图片. 核心属性如下 代码示例: 显示不同格式的文本 1) 在界面上创建三个 QLabel 尺寸放大一些. objectName 分别…...

编程新知 2026/2/4 18:27:37

比较数据迁移后MySQL数据库和ClickHouse数据仓库中的表

设计一个MySQL数据库和Clickhouse数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/11/15 17:06:02