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

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

news 2025/12/15 1:19:00

在 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

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/11/5 4:10:42

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2025/12/8 20:02:18

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2025/12/10 14:05:33

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/12/13 1:32:15

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/12/7 16:18:19

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

编程新知 2025/12/11 3:33:22

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2025/10/23 23:35:01

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

编程新知 2025/12/11 21:08:29

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2025/12/8 17:52:04