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

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

article 2026/3/16 4:55:03

在 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…...

编程日记 2026/3/4 13:27:10

《Android应用性能优化全解析：常见问题与解决方案》

目录 一、UI卡顿/掉帧 二、内存泄漏&#xff08;Memory Leak&#xff09; 三、ANR&#xff08;Application Not Responding&#xff09; 四、列表滑动卡顿&#xff08;RecyclerView/ListView&#xff09; 五、冷启动耗时过长 六、内存抖动&#xff08;Memory Churn&#x…...

编程日记 2026/2/19 23:40:32

常见HTTP 状态码及意义

HTTP状态码是服务器响应客户端请求时返回的三位数字代码&#xff0c;它们分为五个类别&#xff0c;每个类别代表不同类型的响应。 1xx - 信息性状态码 这些状态码表示请求已被接收&#xff0c;继续处理。 100 Continue: 客户端应继续其请求。这个临时响应用于通知客户端&…...

编程日记 2026/2/16 8:30:00

Android Compose Surface 完全指南：从入门到花式操作

今天咱们来聊聊 Compose 世界里那个既基础又强大的组件——Surface。这个看似简单的矩形区域&#xff0c;实际藏着不少宝藏玩法&#xff0c;准备好你的 IDE&#xff0c;咱们发车&#xff01; 一、Surface 是什么&#xff1f; 简单说&#xff0c;Surface 就是个自带背景和样式…...

编程日记 2026/3/12 7:28:23

Deepin通过二进制方式升级部署高版本 Docker

一、背景&#xff1a; 在Deepin系统中通过二进制方式升级部署高版本 Docker&#xff0c;下面将详细介绍二进制方式升级部署高版本 Docker 的具体步骤。 二、操作步骤 1.根据需求下载二进制文件&#xff0c;下载地址如下&#xff1a; https://mirrors.tuna.tsinghua.e…...

编程日记 2026/3/12 6:14:47

python中time模块的常用方法及应用

Python 的 time 模块是自带的标准模块&#xff0c;不需要额外安装&#xff0c;可以直接通过import time的方式导入并使用其中的函数和类。该模块提供了与时间相关的各种功能&#xff0c;以下是一些常用方法及其应用场景和示例&#xff1a; ### 1. time.time() - **功能**&…...

编程日记 2026/3/12 10:09:22

【RTSP】客户端（一）：RTSP协议实现

概述 RTSP主要功能总结 RTSP本质是一个应用层协议&#xff0c;主要用于控制实时数据的传递&#xff0c;例如音视频流。RTSP的传输方式与HTTP类似&#xff0c;与HTTP不同在于RTSP主要用于控制传输媒体服务器上的流媒体会话。所以其是一个 客户端-服务器模型&#xff0c;客户端需…...

编程日记 2026/3/15 6:16:59

SpringBoot（一）--搭建架构5种方法

目录 一、⭐Idea从spring官网下载打开 2021版本idea 1.打开创建项目 2.修改pom.xml文件里的版本号 2017版本idea 二、从spring官网下载再用idea打开 三、Idea从阿里云的官网下载打开 ​编辑 四、Maven项目改造成springboot项目 五、从阿里云官网下载再用idea打开 Spri…...

编程日记 2026/3/15 9:23:56

面试之《commonjs，requirejs和es6 Module的区别》

设计理念 CommonJS&#xff1a;是为服务器端环境设计的模块化规范&#xff0c;以同步加载模块为核心思想。服务器端读取文件速度快&#xff0c;同步加载不会造成明显性能问题&#xff0c;方便开发者在代码执行前就确定模块间的依赖关系&#xff0c;便于管理和维护。RequireJS&…...

编程日记 2026/2/16 16:57:16

【工控】线扫相机小结 第五篇

背景介绍 线扫相机通过光栅尺的脉冲触发&#xff0c; 我在调试线扫过程中&#xff0c;发现图像被拉伸&#xff0c;预设调节分配器。图像正常后&#xff0c;我提高的相机的扫描速度&#xff08;Y轴动的更快了&#xff09;。 动的更快的发现&#xff0c;图像变短了&#xff08;以…...

编程日记 2026/3/12 21:14:01

【STM32F103C8T6】DMA数据转运ADC多通道

前言 本节为代码部分&#xff0c;知识点在这【江协科技STM32】DMA直接存储器存储-学习笔记-CSDN博客 查看数据地址&#xff1a; uint8_t aa 0x88;int main(void) {OLED_Init();OLED_ShowHexNum(1,1,aa,4); //显示十六进制数 OLED_ShowHexNum(2,1,(uint32_t)&aa,8);wh…...

编程日记 2026/3/15 13:27:45

[Web]ServletContext域(Application)

简介 Web应用的Application域的实现是通过ServletContext对象实现的。整个Web应用程序的所有资源共享这个域。生命周期与Web应用程序相同&#xff0c;即当前Web应用程序启动时&#xff08;以服务器视角而非访客视角&#xff09;出生&#xff0c;Web应用服务程序关闭时停止。 通…...

编程日记 2026/2/14 18:21:35

计算机网络--访问一个网页的全过程

文章目录 访问一个网页的全过程应用层在浏览器输入URL网址http://www.aspxfans.com:8080/news/index.aspboardID5&ID24618&page1#r_70732423通过DNS获取IP地址生成HTTP请求报文应用层最后 传输层传输层处理应用层报文建立TCP连接传输层最后 网络层网络层对TCP报文进行处…...

编程日记 2026/2/27 13:16:50

JVM G1垃圾回收器详细解析

G1内存布局 Garbage First(简称G1)收集器摒弃了传统垃圾收集器的严格的内存划分&#xff0c;而是采用了基于Region的内存布局形式和局部回收的设计思路。 G1垃圾收集器把Java堆划分为2048个大小相等的独立的Region&#xff0c;每个Region大小取值范围为1-32MB&#xff0c;且必…...

编程日记 2026/3/1 20:45:01

OpenGL中绘制图形元素的实现（使用visual studio（C++）绘制一个矩形）

目标&#xff1a;使用OpenGL提供的函数绘制矩形、线段、三角形等基本图形元素 所需效果 实验步骤 1、配置OpenGL&#xff08;详情参见OpenGL的配置&#xff09; 2、头文件引入 #include <gl/glut.h> 3、编写方法体 1>矩形实现 //绘制矩形 void DisplayRectangl…...

编程日记 2026/3/11 23:16:11

datax-coud部署

centos7系统环境安装 jdk1.8安装 cd /usr/local 上传jdk文件到/usr/local目录下解压缩 tar -zxvf jdk-8u261-linux-x64.tar.gz# 配置环境变量 vim /etc/profileexport JAVA_HOME=/usr/local/jdk1.8.0_261 export CLASSPATH=$JAVA_HOME/lib:$JAVA_HOME/lib export PATH=$JAVA_…...

编程日记 2026/2/15 17:37:00

数据库---sqlite3

数据库&#xff1a; 数据库文件与普通文件区别: 1.普通文件对数据管理(增删改查)效率低 2.数据库对数据管理效率高,使用方便 常用数据库: 1.关系型数据库: 将复杂的数据结构简化为二维表格形式 大型:Oracle、DB2 中型:MySql、SQLServer …...

编程日记 2026/3/13 11:27:51

Android StrictMode 使用与原理深度解析

Android StrictMode 是 Android 系统提供的一种开发者工具&#xff0c;用于检测应用主线程中不合理的耗时操作&#xff08;如磁盘 I/O、网络请求等&#xff09;和内存泄漏问题。通过配置策略和惩罚机制&#xff0c;它帮助开发者在早期发现潜在性能问题&#xff0c;提升应用流畅…...

编程日记 2026/3/3 0:18:38

js和java中方法重载(js本身是不支持方法重载，方便对比学习)

js如果需要实现方法重载 示例 1&#xff1a;根据参数数量实现重载 function overloadExample() {if (arguments.length 1) {console.log(一个参数:, arguments[0]);} else if (arguments.length 2) {console.log(两个参数:, arguments[0], arguments[1]);} else {console.l…...

编程日记 2026/3/4 13:27:15

代理模式的C++实现示例

核心思想 代理模式&#xff08;Proxy Pattern&#xff09;是一种结构型设计模式&#xff0c;其核心思想是为其他对象提供一个代理或占位符&#xff0c;以控制对这个对象的访问。代理对象通常会在客户端和目标对象之间起到中介作用&#xff0c;可以在不改变目标对象的情况下&am…...

编程日记 2026/3/1 12:24:58

【阿里云】控制台使用指南：从创建ECS到系统诊断测评

前言 随着云计算技术的快速发展&#xff0c;越来越多的企业和开发者开始使用云服务来部署和管理应用程序。在众多云服务提供商中&#xff0c;阿里云&#xff08;Alibaba Cloud&#xff09;凭借其强大的基础设施和丰富的服务&#xff0c;成为了众多用户的首选。本文旨在介绍如何…...

编程日记 2026/3/16 0:54:35

简易的微信聊天网页版【项目测试报告】

文章目录 一、项目背景二、项目简介登录功能好友列表页面好友会话页面 三、测试工具和环境四、测试计划测试用例部分人工手动测试截图web自动化测试测试用例代码框架配置内容代码文件&#xff08;Utils.py&#xff09;登录页面代码文件&#xff08;WeChatLogin.py&#xff09;好…...

编程日记 2026/3/2 21:08:17

显示篇（2）- DRM A733 多显主副显绑定

通过hal层根据优先级绑定&#xff0c;优先级越高送显越靠前。&#xff08;sdk默认mipi优先级最高为主显&#xff09; 1.双显 如edp主mipi副&#xff0c;edp优先级搞。 更改如下 diff --git a/hwc-hal/drm/drmConnector.cpp b/hwc-hal/drm/drmConnector.cpp --- a/hwc-hal/d…...

编程日记 2026/3/11 21:54:14

基于腾讯云高性能HAI-CPU的跨境电商客服助手全链路解析

跨境电商的背景以及痛点 根据Statista数据&#xff0c;2025年全球跨境电商市场规模预计达6.57万亿美元&#xff0c;年增长率保持在12.5% 。随着平台规则趋严&#xff08;如亚马逊封店潮&#xff09;&#xff0c;更多卖家选择自建独立站&#xff0c;2024年独立站占比已达35%。A…...

编程日记 2026/3/10 11:47:52

北京迅为RK3568开发板OpenHarmony系统南向驱动开发内核HDF驱动框架架构

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…...

编程日记 2026/3/3 8:33:54

从0到1入门Docker

一、快速入门 Docker run命令中的常见参数 -d&#xff1a;让容器后台运行--name&#xff1a;给容器命名&#xff08;唯一&#xff09;-e&#xff1a;环境变量-p&#xff1a;宿主机端口映射到容器内端口镜像名称结构&#xff1a;Repository &#xff1a;TAG&#xff08;镜像名&…...

编程日记 2026/3/11 23:16:11

应用篇| 抓包工具-charles的使用

上文说到，我们app爬虫要借助一些抓包工具，本节课就教大家如何使用抓包工具分析app的流量。抓包工具的使用是app爬虫的必修课。相比 Fiddler 来说，Charles 的功能更强大，而且跨平台支持更好。 charles安装 官方网站：https://www.charlesproxy.com 下载链接：Download a F…...

编程日记 2026/2/17 19:11:21

Docker搭建Redis哨兵模式【一主两从三哨兵】

Docker搭建Redis哨兵模式 系统: CentOS 7 Dockder 版本: VMware虚拟机 网络适配器 网络连接 桥接模式：直接连接物理网络查看IP命令 ip addr一、哨兵模式概述 1. 官方文档与关联博客 官方文档：https://redis.io/docs/latest/operate/oss_and_stack/management/sentinel关联博…...

编程日记 2026/2/20 4:32:27

labview实现大小端交换移位

在解码时遇到了大小端交换的问题&#xff0c;需要把高低字节的16进制值进行互换&#xff0c;这里一时间不知道怎么操作&#xff0c;本来打算先把16进制转字节数组&#xff0c;算出字节数组的大小&#xff0c;然后通过模2得到0&#xff0c;1&#xff0c;来判断是否为奇数位和偶数…...

编程日记 2026/3/11 23:11:35

Three.js 进阶(灯光阴影关系和设置、平行光、阴影相机)

本篇主要学习内容 : 灯光与阴影聚光灯点光源平行光阴影相机和阴影计算投射阴影接受阴影 点赞 关注 收藏 学会了 1.灯光与阴影 1、材质要满足能够对光有反应 2、设置渲染器开启阴影计算 renderer.shadowMap.enabledtrue 3、设置光照投射阴影 directionalLight.castShadow …...

编程日记 2026/2/24 12:12:34