html锚点(mao dian)--特殊的超链接
锚点(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锚点(mao dian)--特殊的超链接的更多相关文章
- img图像标签和超链接标签a
图像标签语法:<img src="" alt="".../> img属性:src="" 显示图像的URLalt="& ...
- html锚链接
锚点(anchor):其实就是超链接的一种,一种特殊的超链接 普通的超链接,<a href="路径"></a> 是跳转到不同的页面 而锚点,<a hr ...
- H5小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)
#作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...
- Jsp页面设计易忘点
文本标签: <b>文本加粗 <i>斜体 <u>下划线 <sub>作为下标 <sup>作为上标 样式: italic;斜体 text-deco ...
- 初始HTML
了解HTML 1.1 HTML的作用 HTML就是用来制作网页 1.2 什么是HTML HTML是英文HyperText Markup Language的首字母缩写,即超文本标 ...
- 网络安全攻击与防护--HTML学习
第一节. HTML基本语法(文末有对该文视频讲解) HTML的官方介绍什么的我就不说了,打字也挺累的,只简单介绍一下吧,其他的懂不懂都没关系. HTML全称为Hypertext Markup Lang ...
- Markdown
1. 斜体和粗体 代码: *斜体*或_斜体_ **粗体** ***加粗斜体*** ~~删除线~~ 显示效果: 这是一段斜体 这是一段粗体 这是一段加粗斜体 这是一段删除线 2. 分级标题 第一种写法: ...
- MarkDown常用语法记录
目录 1. 斜体和粗体 2. 分级标题 3. 超链接 3.1 行内式(推荐) 3.2 行外式 3.3 自动链接 4. 锚点 5. 列表 5.1无序列表 5.2有序列表 6. 引用 7. 插入图像 8. ...
- DIV+CSS系统学习:转载
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
随机推荐
- robot中使用evaluate转化数据格式
如果你使用robot却没有用过evaluate,那你将永远禁锢在框架中. json对象格式入参可以使用字典格式直接传入,但最近有一个接口测试的入参是一个json数组,在传参时总是提示请求参数不合法, ...
- /Date(1512551901709+0800)/转换
var convertDT=function(dt) { dt.replace(/Date\([\d+]+\)/, function (a) { eval('d = new ' + a) }); al ...
- day03.2-内置函数的使用
1. 取绝对值函数,abs() res = abs(-1) print(res) """ 运行结果:1 结果分析:计算-1的绝对值 """ ...
- 接口测试:添加cookie以及身份验证
添加cookie以及身份验证的接口文档: cookie:存放在本地的一个键值对 session:存放在服务端的一个键值对 学生金币充值接口文档: 一.使用postman进行测试 由于进行学生金币充值操 ...
- CentOS 6.5 BCM43142 80211无线网卡驱动安装
https://blog.csdn.net/lisonglisonglisong/article/details/74859545 https://blog.csdn.net/shile/articl ...
- json与xml简介
<1>. json : JavaScript 对象表示法(JavaScript Object Notation) 语法: 数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 ...
- mysql 代价
mysql cbo cost base optimizer 基于代价,数据是一直变化的oracle8 以前是rbo rule base optimizer 基于规则, 如果sql使用了索引,必须使用索 ...
- 条目二十六《iterator优先于const_iterator、reverse_iterator以及const_reverse_iterator》
条目二十六<iterator优先于const_iterator.reverse_iterator以及const_reverse_iterator> 这几个东西不是类型来的,而是不同的类,所 ...
- Linux rsync 企业级应用
简介 rsync 是 Linux 下的数据同步工具, 其支持本地同步和远程同步, 远程同步分为 daemon 和 ssh 同步方式 rsync 可以代替 cp, scp 等命令, 且具有更高的可 ...
- Oracle PL/SQL学习之Hello World(0)
1.PL/SQL是Oracle数据库的一大创举,让一些复杂繁琐的常规主流编程代码做的编码处理过程,只需要在PL/SQL中使用简短的几句代码就可以解决,并且准确高效.那么遵循惯例,我们学习PL/SQL编 ...