html中的锚点

一、页面内跳转的锚点设置

页面内的跳转需要两步:

方法一:

①:设置一个锚点链接<a href="#miao">去找喵星人</a>;(注意:href属性的属性值最前面要加#)

②:在页面中需要的位置设置锚点<a name="miao"></a>;(注意:a标签中要写一个name属性,属性值要与①中的href的属性值一样,不加#)标签中按需填写必要的文字,一般不写内容

方法二:

①:同方法一的①

②:设置锚点的位置 <h3 id="miao">喵星人基地</h3>;在要跳转到的位置的标签中添加一个id属性,属性值与①中href的属性值一样,不加#

方法二不用单独添加一个a标签来专门设置锚点 ,只在需要的位置的标签中添加一个id即可。

小案例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>萌宠集结号</title>

</head>

<body>

<ul>

<li><a href="#miao">去找喵星人</a></li>

<li><a href="#wang">去找汪星人</a></li>

<li><a href="#meng">其他萌物</a></li>

</ul>

<a name="miao"></a><!--设置锚点方法1-->

<h3 id="miao">喵星人基地</h3><!--设置锚点方法2-->

<p>喵喵喵~</p>

<p>喵喵喵~</p>

<p>喵喵喵~</p>

<p>喵喵喵~</p>

<p>喵喵喵~</p>

<p>喵喵喵~</p>

<a name="wang"></a>

<p>汪汪汪~</p>

<p>汪汪汪~</p>

<p>汪汪汪~</p>

<p>汪汪汪~</p>

<p>汪汪汪~</p>

<p>汪汪汪~</p>

<a name="meng"></a>

<p>萌萌萌~</p>

<p>萌萌萌~</p>

<p>萌萌萌~</p>

<p>萌萌萌~</p>

<p>萌萌萌~</p>

<p>萌萌萌~</p>

</body>

</html>

二、跨页面跳转

①:设置锚点链接,在href中的路径后面追加:#+锚点名,即可

如:<a href="萌宠集结号.html#miao">跳转到萌宠集结号页面</a>

②:要跳转到的页面中要设置锚点,方法见一种的步骤②,两个方法任选其一。

热门文章

暂无图片
编程学习 ·

C语言期末考试内容(2)选择填空答案整理(基础章节内容)

C语言期末考试内容(2)选择填空答案整理(基础章节内容)文章目录C语言期末考试内容(2)选择填空答案整理(基础章节内容)作业二:变量定义/读/写与数据的存储表示一、判断题:答案: F F F F解析:1-4:C语言中的结束符是以分号来结束的,一个分号就代表一条语句。二、单选…
暂无图片
编程学习 ·

毛毛爸爸手记-2

http://blog.sina.com.cn/s/blog_4bf99d0601000825.html今天,毛爸从天鹅和鸭子的故事说起。从前......一只美丽的天鹅有一天落在地上时,看见了一只健壮的鸭子,她立刻被这只帅气的鸭子所打动,她惊诧于鸭子不同于她同类的模样,不同于她同类气质,是那么的有型,那么的另类。…
暂无图片
编程学习 ·

获取电脑ip地址的代码工具类

获取ip地址的工具类 import javax.servlet.http.HttpServletRequest;import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.util.StringUtils; import org.springframework.web.context.request.RequestContextHolder; import org.springfram…
暂无图片
编程学习 ·

几种常见的分布式事务解决方案对比

背景 分布式事务是企业集成中的一个技术难点,也是每一个分布式系统架构中都会涉及到的一个东西,特别是在微服务架构中,几乎可以说是无法避免。 ACID 指数据库事务正确执行的四个基本要素: 原子性(Atomicity) 一致性(Consistency) 隔离性(Isolation) 持久性(Durabili…
暂无图片
编程学习 ·

[云盘](二)我的文件和共享列表后台实现

后台代码实现我的文件列表Mian读取配置信息解析json登录token(cmd为count)解析jason(cmd不为count)获取用户文件个数获取用户文件列表源码共享文件列表main获取共享文件个数前端分页请求包获得普通共享文件列表共享文件排行榜源码 我的文件列表业务逻辑是,点击我的文件,会…
暂无图片
编程学习 ·

Spring Boot 集成 WebSocket 实现服务端推送消息到客户端

假设有这样一个场景:服务端的资源经常在更新,客户端需要尽量及时地了解到这些更新发生后展示给用户,如果是 HTTP 1.1,通常会开启 ajax 请求询问服务端是否有更新,通过定时器反复轮询服务端响应的资源是否有更新。ajax 轮询在长时间不更新的情况下,反复地去询问会对服务器…
暂无图片
编程学习 ·

文创调研案例02-瑞士达沃斯小镇

摘要:达沃斯小镇作为世界特色小镇的典范,以其特色生态为基础,不断创新,形成了会议、疗养、体育、旅游多条产业互相作用的综合产业,其宝贵经验具有借鉴价值。中国自2016年起,特色小镇遍地开花,但同质化现象严重,如何打造特色小镇的“特”成了关键。本文以达沃斯小镇为例…
暂无图片
编程学习 ·

【】

只需在两个浏览器中用同一个账号登录就会发现,到目前为止,系统尚未有任何会话并发限制。一个账户能多处同时登录可不是一个好的策略。事实上,Spring Security已经为我们提供了完善的会话管理功能,包括会话固定攻击、会话超时检测以及会话并发控制。1.什么是会话会话(sessi…
暂无图片
编程学习 ·

亚马逊ERP系统独立部署OEM定制无限开账号

马逊无货源模式,和传统无货源模式操作一样!需要咱们开店利用软件去采集商品,上传到咱们店铺,有订单了去上家拍下,发到深圳的中转仓,进行商品检测二次包装,发往国外!赚取汇率差! 要做亚马逊无货源模式,那么亚马逊ERP也是必须用的!市场erp已经出现很多,但是真正做技术…
暂无图片
编程学习 ·

使用ftrace分析函数性能

0. 背景 ftrace的功能非常强大,可以在系统的各个关键点上采集数据用以追踪系统的运行情况。既支持预设的静态插桩点(trace event),也支持每个函数的动态插桩(function tracer)。还可以利用动态插桩来测量函数的执行时间(function graph tracer)。关于ftrace的详细操作和原理分…
暂无图片
编程学习 ·

Java 基础 A类集合存的数据B类调用

1.新建一个Callback抽象类public interface Callback {Map<String, Object> a() ; }2. b继承Callbackpublic class b implements Callback{@Overridepublic Map<String, Object> a() {Map<String,Object> map=new HashMap<>();map.put("china&q…
暂无图片
编程学习 ·

三通道低功耗AS3933/PAN3501低频唤醒芯片125K

三通道低功耗 ASK 接收机 1 、概 述 PAN3501 是一款支持最多三个通道接收的低功耗 ASK 接收机,可用于检测 15kHz-150kHz之间的 LF 载波频率的数据信号并触发唤醒信号。支持检测可编程的 16 位或 32 位曼彻斯特唤醒模式。 …
暂无图片
编程学习 ·

从大量文件中找到指定文件并执行指定文件操作

从大量文件中找到指定文件并执行指定文件操作Linuxwindows Linux 应邀对一些文件进行处理,如图所示目录结构就是a-1.bmp, a-2.bmp, ... , a-49.bmp,其他字母同理,前面的索引从a-z,另外还有0. 要求是取出所有的2号索引为1,2,3,4,5,6的文件。 Linux有个极强大的命令find,不仅…
暂无图片
编程学习 ·

区块链存在哪些问题需待被解决?

虽然说区块链越来越被大家熟知,全国各地的政策也都在逐渐利好,但是区块链的实际落地应用,在我们身边却很少见到。区块链目前大部分是政府在推动使用,接下来是企业,可以说目前区块链技术基本上是完全ToB的,没有ToC。如果你把炒币算进去的话,那就有ToC了。区块链技术的落地…
暂无图片
编程学习 ·

java编程思想——抽象类和接口(java接口不能实例化原因)

文章目录java的接口为什么不能实例化呢?总结: java的接口为什么不能实例化呢? 首先,我们需要明白实例化的含义。实例化实际意义是在jvm的堆中开辟出一块内存空间,比如Student s = new Student();此处声明Student对象s,并且实例化一个Student对象,实则是在堆中开辟出一块…
暂无图片
编程学习 ·

linux笔记(三)Linux的基本命令

1 cd 切换目录2 ls 查看目录下的内容3 mkdir 创建文件夹4 touch 创建文件5 cp 复制 文件和文件夹6 mv 剪切移动 文件夹和文件7 rm 删除1 cd 切换目录带/ 绝对路径 ./ ../ ../../ 相对路径cd - 切换到上次所在的目录cd ~ 回到当前用户的家目录 /root /homecd - 切…
暂无图片
编程学习 ·

查看、生成 SSH 密钥用于安全登陆

SSH 可以用来登陆服务器,远程执行命令,并用强加密算法编码保护通信安全,目前广泛应用于远程命令控制、文件加密传输等方面。SSH 登陆服务器的方法一般有两种:密码登陆和密钥登陆。 在受信任的设备上使用密钥鉴权方式登陆相比于每次登陆时输入密码更加方便,也免除了密码被偷…
暂无图片
编程学习 ·

SSM整合(crud)

这是一个基于员工部门的bootstrap+ssm+maven的整合demo 部分图片如下所示:1.MyBatis逆向工程(MBG)自动生成代码 2.PageHelper分页插件 3.基于Maven的Spring+SpringMVC+MyBatis整合 4.使用BootStrap搭建前端页面,result风格,ajax异步请求(前端校验+后端校验JSR303+数据库约束,保…
暂无图片
编程学习 ·

LeetCode题解(0888):公平的糖果交换(Python)

题目:原题链接(简单)解法 时间复杂度 空间复杂度 执行用时Ans 1 (Python) O(A+B)O(A+B)O(A+B) O(1)O(1)O(1) 3784ms (33.83%)Ans 2 (Python) O(A+B)O(A+B)O(A+B) O(B)O(B)O(B) 448ms (88.16%)Ans 3 (Python)LeetCode的Python执行用时随缘,只要时间复杂度没有明显差异,执行…