html锚链接
锚点(anchor):其实就是超链接的一种,一种特殊的超链接
普通的超链接,<a href="路径"></a> 是跳转到不同的页面
而锚点,<a href="路径"></a> 可以在同一个页面中不同的位置间跳转
可以看到,跳转到锚点的超链接跟普通的超链接格式是一样的,
1.使用锚点的步骤:
1.1.先建立锚点目标,
如上所述,锚点可以在同一页面的不同位置间跳转,其实就是在元素间跳转,
常用的场景就是,页面很长,让用户方便在页面不同部分间跳转
建立锚点目标,只需要给目标元素增加id或者name即可,推荐id:
<div id="test" name="test"></div>
1.2.要创建跳转到id="test"的div的锚点,
<a href="#test"></a>
注意:1.锚点的超链接路径一定包含"#",而后面紧跟元素的id或者name
(所以id和name必须一样,其实我试了有时name是不生效的)
2.锚点使用总结:
2.1. 建立锚点的元素必须要有id或name属性,最好两个都有
2.2. 锚点超链接一定包含井号"#",锚点超链接都在链接的最末端,具体看后面例子
2.3. 同一个页面不同部分的跳转,锚点的写法
目标元素:<p id="test"></p> 锚点超链接:<a href="#test"></a>
2.4. 不同页面跳转,同时存在锚点
目标元素:a.html页面的<div id="test"/> 锚点超链接:<a href="a.html#test"></a>
(先跳到a.html页面,然后再寻找id=test的元素)
2.5. 不同页面带参数跳转,同时存在锚点
目标元素:a.php?p=abc页面的<div id="test"/> 锚点超链接:<a href="a.php?p=abc#test"></a>
html锚链接的更多相关文章
- img,a,锚链接,超链接
1.图片标签:img,单标签 图片属性: src(source): 图片的来源(路径),可以放置本地图片,也可以放网上的图片的url地址 title: 当鼠标停留在图片上的时候,显示提示的文字 alt ...
- HTML<a>标签作为锚链接
1. 什么是锚链接? <a></a>标签主要作为超链接和锚链接使用.超链接主要指不同html页面之间的跳转,而锚链接指的是同一页面之间的跳转. 锚链接的两种效果: 在当前页面中 ...
- H5小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)
#作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...
- HTML学习笔记——锚链接、pre标签、实体
1>锚链接 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- themeleaf跳转锚链接
<a class="lianjie3" th:href="@{/}+'#requires'"></a>
- wampserver 下载链接没反应的解决办法
可能有很多小伙伴和我一样使用wampserver时,下载链接点击就是没有反应,当时我以为是因为网络原因,链接没有加载出来,或者是链接的请求不能得到响应,结果百度了一下才发现被“习惯”坑了一把,wamp ...
- css---3链接伪类与动态伪类
链接伪类link:表示作为超链接,并指向一个未访问的地址的所有锚 链接伪类不可以加在div上 <!DOCTYPE html> <html> <head> <m ...
- HTML的链接标签
网页的链接标签 文本超链接 图像超链接 格式:<a href="path" target="目标窗口位置" >链接文本或图像</a> 锚 ...
- ASP.NET Core 中文文档 第四章 MVC(3.6.2 )自定义标签辅助类(Tag Helpers)
原文:Authoring Tag Helpers 作者:Rick Anderson 翻译:张海龙(jiechen) 校对:许登洋(Seay) 示例代码查看与下载 从 Tag Helper 讲起 本篇教 ...
随机推荐
- Linux中假设系统丢失了ls命令
假设系统丢失了ls命令,如何修复: 1.查询ls命令属于那个rpm包[root@localhost ~]# rpm -qf /bin/lscoreutils-8.4-43.el6.x86_64 2.挂 ...
- centos7 mysql允许远程连接设置
Mysql为了安全性,在默认情况下用户只允许在本地登录,可是在有此情况下,还是需要使用用户进行远程连接,因此为了使其可以远程需要进行如下操作: 一.允许root用户在任何地方进行远程登录,并具有所有库 ...
- 网络的分层协议总结(转发:https://www.cnblogs.com/Zhang-wj/p/5907534.html)
网络的分层协议总结 OSI七层模型OSI 中的层 功能 TCP/IP ...
- 初识机器学习之kNN算法
k近邻(k-Nearest Neighbor,简称kNN)学习是一种常用的监督学习方法,其工作机制非常简单:给定测试样本,基于某种距离度量找出训练集中与其最靠近的k个训练样本.然后基于这k个“邻居”的 ...
- Java进阶学习:JSON解析利器JackSon
Java:JSON解析利器JackSon JackSon基础 1.Maven项目引入 <!-- https://mvnrepository.com/artifact/org.codehaus.j ...
- IOS int NSInteger NSNumber区分
1.NSNumber 是一个类继承于NSValue 即一个基本数据类型的集合 包括char a signed or unsigned char, short int, int, long int, l ...
- Html标签使用——文字、列表、表格、超链接
注:文章来源于传智播客毕向东老师使用课件和网络.整理学习如下: 一.Html内容 1. Html就是超文本标记语言的简写,是最基础的网页语言. 2. Html是通过标签来定义的语言,代码都是由 ...
- Data Structure Binary Tree: Diameter of a Binary Tree
http://www.geeksforgeeks.org/diameter-of-a-binary-tree/ #include <iostream> #include <vecto ...
- Java多线程系列 JUC线程池06 线程池原理解析(五)
ScheduledThreadPoolExecutor解析 ScheduledThreadPoolExecutor适用于延时执行,或者周期性执行的任务调度,ScheduledThreadPoolExe ...
- shell脚本默认变量值
脚本参数相关: $# 是传给脚本的参数个数 $ 是脚本本身的名字 $ 是传递给该shell脚本的第一个参数 $ 是传递给该shell脚本的第二个参数 $@ 是传给脚本的所有参数的列表 $* 是以一个单 ...