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行业企业需求最多的人才 结合最新的 ...
随机推荐
- Delphi Cookie获取及使用
以下方法为网上搜集整理,留做备份,随时更新 一:通过URL获取 CanGetIECookie(URL,g_cookie); function CanGetIECookie(const URL: ...
- CentOS中安装Java环境 jdk
一. 在CentOS中只需要先移除自带的OpenJava,再安装原生的Java SDK. <1> rpm -qa | grep jdk: 也就是query all npm 包,找 ...
- MVC4 Action 方法的执行
1. ActionInvoker 的执行: 在MVC 中 包括Model绑定与验证在内的整个Action的执行是通过一个名为ActionInvoker的组件来完成的. 它同样具有 同步/异步两个版本 ...
- VMware下拷过来的Linux系统ifconfig下没有网络问题
拷了同事的Linux系统,拷过来时还可以用,今天再打开发现找不到ip了,于是就在网上找解决方法,因本人从没接触过Linux所以查的挺多的但解决的方法试了好几个就是不行,后面找到的有效的解决方法有: L ...
- ASP.NET Core URL Rewrite中间件
URL重写是基于一个或多个预置规则修改请求URL的行为.URL重写在资源位置和访问地址之间创建了一种抽象,这样二者之间就减少了紧密的联系.URL重写有多种适用的场景: 临时或永久移动或替换服务器资源, ...
- jquery源码解析:type,isPlainObject,parseHTML,parseXML,globalEval详解
jQuery的工具方法,其实就是静态方法,源码里面就是通过extend方法,把这些工具方法添加给jQuery构造函数的. jQuery.extend({ ...... type: function( ...
- ORACLE中的KEEP()使用方法
转载至:http://blog.csdn.net/aqszhuaihuai/article/details/6434160 ====================================== ...
- iOS开发中UILocalNotification本地通知实现简单的提醒功能
这段时间项目要求做一个类似的闹钟提醒功能,对通知不太熟悉的我,决定先用到xcode自带的本地通知试试,最终成功的实现了功能,特整理分享下. 它的表现特点: app关闭的时候也能接收和显示通知. app ...
- celery简单理解和使用
解决同步阻塞的问题 将耗时任务放到后台异步执行,不影响用户其他操作. 实现原理 任务队列是一种跨线程,跨机器的机制. 任务队列中包含称作任务的工作单元.有专门的进程持续不断的监视任务队列,并从中得到新 ...
- 2016级算法第四次上机-D.AlvinZH的1021实验plus
978 AlvinZH的1021实验plus 思路 贪心,中等题. 使用miss变量表示未覆盖的最小数字,初始值为1. 初始覆盖区间为[1,miss),目标是覆盖[1,m],即miss需要大于m. 需 ...