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

HTML5-2-链接

HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 点击链接时,链接显示为红色并带有下划线。

语法

<a href="url">链接文本</a>

href 属性描述了链接的目标。

示例:

<a href="https://www.baidu.com/">访问百度首页</a>

访问百度首页

属性

href

href属性是超链接标签必须存在的属性,href用于连接目标的URL地址。

target

target 属性可以定义被链接的文档在何处显示。其中_self是默认值,即在当前窗口打开连接的打卡方式,_blank为在新窗口的打开方式,_parent 表示在父窗口打开超链接,_top 表示在顶层窗口打开超链接。

id

id 属性可用于创建一个 HTML 文档书签。

title

title为超链接设置一些介绍信息。当鼠标移到设置了title属性的超链接上时,会显示title属性值的内容。

链接分类

外链接

<a href="https://www.baidu.com/">百度</a>

内链接

网站内部页面之间的相互跳转。内部连接直接连接内部页面名称。且通常使用相对路径。

<a href="02-code.html">内部链接</a>

空链接

超链接要求必须存在href,所以写超链接时,规定href属性为"#",不能空白。

<a href="#">空链接</a>

下载链接

当在同一目录时,通过点击超链接可以直接下载文件,地址链接的文件.exe,或者zip等压缩包,href属性值赋予地址即可。

<a href="文件地址">点击超链接下载文件或压缩包</a>

浏览器可以直接打开图片或.txt文档,如果我们希望浏览器不打开直接下载,则可以通过download属性来实现这一功能。

<a href="下载地址" download="名字"></a>

各种网页元素链接

网页中的各种元素也可添加链接,如文本,图片,表格,音频,视频等可添加超链接。

<a href="test.png"><img src="test.png"></a>

锚点链接

锚链接可以链接到本页面的特定位置,也可以链接到另一个页面的特定位置。其实现方式是添加锚标记。即:
<a href=“#名字”>跳转</a>,"#"必不可少。
<标签名 id=“与刚才的名字一致”></标签名>
关于“#标记名”,它其实是页面中某一个标签的id属性值。也就是说,如果要跳转到网页的某个位置,就先在这个位置所在的标签设置id属性,然后就可以通过锚链接跳转到这个位置了。

当跳转到当前页面的特定位置时,直接将锚标记设为href属性的值。如:

<a href="#top">跳转到本页面的id标记处</a><br/>
<h3 id="top">标记处</h3>

当跳转到另一个网页的特定位置时,将锚标记添加到链接地址的末尾。如:

<a href="http://www.baidu.com#标记名">跳转到另一个页面的标记处</a>

相关文章:

HTML5-2-链接

HTML使用标签 <a>来设置超文本链接。 超链接可以是一个字&#xff0c;一个词&#xff0c;或者一组词&#xff0c;也可以是一幅图像&#xff0c;您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 默认情况下&#xff0c;链接将以以下形式出现在浏览器中&am…...

Java--常用jar命令

jar常用指令 jar命令参数&#xff1a; jar命令格式&#xff1a;jar {c t x u f }[ v m e 0 M i ][-C 目录]文件名... 其中{ctxu}这四个参数必须选选其一。[v f m e 0 M i ]是可选参数&#xff0c;文件名也是必须的。 -c 创建一个jar包 -t 显示jar中的内容列表 -x 解压jar包 …...

微服务中间件--多级缓存

多级缓存 多级缓存a.JVM进程缓存1) Caffeine2) 案例 b.Lua语法1) 变量和循环2) 条件控制、函数 c.多级缓存1) 安装OpenResty2) 请求参数处理3) 查询Tomcat4) Redis缓存预热5) 查询Redis缓存6) Nginx本地缓存 d.缓存同步1) 数据同步策略2) 安装Canal2.a) 开启MySQL主从2.b) 安装…...

clickhouse系列3:clickhouse分析英国房产价格数据

1.准备数据集 该数据集包含有关英格兰和威尔士自1995年起到2023年的房地产价格的数据,超过2800万条记录,未压缩形式的数据集大小超过4GB,在ClickHouse中需要约306MB。 2.clickhouse中建表 CREATE TABLE uk_price_paid (price UInt32,...

2023京东口腔护理赛道行业数据分析(京东销售数据分析)

近年来&#xff0c;口腔护理逐渐成为年轻人重视的健康领域&#xff0c;从口腔护理整体市场来看&#xff0c;牙膏和牙刷等基础口腔护理产品仍占据主导地位。不过&#xff0c;随着口腔护理市场逐步朝向精致化、专业化、多元化等方向发展&#xff0c;不少新兴口腔护理产品受到消费…...

安服面试 --- 01

1、常用渗透工具 burp、nmap、sqlmap、蚁剑、御剑、冰蝎、cobalt strike等 2、渗透测试中&#xff0c;拿到目标公司站点&#xff0c;接下来应该怎么做&#xff1f; &#xff08;1&#xff09;信息收集&#xff1a;收集目标公司的相关信息。包括域名、ip地址、子域名、开放端…...

ExpressLRS开源之RC链路性能测试

ExpressLRS开源之RC链路性能测试 1. 源由2. 分析3. 测试方案4. 测试设计4.1 校准测试4.2 实验室测试4.3 拉距测试4.4 遮挡测试 5. 总结6. 参考资料 1. 源由 基于ExpressLRS开源基本调试验证方法&#xff0c;对RC链路性能进行简单的性能测试。 修改设计总能够满足合理的需求&a…...

el-form表单el-form-item prop一次验证两个值

1.表单添加两个框&#xff0c;prop写上 <el-form :model"ruleForm" :rules"rules" ref"ruleForm" label-width"100px" > <el-form-item type"type" label"时间" prop"dateSectOne"><di…...

HTTP 代理原理及 Python 简单实现

HTTP 代理是一种网络代理服务器(Proxy Server),它能够作为客户端与 HTTP 服务器之间的中介,它的工作原理是: 当客户端向 HTTP 代理发送 HTTP 请求时,HTTP 代理会收到请求。 HTTP 代理会将请求转发给目标 HTTP 服务器。 目标 HTTP 服务器处理请求并生成响应。 HTTP 代理将…...

数据结构--队列与循环队列

队列 队列是什么&#xff0c;先联想一下队&#xff0c;排队先来的人排前面先出&#xff0c;后来的人排后面后出&#xff1b;队列的性质也一样&#xff0c;先进队列的数据先出&#xff0c;后进队列的后出&#xff1b;就像图一的样子&#xff1a; 图1 如图1&#xff0c;1号元素是…...

八路参考文献:[八一新书]许少辉.乡村振兴战略下传统村落文化旅游设计[M]北京:中国建筑工业出版社,2022.

八路参考文献&#xff1a;&#xff3b;八一新书&#xff3d;许少辉&#xff0e;乡村振兴战略下传统村落文化旅游设计&#xff3b;&#xff2d;&#xff3d;北京&#xff1a;中国建筑工业出版社&#xff0c;&#xff12;&#xff10;&#xff12;&#xff12;&#xff0e;...

版本控制 Git工具的使用

版本控制的概念&#xff1a; 版本控制&#xff08;Revision control&#xff09;是一种在开发的过程中用于管理我们对文件、目录或工程等内容的修改历史&#xff0c;方便查看更改历史记录&#xff0c;备份以便恢复以前的版本的软件工程技术。简单来说就是用于管理多人协同开发…...

GNS3 在 Linux 上的安装指南

文章目录 GNS3 在 Linux 上的安装指南1. 基于 Ubuntu 的发行版安装 GNS32. 基于 Debian 的安装3. 基于 ArchLinux 的安装4. 从 Pypi 安装 GNS35. 启动 GNS3 服务端GNS3 在 Linux 上的安装指南 大家好,今天我们来聊聊如何在 Linux 上安装 GNS3。GNS3 是一个非常受欢迎的网络模…...

Mybatis中 list.size() = 1 但显示 All elements are null

一、Bug展示 二、原因分析 2.1.情形一&#xff1a;Mybatis的XML中返回类型映射错误 <select id"selectByDesc" parameterType"com.task.bean.OrderInfo"resultType"com.task.bean.OrderInfo">select MER_ID,SETTLE_DATE,ICE_NAME,ORDER_S…...

Soul的社交元宇宙之路,还有多远?

在元宇宙概念爆火的当下&#xff0c;以互联网为依托的虚拟社交逐步为用户承载起其空缺的精神交流与寄托&#xff0c;而在这其中&#xff0c;以“跟随灵魂找到你”为Slogan&#xff0c;主打年轻人社交元宇宙平台的APP--Soul则在这条赛道上凭借着独特的风格&#xff0c;逐步突出重…...

如何解决Memcached缓存击穿和雪崩问题

原文 Memcached是一种快速、高性能的分布式内存对象缓存系统&#xff0c;广泛应用于Web应用的缓存中。然而&#xff0c;Memcached也存在一些常见的问题&#xff0c;如缓存击穿和缓存雪崩。本文将介绍什么是缓存击穿和缓存雪崩&#xff0c;并提供一些解决这些问题的方法&#x…...

uniapp 开发之仿抖音,上下滑动切换视频、点击小爱心效果

效果图&#xff1a; 功能描述&#xff1a; 上下滑动视频&#xff0c;双击暂停&#xff0c;然后第一个视频再往上滑显示”已经滑到顶了“ 开始代码&#xff1a; 首先视频接口使用的公开的视频测试接口 开放API-2.0 官网展示 Swagger UI 接口文档 一…...

【C++设计模式】依赖倒转原则

2023年8月30日&#xff0c;周三上午 目录 概述含义举个简单的例子传统做法使用依赖倒转原则代码说明再举一个具体的例子以生活为例 概述 依赖倒转原则(Dependency Inversion Principle,DIP)是面向对象设计中的一个基本原则。 含义 高层模块不应该依赖低层模块,两者都应该依…...

浙江首例!金华银行基于完全国产自研数据库构建新一代核心系统

6 月 12 日&#xff0c;金华银行举行“星辉工程”核心项目群上线发布会&#xff0c;新一代核心系统部署在国产分布式数据库 OceanBase 上&#xff0c;实现系统的高可用、高性能、国产升级。据悉&#xff0c;这是浙江省首例基于完全国产自研数据库落地的银行核心系统。 金华银行…...

ASP.NET Core 中的 静态文件

Static Files Static Files 包括 HTML&#xff0c;CSS&#xff0c;图片&#xff0c;JavaScript&#xff0c;以及其他静态资源文件。 即网站本身的内容。 Static Files 服务 Static Files 保存在项目的 Web Root 目录&#xff0c;即 wwwroot 文件夹中。 而wwwroot目录是Conte…...

从原理到代码:用Python实现简易变焦跟踪算法(OpenCV实战)

从原理到代码&#xff1a;用Python实现简易变焦跟踪算法&#xff08;OpenCV实战&#xff09; 在计算机视觉领域&#xff0c;变焦跟踪是一个既基础又关键的技术难题。想象一下&#xff0c;当你用手机拍摄远处景物时&#xff0c;镜头从广角切换到长焦的过程中&#xff0c;画面往往…...

SMAPI模组加载器全方位指南:从安装到高效管理星露谷物语模组

SMAPI模组加载器全方位指南&#xff1a;从安装到高效管理星露谷物语模组 【免费下载链接】SMAPI The modding API for Stardew Valley. 项目地址: https://gitcode.com/gh_mirrors/smap/SMAPI 作为开源工具的SMAPI模组加载器&#xff0c;是星露谷物语玩家扩展游戏体验的…...

Python EXE逆向解密终极指南:从打包程序到源码还原完整教程

Python EXE逆向解密终极指南&#xff1a;从打包程序到源码还原完整教程 【免费下载链接】python-exe-unpacker A helper script for unpacking and decompiling EXEs compiled from python code. 项目地址: https://gitcode.com/gh_mirrors/py/python-exe-unpacker Pyt…...

YOLOv12镜像应用案例:如何快速构建自动驾驶感知原型系统

YOLOv12镜像应用案例&#xff1a;如何快速构建自动驾驶感知原型系统 1. 自动驾驶感知系统的技术挑战 自动驾驶技术正在重塑交通出行的未来&#xff0c;而感知系统作为"车辆的眼睛"&#xff0c;其性能直接影响整个系统的安全性和可靠性。传统方案面临三大核心挑战&a…...

Deep-Live-Cam性能优化指南:从环境配置到实时换脸全流程解决方案

Deep-Live-Cam性能优化指南&#xff1a;从环境配置到实时换脸全流程解决方案 【免费下载链接】Deep-Live-Cam real time face swap and one-click video deepfake with only a single image 项目地址: https://gitcode.com/GitHub_Trending/de/Deep-Live-Cam Deep-Live-…...

G-Helper终极指南:如何用轻量工具延长华硕笔记本电池寿命50%

G-Helper终极指南&#xff1a;如何用轻量工具延长华硕笔记本电池寿命50% 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, TUF, Str…...

开源工具:IDM Activation Script彻底解决激活弹窗问题的技术方案

开源工具&#xff1a;IDM Activation Script彻底解决激活弹窗问题的技术方案 【免费下载链接】IDM-Activation-Script IDM Activation & Trail Reset Script 项目地址: https://gitcode.com/gh_mirrors/id/IDM-Activation-Script Internet Download Manager&#xf…...

【GitHub项目推荐--Godogen:一句话生成完整 Godot 游戏的 AI 流水线】⭐⭐⭐

简介 Godogen​ 是一套基于 Claude Code​ 构建的自动化游戏开发流水线。它不仅仅是一个代码生成器&#xff0c;更是一个全栈的“AI 开发团队”&#xff1a;你只需用自然语言描述游戏创意&#xff0c;它便能自动完成架构设计、美术生成、代码编写、引擎截图、视觉质检的全流程…...

深入解析CC Switch架构:构建AI开发工具统一管理引擎

深入解析CC Switch架构&#xff1a;构建AI开发工具统一管理引擎 【免费下载链接】cc-switch A cross-platform desktop All-in-One assistant tool for Claude Code, Codex, OpenCode, openclaw & Gemini CLI. 项目地址: https://gitcode.com/GitHub_Trending/cc/cc-swit…...

告别重复编码:用快马AI自动生成软件库e7c9的高效调用代码

作为一名经常和第三方库打交道的开发者&#xff0c;我深刻体会到手动编写调用代码的繁琐。尤其是像e7c9这样功能强大的软件库&#xff0c;虽然封装完善&#xff0c;但每次调用都需要反复查阅文档、处理边界情况&#xff0c;效率实在不高。最近尝试用InsCode(快马)平台的AI辅助生…...