您现在的位置是:首页 > Javascript
当前栏目
HTML网页中的锚(书签)链接
2023-03-07 09:50:40 时间
如果网页中的内容过多,会使得网页变长,在浏览网页的时候,就需要不停的拖拽网页非常的麻烦。而如果我们要在一个内容多的长网页中寻找一部份需要的内容,那显得更加的麻烦和繁琐。当然针对这种情况,HTML标记语言方给我们提供了一个很好的解决方法——HTML中的锚(书签)链接。
要建立一个锚(书签)链接,需要两个步骤。首页要建立锚点也就是书签,二是为锚点(书签)建立超链接
建立锚点(书签)
要想实现网页内容的引导和跳转,首先需要在跳转到的内容里加入一个锚点,也就是书签。这里我们可以把锚点(书签)当然一本书中你所要查找的内容页的页码。
语法:
复制
<a name="锚点的名称"></a>
解释:上面语法中的“锚点的名称”也就是你所建立的锚点的一个代号,就像书本中每一页中的页码一样,可以很方便的通过它查找你所需要的内容。
实例代码:
复制
<a name="mochu">这里可以是链接到的内容</a>
建立超链接
在一本书中是少不了目录的,我们可以通过目录很方便的查找到目录所指示的内容。锚链接也一样,我们要为它建立的锚点加入一个超链接才能实现页面内容的跳转。
语法:
复制
<!--同一页面-->
<a href="#链接的锚点名称">链接文字</a>
<!--不同页面-->
<a href="页面的URL#链接的锚点名称">链接文字</a>
例子:
复制
<!--同一页面-->
<a href="#mochu">链接文字</a>
<!--不同页面-->
<a href="http:ymkuz.com.com#mochu">链接文字</a>
注意:在为锚点(书签)创建的链接中的锚点(书签)名的前面一定要加入“#”符号,那样浏览器才会认为这是一个锚点的链接,否则会出现错误
相关文章
- 鲜为人知但很有用的 HTML 属性
- 翻转再翻转!有意思的水平横向溢出滚动
- 自定义计数器小技巧!CSS 实现长按点赞累加动画
- 过五关!React高频面试题指南
- 软件开发中的十个认知偏差
- 不需要 JS!仅用 CSS 也能达到监听页面滚动的效果!
- 一文读懂TypeScript类型兼容性
- Vue 的响应式原则与双向数据绑定
- 快速掌握 TypeScript 新语法:Infer Extends
- JWT教你如何证明你是我的人!
- 一篇带给你 V8 GC 的实现
- 面试官:请使用JS完成一个LRU缓存?
- 通过可视化来学习JavaScript事件循环
- 新的跨域策略:使用 COOP、COEP 为浏览器创建更安全的环境
- 为什么有人说 vite 快,有人却说 vite 慢?
- 种草 Vue3 中几个好玩的插件和配置
- 超全面的前端工程化配置指南
- Vue 状态管理未来样子
- Volatile关键字能保证原子性么?
- 面试突击:SpringBoot 有几种读取配置文件的方法?