标签href几种使用

2023-11-07

a标签的最重要功能是实现超链接和锚点,a标签里href属性是我们经常用的,其实它的值有很多种,可能我们往往会忽略,今天分享一下a标签的属性值及用法。

1. href=“#”:

这是一个比较常用的方法。#是标签内置的一个方法,用于网页返回顶部较多。比如在底部有个置顶的按钮,使用这个就比较方便了。

使用:<div><a href="#">返回顶部</a></div>

2.href=“url”:

这也是我们最常使用的属性值。你可以给定一个固定值,进行跳转。(本次target不做具体介绍)

target="_blank"::浏览器总在一个新打开、未命名的窗口中载入目标文档。<a href="https://www.baidu.com/"  target="_blank">跳转到新页面</a>;

target="_self"::<a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。

target="_parent"::这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。

target="_top"::这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

3:<a> 标签 + οnclick='{jscode}' 是很常用的一种 js 运用方式

其实用js有几种方法。

I :a href="javascript:",这个方法比较常见,其中javascript:是伪协议,意思是可以让我们通过一个链接来调用javascript函数。地址不发生跳转。可以实现A标签的点击事件运行时,页面不会跳转。

II:  a href="javascript:void(0)"; void是一个操作符,void(0)返回undefined,页面也不会发生跳转

III :a href="#" οnclick="js_method();return false;",这个方法的意思大致是:方法点击执行了js函数后return false,页面不发生跳转。

该方法缺点:使用javascript:void(0)可能会有浏览器兼容问题,比如:在ie下使用可能造成gif动画停止播放等。

4:href=“###”:

这个方法,刚使用这个标签不久的人,不太了解。'###' 其实就是一个无意义的标签指定,也就是一个 '#' 和不存在的标签 '##' 的组合。页面中找不到命名为 '##' 的 <a> 时该链接就不会发生跳转,也就不会导致执行 onclick 中的内容时突然发生页面跳到页首的问题。说白了"###" 就是一个不是锚点的字符串 浏览器找不到也不会跳到页首,原理就是依赖了网页的报错机制,找不到就不做处理。

对于“###”这个也有些缺点,它会改变链接地址。点击完成后,你会发现地址栏里后面多了3个#。

 

 

可以根据自己的需求使用。

 

转载于:https://www.cnblogs.com/mzhen/p/7611347.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

标签href几种使用 的相关文章

  • 生产中的 Webpack:为什么 React Native 会出现错误?

    我有一个测试应用程序 安装了以下内容 dependencies express 4 14 0 react 15 3 2 react dom 15 3 2 devDependencies babel 6 5 2 babel core 6 18
  • 如何使用 JqGrid 子网格进行内联编辑?

    我知道如何使用主网格进行内联编辑 但是有没有办法对子网格进行内联编辑 这是我的 JS 文件 function var lastsel list jqGrid url example php postData q 1 datatype jso
  • Jquery 动画与 CSS 浮动

    我的代码有问题 宽度似乎可以工作 但浮动没有 这里是 这是一个例子 http jsfiddle net v82ck http jsfiddle net v82ck 问题 悬停时菜单上的浮动属性不会改变 我希望每个菜单元素下方的线在悬停该菜单
  • 如何使用 jquery 从 iframe 内部滚动?

    我正在使用一个 Shadowbox 它生成一个 iframe 以在页面上显示产品详细信息 由于详细信息页面可能相当长 因此客户端需要一个 更多 按钮来向下滚动页面 显然 iframe 右侧的滚动条还不够 这是我为了让 iframe 滚动而尝
  • Chart.js 没有显示在我的视图中

    我有一个使用 angular js 运行的应用程序 我的视图之一应该加载图表 我正在使用 Chart js 但由于某种原因它不起作用 并且我的控制台上没有显示错误 这是我创建图表的函数 scope writeBatteryChart fun
  • KineticJS - 将舞台缩放到视口

    我正在努力将默认分辨率设置为 1366x756 我会根据视口来放大和缩小它 类似于此处显示的示例 http blogs msdn com b davrous archive 2012 04 06 modernizing your html5
  • JavaScript 中的常用数字

    在我的任务中 我必须编写一个程序来查找数组中最常见的数字以及它重复的次数 我写了一些东西 但只打印最大重复次数 所以我的问题是如何打印这个元素的值 最大数量 在我的例子中是 4 var array 13 4 1 1 4 2 3 4 4 1
  • 在 AngularJS 中覆盖运行时的依赖关系

    我有一个服务叫 doggedHttp 它公开了与 http 现在我想创建一个 doggedResource服务是有角度的 resource服务之上 doggedHttp代替 http 换句话说我想注入 doggedHttp as the h
  • GeoJSON 要素坐标未显示在 OpenLayers 地图上

    我正在尝试显示一个GeoJSON地图上的多边形 我使用了 OpenLayers 提供的示例以及以下数据 但仅显示第二个多边形 var geojsonObject type FeatureCollection crs type name fe
  • 在 Chrome 中检索浏览器语言

    我一直在尝试让 momentjs 正确检测浏览器语言并本地化时间显示 按照使用 Moment js 进行区域设置检测 https stackoverflow com questions 25725882 locale detection w
  • RxJS - 从可观察对象中获取最后 n 个元素

    我想从可观察对象中获取最后 3 个元素 假设我的时间线是这样的 a b c d e f g h i j gt where a b c d e f g h i j are emitted values 每当发出新值时 我想立即获取它 因此它可
  • Firefox OS 后台服务

    我想构建一个应用程序 用户可以通过它输入一些设置 并且应用程序将启动后台服务来根据这些设置执行一些任务 我只想在模拟器中运行应用程序和后台服务 我知道它需要 认证 模式才能运行后台服务 但我现在不考虑在 Firefox Marketplac
  • Typeahead.js 干扰 Bootstrap 输入组

    如何防止 Typeahead js 拆分我的 Twitter Bootstrap 3 输入组 每当我将 Typeahead javascript 指向属于输入组一部分的文本区域时 连接的文本区域和提交按钮就会停止连接 这只是 Typeahe
  • 替换 Javascript 中的引号?

    对于我正在制作的网络应用程序 我将收到文本字符串 其中偶尔包含引号 因为我接下来要 document writing 字符串 所以需要将它们更改为撇号或转义 我该怎么做 因为当我尝试时它似乎不起作用 特别是我认为因为字符串的引号阻止了脚本的
  • HTML if 语句在 CDN 失败时加载本地 JS/CSS

    当从 CDN 或任何外部服务器加载 CSS JS 文件时 有可能 即使概率很低 由于外部故障而丢失该文件 在这种情况下 html 页面将因缺乏适当的 CSS 和 JS 而被损坏 有没有一种实用的方法可以在 CDN 故障时加载本地版本 IF
  • Rails - 使链接与 ajax 一起工作

    我有一个链接 应该使用 ajax 加载它旁边的部分内容 而无需重新加载页面 链接在这里 这是链接应该转到的控制器 class ProfilesController lt ApplicationController def profile f
  • 反转二进制网络

    如何反转二元方程 以便找到哪些输入将产生给定的输出 Example Inputs i0 through i8 Outputs o0 through o8 Operators XOR AND 二元方程 1 i0 1 i1 0 i2 1 i3
  • Safari 的 Javascript 与 document.write 的问题

    我的问题只发生在 Safari 上 IE FF Chrome 和 Opera 都可以完美运行 我正在向 DOM 添加一个对象 与 YouTube 的方式完全相同 具体取决于 ActiveX 或 NPAPI 因此在确定写入对象类型后 我通过以
  • JS中如何过滤多个字符串? [复制]

    这个问题在这里已经有答案了 我希望能够过滤数组中的多个字符串 类型 例如我想过滤类型meat并输入fruit在下面的数据结构中 我想要实现的是过滤数据对象 const data type meat food hamburger type f
  • JavaScript 右移负数

    这是片段 var i 101 console log 101 i toString 2 console log 101 gt gt 1 i gt gt 1 toString 2 var l 101 console log 101 l toS

随机推荐

  • 在vs2019配置MySQL环境,不需要每次新建一个项目重新配置的方法(图文详解)

    目录 问题 解决方法 问题 上一期讲到怎么在vs2019去配置mysql的编译环境vs2019 c c 配置MySQL数据库的环境 图文详解 守约斯维奇的博客 CSDN博客 这里我们会觉得当建立一个新项目的时候去配置mysql的编译环境非常
  • Qt D-Bus

    介绍 D Bus是为Linux系统开发的进程间通信 IPC 和远程过程调用 RPC 机制 使用统一的通信协议来代替现有的各种IPC解决方案 它允许系统级进程 如 打印机和硬件驱动服务 和普通用户进程进行通信 它使用一个快速的二进制消息传递协
  • 分布式理论-拜占庭将军(译)

    作者 LESLIE LAMPORT ROBERT SHOSTAK and MARSHALL 1982 译者 phylips bmy 出处 http duanple blog 163 com blog static 7097176720112
  • springBoot 拦截器

    声明 代码是JavaEE开发的颠覆者 Spring Boot实战代码中的 我买了这书 并练习 public class DemoInterceptor extends HandlerInterceptorAdapter 1 Override
  • 笔录getResource() 与 getClassLoader().getResource()

    结论 1 Class getResource String path path路径的前缀不是 表示从此类所在的包下取资源文件 path路径的前缀是 则是从ClassPath根下获取资源文件 Class getResource和Class g
  • python seleium b站 自动投币脚本

    主要是给我的投币器做个铺垫 果然软件还是太容易了 难在硬件和外壳好吗 1 把edge的调试端口打开 添加以下参数 C Program Files x86 Microsoft Edge Application msedge exe remot
  • 在express项目里配置ejs模板引擎

    方法1 修改app js view engine setup app set views path join dirname views app set view engine ejs 在views中创建ejs模板文件 方法2 修改app
  • 老年人晕倒的几种原因

    晕倒是一种突发性 短暂性 一过性的意识丧失而昏倒 突然性的晕倒 跟大脑的神经有分不开关系 癫痫 脑供血不足 心脑血管疾病都是引起头晕倒的原因 大脑血液上不来 脑血液突然停止 就会产生放电波头晕的症状 患者会在一时间出现晕倒 很容易引起脑震荡
  • 在conda虚拟环境中的PyQt配置以及相关Pycharm设置

    文章目录 在conda虚拟环境中的PyQt配置 背景环境介绍 PyQt依赖包及PyQt tools的下载 Pycharm进行PyQt的相关配置 结语 在conda虚拟环境中的PyQt配置 作者 下龙湾 背景环境介绍 anaconda安装文件
  • Netty4简单认知

    Channel简介 在Netty中 Channel相当于一个Socket的抽象 它为用户提供了关于Socket状态 是连接还是断开 及对Socket的读 写等操作 每当Netty建立了一个连接 都创建一个与其对应的Channel实例 Cha
  • 各种排序算法的讲解与实现

    排序的分类 1 内部排序 内部排序 在整个排序过程中不需不访问外存便能完成 称这样的排序问题为内部排序 1 1 插入排序 插入排序 将无序序列中的一个或几个记录 插入 到有序的序列中 从而增加记录的有序序列的长度 主要思想是将第一个元素看做
  • 3D重建模的初步了解

    相关学习资料如下 cousera课程 https www coursera org learn robotics perception youtube课程 https www youtube com watch v RDkwklFGMfo
  • 什么是HTTPS

    首先 在参考 Tomcat内核设计剖析 大型网站技术架构 的基础上加了一些个人理解 如有错误或者不全面的地方 还请大家指出 在知道什么是HTTPS之前 我们首先要知道一下什么是HTTP HTTP是超文本传输协议的简称 工作在应用层 传输层基
  • linux上好玩的东西

    Figlet 想知道tmux安装与配置评论加点赞 想要我这个效果吗 安装figlet mac安装 brew install figlet brew 没有的可以看我之前的文章 ma配置 linux ubuntu deepin sudo apt
  • 最易上手的测试用例设计方法

    NO 1 lt lt 测试用例设计方法 gt gt 以下是八种常见的测试用例设计方法 包括等价类 边界值 判定表 因果图 正交实验 状态迁移图 场景法和错误推测 详述如下 等价类划分法 Equivalence Partitioning 策略
  • C++新特性16_写时拷贝(解决浅拷贝在某一个类对象中的资源进行修改,所有引用该资源的对象全部会被修改的问题;解决办法:在所有改变值的地方,重新分配内存,改变的是拷贝的值,而不影响原有对象中共享资源)

    C 新特性16 写时拷贝 1 问题 如果共享资源中的值发生了变化 那么其他使用该共享资源的值如何保持不变 2 解决思路 使用引用计数时 当发生共享资源值改变的时候 需要对其资源进行重新的拷贝 这样改变的是拷贝的值 而不影响原有的对象中的共享
  • 母版页禁用Enter提交表单

    在母版页里面由于使用了form 常常需要禁用enter提交表单 因为内容页或者母版页自身有如果有type submit 的button 当textbox聚焦时 按下enter都会触发表单的默认提交 不论是IE还是firefox 于是需要在o
  • python json串合并

    获取cookie def get login cookies self str1 str2 str3 str4 str5 str6 try 必须要有的cookie字段 var items bizuin data bizuin data ti
  • 1*1卷积核的作用及其应用举例

    1 降维和升维 通过使用 1x1 卷积核 可以改变输入张量的通道数 当输入张量的通道数较大时 使用 1x1 卷积核进行卷积操作可以将通道数减小 从而降低模型的计算复杂度 相反 如果需要增加通道数 也可以使用 1x1 卷积核进行升维操作 im
  • 标签href几种使用

    a标签的最重要功能是实现超链接和锚点 a标签里href属性是我们经常用的 其实它的值有很多种 可能我们往往会忽略 今天分享一下a标签的属性值及用法 1 href 这是一个比较常用的方法 是标签内置的一个方法 用于网页返回顶部较多 比如在底部