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 讲起 本篇教 ...
随机推荐
- 程序运行之ELF文件结构
ELF目标文件格式的最前部是ELF文件头.包含了整个文件的基本属性.比如ELF文件版本,目标机器型号,程序入口地址等.然后是ELF的各个段,其中ELF文件中与段有关的重要结构就是段表.段表描述了ELF ...
- SAP ATP邏輯可用性檢查
[转http://tqmeng.blog.163.com/blog/static/169263916201162002414612/]SAP ATP邏輯可用性檢查1.可用性檢查群組OVZ2主要用於檢查 ...
- 图片oom问题
1.什么是OOM? 程序申请内存过大,虚拟机无法满足我们,然后自杀了.这个现象通常出现在大图片的APP开发,或者需要用到很多图片的时候.通俗来讲就是我们的APP需要申请一块内存来存放图片的时候,系统认 ...
- xutils3文件上传、下载、get、post请求
@ContentView(R.layout.activity_xutils3_net) public class XUtils3NetActivity extends Activity { @View ...
- php输入输出
php是服务器脚本语言,js是客户端脚本语言 php用表单接收数据,echo 输出数据,$定义变量. <?php echo $_POST["sub"]; // POST后是表 ...
- 每天一个Linux命令(21)find命令_xargs参数
xargs 与 exec 的作用类似,但是xargs与find 一起使用时,一般配合管道一起使用. 前面的输出转换为后方指令的参数输入,使用exec和xargs可以使用户对所匹配到的文件执行几乎所有的 ...
- Python 3 mysql 表操作
Python 3 mysql 表操作 表相当于文件,表中的一条记录就相当于文件的一行内容,不同的是,表中的一条记录有对应的标题,称为表的字段 id,name,qq,age称为字段,其余的,一行内容称为 ...
- 20165101刘天野 2018-2019-2《网络对抗技术》Exp7 网络欺诈防范
目录 20165101刘天野 2018-2019-2<网络对抗技术>Exp7 网络欺诈防范 1.实验内容 1.1 简单应用SET工具建立冒名网站 1.2 ettercap DNS spoo ...
- SrpingCloud 之SrpingCloud config分布式配置中心
Config架构 当一个系统中的配置文件发生改变的时候,我们需要重新启动该服务,才能使得新的配置文件生效,spring cloud config可以实现微服务中的所有系统的配置文件的统一管理,而且还可 ...
- java深入探究05
通讯录小程序 需求说明: 功能: 添加联系人 修改联系人 删除联系人 查询所有联系人 要求: console控制 数据保存在xml 1.创建联系人类 /** * 联系人实体对象 * @author A ...