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行业企业需求最多的人才 结合最新的 ...
随机推荐
- 20145233《网络对抗》Exp7 DNS网络欺诈技术防范
20145233<网络对抗>Exp7 DNS网络欺诈技术防范 实验问题思考 通常在什么场景下容易受到DNS spoof攻击 公共的无线局域网中,容易受到攻击者的攻击,因为这样就会连入局域网 ...
- Replication--使用备份初始化订阅--推送订阅
1. 修改发布属性"许从备份文件初始化"置为TRUE2. 备份数据库并在订阅服务器上还原3. 创建订阅 -------------------------------------- ...
- 转载C#中Trim()、TrimStart()、TrimEnd()的用法
C#中Trim().TrimStart().TrimEnd()的用法: 这三个方法用于删除字符串头尾出现的某些字符.Trim()删除字符串头部及尾部出现的空格,删除的过程为从外到内,直到碰到一个 ...
- [NOI2010]能量采集(莫比乌斯反演)
题面: bzoj luogu NOI2010能量采集 题解 读完题之后我们发现在每个产生贡献的点\((x1,y1)\)中,它与原点之间的点\((x2,y2)\)都满足\(x2|x1\),\(y2|y1 ...
- link和@import的区别是什么 ?
1.link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务:@import属于CSS范畴,只能加载CSS. 2.link引入CSS是,在页面载入时间同时加载:@import页面网页完全 ...
- [Maven实战-许晓斌]-[第二章]-2.2基于UNIX系统安装maven
>> >> >>3
- dbproxy-id生成器
id生成器使用的是snowflake, 需要执行 snowflake_init(region_id, worker_id); 而region_id和worker_id是在配置文件中配置的 networ ...
- java学习笔记_多态
多态:父类的变量可以引用子类的对象 引用: Student s1 = stu; s1.setScore(200); 1.一个对象可以有多个引用,可以有多个变量操作同一个对象 2.当一个对象没有任何 ...
- WPF捕获全局未处理异常
在WPF开发过程中我们一般都用try/catch块来捕获异常,但不是每个异常我们都能捕获,程序总会出现一些意想不到情况,抛出一些未捕获的异常,这时就要用到全局异常捕获,即在程序的最外层加上捕获未处理异 ...
- Shell基本知识
Shell是什么 Shell是一个命令行解释器,它为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序,用户可以使用Shell来启动.挂起.停止甚至编写一些程序. Shell还是一个功 ...