a href=“#“与a href=“###“的区别

最新推荐文章于 2023-08-12 21:31:16 发布
最新推荐文章于 2023-08-12 21:31:16 发布
阅读量705 收藏 2
点赞数 3
分类专栏： html JavaScript 文章标签： href的一个#和三个# href=### href=#和href=### href不跳回顶部 href保持原来位置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/super_DuoLa/article/details/114628995
版权

一、结论

     1、#：当点击链接时，页面会跳到网页头部
     2、###：页面不会跳到头部，显示当前的位置

二、情况适用

      1、#：正常使用
      2、###：实现触发链接后不跳回顶部的功能

三、实践

1、代码编写

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>a标签的#</title>
  </head>
  <body>
   <div style="height: 1500px;width: 500px;background-color: green"></div>
   <a href="#">一个#</a>
   
   <br><br><br><br>
   
   <a href="###">三个#</a>
  </body>
</html>

2、效果

为了更好的看出对比效果，我们在代码前加上一段内容，使得出现滚动条，即无法显示当前所有内容

（1）一个#：回到顶部

（2）三个#：还保持原来的位置

super_.
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
链接中的href=#是什么意思呢
12-13
－－－－－－－－－－－－－－－－－－－ 通常有如下用法： <a>关闭</a> 将href="#"是指联接到当前页面，其实是无意义的，页面也不会刷新，关键是后面的onclick，当点击“关闭”时，会执行window.close()代码。...
详解a href=#与 a href=[removed]void(0) 的区别
09-28
在HTML中，`<a>`标签通常用于创建超链接，而`a href="#"`和`a href="javascript:void(0)"`是两种常见的用法，它们之间有着显著的区别。 首先，`a href="#"`是一个指向页面内部锚点的链接。默认情况下，`#`代表页面...
链接中 href='#' 和 href='###' 的区别以及优缺点
CherishL_的专栏
01-30 870
https://www.cnblogs.com/cssfirefly/p/3865926.html 首先，a 标签 + onclick=’{jscode}’ 是很常用的一种 js 运用方式，而不使用 href=’javascript:{jscode}’ 是为了兼容多种浏览器对 a标签的解释和处理不同。其次，使用 a 标签 + onclick=’{jscode}’ 时经常会加一个 href=’#
第四章：运算符（知识总结）
qq_57542248的博客
11-02 1290
（1），算数运算符 #/:数学中的除法 //:整除(结果是整数）%模/求余数 a =3 b =2 print(a+b) print(a-b) print(a*b) print(a/b) print(a//b) print(a%b) weekeday = int(input('今天是周几')) weekeday2 = (weekeday+12)%7 print('十二天之后是周',weekeday2)# %求余 可以拿到低位上的数字 // 可以拿到高位上的数字 ## 分解三位数{%最低位，//最高位 ，//.
C语言 ##运算符 - C语言零基础入门教程
猿说编程
09-14 1234
目录 一.##运算符简介 二.##运算符使用 1.##运算符常规使用 2.##运算符定义结构体 三.猜你喜欢 零基础 C/C++ 学习路线推荐 : C/C++ 学习目录 >> C 语言基础入门 一.##运算符简介 在 C 语言关于 define 的文章中我们有介绍到：凡是以#开头的均为预处理指令，预处理又叫预编译。预编译不是编译，而是编译前的处理。这个操作是在正式编译之前由系统自动完成的。 C 语言除了**#运算符，还有 ##运算符 ;与 #运算符类似，##运算符可用于类函数宏（带
C语言——“#”号
最新发布
qq_67319052的博客
08-12 3905
在C语言中有着许许多多的符号，下面就一起来看看（#）这一符号吧，它有着许许多多的功能。
mybatis中xml文件的${}和#{}区别
rongxue2599的博客
03-23 2304
在项目中要实现所有业务批量提交的功能，实现方式，把表名，表主键字段当做参数传递，在xml文件中全部使用的#{}，导致解析的时候出现问题。1.#将传入的数据都当成一个字符串，会对自动传入的数据加一个双引号。如：order by #user_id#，如果传入的值是111,那么解析成sql时的值为order by "111", 如果传入的值是id，则解析成的sql为order by "id".2. $将...
href=#是什么意思呢?
zmr1991的专栏
05-14 2955
href=#是什么意思呢?每一个网友都很疑惑，href=#是链接当前页面, 通常有如下用法： 关闭 将href="#"是指联接到当前页面，其实是无意义的，页面也不会刷新，关键是后面的onclick，当点击“关闭”时，会执行window.close()代码。 你或许会说为什么不直接写成关闭 如果这样写，关闭这两个字就不会作为超联接处理，效果看上去会差一些。你可以自己试试。在制作
详解A标签中href=””的几种用法
12-11
而且，大多数人认为a标签最重要的作用是实现超链接，今天我刚好碰到a标签的一种写法<a></a>，所以就来整理下a标签中href的几种用法。 一、js的几种调用方法（参考总结的）  1、a href="[removed]js_method();"  这...
[removed]void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
11-25
Javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。 void 操作符用法格式如下： 1. [removed]void (expression) 2. [removed]void expression ...1：<a></a> 2：<a></a> 3
a标签中href=""的几种用法
热门推荐
Wendy
10-11 24万+
众所周知，a标签的最重要功能是实现超链接和锚点。而且，大多数人认为a标签最重要的作用是实现超链接，今天我刚好碰到a标签的一种写法，所以就来整理下a标签中href的几种用法。 一、Js的几种调用方法（参考总结的） 1、a href="javascript:js_method();" 这是常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的h
详解a标签中href=““的几种用法
甜心的专栏
06-29 5229
这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。此时指向页面中的锚，比如href="#box"，那么点击时就会到当前页面中id="box"的这个锚点，实现当前页面的所谓跳转。用的最多就是在可滚动页面中，添加菜单，可以直接回到页面中的某个部分的内容。javascript:是伪协议，此方法代表在发生动作时执行一段javascript代码，但是这个代码是空的，所以什么也不执行。
<a href="#">是什么意思？
yqyily的专栏
03-21 8205
通常有如下用法：关闭将href="#"是指联接到当前页面，其实是无意义的，页面也不会刷新，关键是后面的onclick，当点击“关闭”时，会执行window.close()代码。你或许会说为什么不直接写成关闭如果这样写，关闭这两个字就不会作为超联接处理。
a href="#"与a href="####"的区别是什么
weixin_30627341的博客
11-17 225
前提是 :有滚动条。 【感谢 黎明就在眼前 博客园园友】 '#' 是有特殊意义，如果 '#' 后有内容会被认为是一个标签而从页面找到相应标签跳转到该处，找不到时会跳到页首，通常情况下使用“#ID”来进行跳转。 '###' 就是一个无意义的标签指定，也就是一个 '#' 和不存在的标签 '##' 的组合，页面中找不到id为 '##' 元素时，就不会发生跳转。 1一个 #当点击链接时，页面会...
href="#"是什么意思
forchance1的专栏
11-05 1500
联接是当前页面。 －－－－－－－－－－－－－－－－－－－ 通常有如下用法： 关闭 将href="#"是指联接到当前页面，其实是无意义的，页面也不会刷新，关键是后面的onclick，当点击“关闭”时，会执行window.close()代码。 你或许会说为什么不直接写成关闭 如果这样写，关闭这两个字就不会作为超联接处理，效果看上去会差一些。你可以自己试试。
HTML问题，a href =" "和 a href ="#"这两个有什么区别？
weixin_30527423的博客
07-23 1620
a href ="" 默认打开的还是当前页面，会刷新一下重新打开。a href ="#" 浏览器地址栏网址后面会多显示1个#。不会刷新页面，会回到页面顶部。 转载于:https://www.cnblogs.com/windly/p/5698677.html...
详解A标签中href=""的几种用法
XJT520520的博客
09-29 6993
众所周知，a标签的最重要功能是实现超链接和锚点。而且，大多数人认为a标签最重要的作用是实现超链接，今天我刚好碰到a标签的一种写法&lt;a href="JavaScript:;"&gt;&lt;/a&gt;，所以就来整理下a标签中href的几种用法。 一、js的几种调用方法（参考总结的）       1、a href="javascript:js_method();"        这是常用...
超链接中 href='#' 和 href='###' 的区别
Kathy的博客
06-09 6156
js 运用方式之一：&lt;a&gt; 标签 + onclick='{jscode}' ，相比起 href='javascript:{jscode}'  ，前者能兼容多种浏览器对 &lt;a&gt; 标签的解释和处理不同。而使用  &lt;a&gt; 标签 + onclick='{jscode}'  时经常会加一个 href='###'；那么超链接中 href='#' 和 href='###' 的...
<body> <div class="wrapper"> <ul id="left"> <li><a href="#">女靴</a></li> <li><a href="#">雪地靴</a></li> <li><a href="#">冬裙</a></li> <li><a href="#">呢大衣</a></li> <li><a href="#">毛衣</a></li> <li><a href="#">棉服</a></li> <li><a href="#">女裤</a></li> <li><a href="#">羽绒服</a></li> <li><a href="#">牛仔裤</a></li> <li><a href="#">男包</a></li> </ul> <div id="content"> <div> <a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a> </div> <div> <a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a> </div> <div> <a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a> </div> <div> <a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a> </div> <div> <a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a> </div> <div> <a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a> </div> <div> <a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a> </div> <div> <a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a> </div> <div> <a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a> </div> <div> <a href="#"><img src="images/男包.jpg" width="200" height="250" /></a> </div> </div> </div> </body>如何将其改为水平分布
06-03
可以通过修改CSS样式来实现水平分布。具体方法如下： 1. 将ul的display属性设置为flex，使其变为弹性盒子。 2. 将li的display属性设置为inline-block，使每个li元素变为行内块元素。 3. 将content的display属性设置为flex，使其变为弹性盒子。 4. 将每个content div元素的flex属性设置为1，使它们平分content的宽度。 5. 将img元素的max-width属性设置为100%，使其自适应父元素宽度。 修改后的代码如下： ``` <style> .wrapper { display: flex; justify-content: center; } #left { display: flex; list-style: none; margin: 0; padding: 0; } #left li { display: inline-block; margin-right: 10px; } #content { display: flex; flex-wrap: wrap; justify-content: center; } #content div { flex: 1; margin: 10px; } img { max-width: 100%; } </style> <body> <div class="wrapper"> <ul id="left"> <li><a href="#">女靴</a></li> <li><a href="#">雪地靴</a></li> <li><a href="#">冬裙</a></li> <li><a href="#">呢大衣</a></li> <li><a href="#">毛衣</a></li> <li><a href="#">棉服</a></li> <li><a href="#">女裤</a></li> <li><a href="#">羽绒服</a></li> <li><a href="#">牛仔裤</a></li> <li><a href="#">男包</a></li> </ul> <div id="content"> <div> <a href="#"><img src="images/女靴.jpg" /></a> </div> <div> <a href="#"><img src="images/雪地靴.jpg" /></a> </div> <div> <a href="#"><img src="images/冬裙.jpg" /></a> </div> <div> <a href="#"><img src="images/呢大衣.jpg" /></a> </div> <div> <a href="#"><img src="images/毛衣.jpg" /></a> </div> <div> <a href="#"><img src="images/棉服.jpg" /></a> </div> <div> <a href="#"><img src="images/女裤.jpg" /></a> </div> <div> <a href="#"><img src="images/羽绒服.jpg" /></a> </div> <div> <a href="#"><img src="images/牛仔裤.jpg" /></a> </div> <div> <a href="#"><img src="images/男包.jpg" /></a> </div> </div> </div> </body> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值