锚点的作用及用法

2023-10-27

锚点的作用及用法
    HTML中的a标签大家都非常熟悉,它是超链接标签,通过a标签能够跳转到href中指定的页面及指定的位置,a标签可以做到单页面跳转或多页面跳转,锚点能够跳转到当前页面中指定的位置,也能够跳转到指定的其他页面或其他页面中指定的位置。
    锚点有2种使用方法,第一种方法是跳转到当前页面中指定的位置,即单页面跳转;第二种方法是跳转到其指定的其他页面。

  • 使用方法一:单页面跳转到指定位置。
    //a标签中的代码:
    <a href="#demo1">跳转1</a>
    <a href="#node2">跳转2</a>
    <a href="#node3">跳转3</a>
    //跳转到的代码
    <p>00000000</p>
    <p>00000000</p>//…省略
    <p id="demo1">11111111</p>
    <p>00000000</p>
    <p>00000000</p>
    <p>00000000</p>//…省略
    <p id="node2">22222222</p>
    <p>00000000</p>//…省略
    <p id="node3">33333333</p>
    <p>00000000</p>//…省略

    以上代码得到的效果:

这里写图片描述

  • 方法二:跳转到其他页面:
<a href="file:///……跳转页面的路径……/index.html">跳转到其他页面</a>

    以上代码得到的效果:

这里写图片描述

    在路径后面加上对应属性名称,即可跳转到其他页面的指定位置:

<a href="file:///……跳转页面的路径……/anchor.html#node2">跳转到其他页面的指定位置</a>

    以上代码得到的效果:

这里写图片描述

    a标签通过锚点即可达到单页面或多页面跳转,并能够达到多需指向的位置。

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

锚点的作用及用法 的相关文章

  • K8s相关常用命令

    一 查看相关信息 查看pod相关信息 kubectl get pod all namespaces grep 关键字 kubectl get po all namespaces owide grep 关键字 kubectl describe
  • Docker容器与虚拟化技术:Dockerfile部署LNMP

    目录 一 理论 1 LNMP架构 2 背景 3 Dockerfile部署LNMP 3 构建Nginx镜像 4 构建MySQL容器 5 构建PHP镜像 6 启动 wordpress 服务 二 实验 1 环境准备 2 构建Nginx镜像 3 构
  • Websocked的原理和应用场景(心跳模式)

    一 WebSocket是什么 工作原理是什么 WebSocket是一种在Web应用程序中实现双向通信的网络协议 它提供了一种持久连接 允许服务器主动向客户端发送消息 同时也允许客户端向服务器发送消息 相比传统的HTTP请求 响应模式 Web
  • 动态规划之背包问题

    前言 动态规划的本质 是对问题状态的定义和状态转移方程 动态规划具备三个特点 1 将原来的问题分解成几个相似的子问题 2 所有的子问题都只需要解决一次 3 每个状态存储子问题的解 一般从三个角度考虑动态规划 1 状态表示 2 状态计算 gt
  • C++笔试机考三道代码题——包括输入输出

    一 在相邻差为 1 的整数数组中进行有效搜索 时间限制 1000MS 内存限制 65536KB 题目描述 给定一个由n 个整数组成的数组 每个数组元素是通过将 1 或 1 添加到前一个元素获得的 即任意两个连续元素之间的绝对差为 1 任务是
  • 如何在没有iTunes的情况下备份和还原iPhone或iPad

    Justin Duino 贾斯汀 杜伊诺 Justin Duino iTunes can be a chore but here s some happy news In macOS Catalina you no longer need
  • Javascript和CSS的标签属性对应表

    在写javascript中 经常要用到style对象的css属性 很多不记得 其实很好记 基本就是CSS中的 转化为javascript的驼峰写法 除了注意下float 盒子标签和属性对照 CSS语法 不区分大小写 JavaScript语法
  • Cpp学习——编译链接

    目录 编辑 一 两种环境 二 编译环境下四个部分的 1 预处理 2 编译 3 汇编 4 链接 三 执行环境 一 两种环境 在程序运行时会有两种环境 第一种便是编译环境 第二种则是执行环境 如下图 在程序运行时 首先会让源文件文件经过编译环境
  • PNG图片隐写IDAT分析(3)

    使用工具pngcheck 命令 pngcheck exe v sctf png 发现有个异常的IDAT 0X15aff7 一共提权138位 使用zlib进行压缩 代码如下 usr bin env python import zlib imp
  • 2021 年数学建模竞赛题目D 题 连铸切割的在线优化

    问题 1 在满足基本要求和正常要求的条件下 依据尾坯长度制定出最优的 切割方案 假定用户目标值为 9 5 米 目标范围为 9 0 10 0 米 对以下尾坯长 度 109 0 93 4 80 9 72 0 62 7 52 5 44 9 42
  • 欧姆龙fins通讯协议

    https wenku baidu com view fca336f6e43a580216fc700abb68a98270feac67 html
  • static修饰的函数能不能在其它文件里使用

    static修饰函数的作用 关于static关键字的作用可以参考我的博客 C语言中static关键字用法和作用 static修饰函数 就是把函数链接属性改为局部链接属性 用static修饰的函数其他文件是不可见的 没法直接使用 解决了不同源
  • 【批处理DOS-CMD命令-汇总和小结】-网络管理命令-上网和网络通信相关命令-进程与程序管理(netstat、tasklist、taskkill、taskmgr)

    一 显示netstat的帮助信息 执行命令 netstat 得到帮助信息如下 C Users Administrator gt netstat 显示协议统计信息和当前 TCP IP 网络连接 NETSTAT a b e f n o p pr

随机推荐

  • 曼哈顿距离,欧式距离,余弦距离

    1 曼哈顿距离 曼哈顿距离 叫出租车距离的 具见上图黄线 应该就能明白 计算距离最简单的方法是曼哈顿距离 假设 先考虑二维情况 只有两个乐队 x 和 y 用户A的评价为 x1 y1 用户B的评价为 x2 y2 那么 它们之间的曼哈顿距离为
  • MySQL客户端软件(DBeaver)连接报错解决方案

    1 mysql出现错误提示 Communications link failure The last packet sent successfully to the server was 0 mi 无论是在mysql客户端连接 或者是cod
  • DC靶场系列--DC1

    目录 引言 搭建环境 信息收集 漏洞分析 漏洞利用 引言 DC靶场 主要是通过web渗透技术 拿到web服务器的权限 会有flag做为标记 以拿到最终的flag为目标 DC1是vulnhub平台下的DC系列的第一个靶场 DC系列下载地址 官
  • 长角牛网络监听 arp欺骗

    一 原理 arp欺骗和攻击的原理是一样的 都是向目标计算机投毒 发送虚假ip地址对应的mac地址 致使被投毒计算机数据被窃听或者数据被盗取 多数情况欺骗和攻击会发生在计算机和网关的连接过程中 给目标计算机发送假的网关ip对应的mac地址 可
  • 【SDL实践指南】安全培训介绍

    转载自 SDL实践指南 安全培训介绍 腾讯云开发者社区 腾讯云https cloud tencent com developer article 2235019 文章前言 安全并不仅仅是安全团队的本职工作 也是企业的每个研发人员 产品经理
  • windows通过注册表修改3389端口号

    span style color FF0000 windows通过注册表修改3389端口号 步骤如下 span 1 开始 rarr 运行 输入regedit 打开注册表 进入这个路径HKEY LOCAL MACHINE SYSTEM Cur
  • 【波浪动态特效】基于jquery实现页面底部波浪动画效果(附完整源码下载)

    文章目录 写在前面 涉及知识点 实现效果 1 搭建页面 1 1 创建两个片区 1 2 创建波浪区域 1 3 静态页面源码 2 JS实现波浪效果 2 1 动画原理 2 2 动画源码 3 源码分享 3 1 百度网盘 3 2 123云盘 3 3
  • 图像识别(一) 之 灰度共生矩阵(GLDM)

    一 灰度共生矩阵 灰度共生矩阵被定义为从灰度为i的像素点出发 离开某个固定位置 相隔距离为d 方位为 的点上灰度值为的概率 1 计算方法 如上图 GLCM i j 的值呢就是I中像素为i 像素为j的有有多少和相邻的成对点 图上的 相邻 指的
  • 在VUE3中使用Pinia

    一 安装使用Pinia 安装下载 npm install pinia main js引入 import createPinia from pinia app use createPinia 根目录新建store index js中写入 im
  • ubuntu20.04 安装Anaconda3+CUDA+cudnn+Pytorch

    ubuntu20 04 安装Anaconda3 CUDA cudnn Pytorch Ubuntu GPU驱动 CUDA版本 CuDNN 版本 都要相互关联 版本不对应的话 就会出错 版本确认顺序 CUDA版本 gt CuDNN版本 gt
  • 反射、泛型详解

    反射 Class文件所包含的内容都有其对应的方法可以获得 创建Class对象的3种方式 方式一 类 class Class personClass Person class 方式二 对象 getClass Person person new
  • 《算法学习》C语言中“ const * “与“ * const “区别总结

    一 简介 最近重新学习了C语言中的指针 本文总结一下C语言中使用 的心得 二 总结 const 表示指针变量是constant 恒定的 不允许通过访问指针地址的方式改变指针所指地址的的值 const 表示该指针是恒定的 即该指针不能再指向别
  • 修改外向交货单:BAPI_OUTB_DELIVERY_CHANGE/SD_DELIVERY_UPDATE_PICKING_SAP刘梦_新浪博客

    TABLES LIKP PARAMETERS P DEL LIKE LIKP VBELN DEFAULT 8000002260 DATA STR HEADER DATA LIKE BAPIOBDLVHDRCHG STR HEADER CON
  • POJ-1240(分治,递归降解)

    题目 http poj org problem id 1240 题目的意思即 给定一棵m元树的前序和后序遍历 问你一共有多少颗m元树有这样的性质 乍一看好像没什么头绪 由于题目中也提到了由中序和后序求前序 想到是不是同样能用分治法 我们知道
  • 在阿里云服务器上部署Jekyll博客

    Step 0 首先买一台服务器 并且装好环境 我都是在阿里云上面买 而且我只是想挂一个个人网站 所以只需要最便宜的轻量应用服务器就好 半年只需要72块钱 我现在想来 之前也应该买香港的服务器 因为更加便宜 大陆的要60块一月 而且不需要给服
  • 初识ASO

    大概了解了一下ASO 在此记录一下 ASO 应用商店优化 的简称 ASO App Search Optimization 重点在于关键词搜索排名优化 覆盖热词 搜索下载激活 优化评论 关键词覆盖数量优化 就是指用户搜索更多关键词都能找到该款
  • VS Code(Visual Studio Code)环境下C++开发的配置方法

    一 Visual Studio Code的下载 去官网下载 下载地址 https code visualstudio com Download 我在windows系统下使用 直接点击Windows那个图标下载就好 安装时可以自己选择一下安装
  • layui源码详细分析之树形菜单

    前言 今天分析的是layui框架内置模块tree js 该模块的功能是构建树形菜单 具体的形式 layui官网该模块的具体形式 如下 自实现树形菜单 使用html css js实现了树形菜单 具体的实现思路如下 html中定义包含树形菜单的
  • C++选择结构学案

    学习目标 熟练掌握 C 中的关系 逻辑运算符 熟知关系 逻辑运算符和数学运算符的优先级 学会正确使用选择表达式 知识着陆 1 关系运算符 使用关系运算符需要注意的问题 1 等于 与 赋值 的区别 2 实型数据 浮点数 的关系运算 3 运算符
  • 锚点的作用及用法

    锚点的作用及用法 HTML中的a标签大家都非常熟悉 它是超链接标签 通过a标签能够跳转到href中指定的页面及指定的位置 a标签可以做到单页面跳转或多页面跳转 锚点能够跳转到当前页面中指定的位置 也能够跳转到指定的其他页面或其他页面中指定的