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行业企业需求最多的人才 结合最新的 ...
随机推荐
- Apache启动报错Address already in use: make_sock: could not bind to...
Apache启动时报错:(98)Address already in use: make_sock: could not bind to... # /etc/init.d/httpd start St ...
- 爬虫开发3.requests模块
requests模块 - 基于如下5点展开requests模块的学习 什么是requests模块 requests模块是python中原生的基于网络请求的模块,其主要作用是用来模拟浏览器发起请求.功能 ...
- random 随机生成字符串
# import random# for x in range(10):# i = 0# l = []# while i < 10:# ret = chr(random.randint(33, ...
- [AIR] AS3读取txt文档
package { import flash.display.Sprite; import flash.events.Event; import flash.filesystem.File; impo ...
- [AIR] 检测移动设备运动
Accelerometer 类根据由设备的运动传感器检测的活动调度事件.此数据表示设备的位置或沿三维轴的移动.当设备移动时,传感器会检测到此移动并返回加速数据.Accelerometer 类提供了各种 ...
- linux awk 文本分析实例 [视频]
实例: 点我打开哔哩哔哩 实战: 点我打开哔哩哔哩 以下是一个分享: ➜ log Time Now 16:23:35 > awk '/Installed/' yum.log* | awk -F ...
- jupyter notebook 的安装及使用
推荐使用Python3 版本 安装pip3 版本 打开终端输入,安装jupyter notebook(ipython4之后命名) pip3 install jupyter notebook 启动jup ...
- fdisk 和 parted 分区工具
fdisk 和 parted: fdisk 是用来对 Linux 下的 MBR 分区进行操作的一款分区工具, 由于 MBR 的设计缺陷导致 MBR 不能处理大于 2TB 的硬盘, 并且主分区个数不能超 ...
- OpenFire 安装及配置
下载 添加的属性为:EXE4J_JAVA_HOME,其属性的值为32位的JDK的所在位置. 2,openfire的启动路径中不能含有中文,好多java写的都是这个样. 3,如果安装的了 Jav ...
- C#-WinForm-★★★★★跨窗体 构造函数传值 及应用—登录式窗口传值、如何关闭主页面时关闭应用程序、如何打开唯一窗口★★★★★
构造函数可以传任意类型的值,并可以同时传多个值 结构函数传值的初步应用——简单的登陆式界面 现在我有两个窗体Form3和Form4,如下,如何点击Form3中的按钮后,打开Form4并将Form3中的 ...