HTML中锚点的使用

最新推荐文章于 2022-12-23 22:28:18 发布
最新推荐文章于 2022-12-23 22:28:18 发布
阅读量665 收藏
点赞数
分类专栏： HTML/CSS

版权声明：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载时请标注http://blog.csdn.net/marksinoberg.

  • 说到锚点，我们也许会需要稍微的思考一下，什么是锚点？

官方的答案是这样的： 
这里写图片描述

  • 那么你可能就会有下面的疑问，锚点能做什么啊？

回答就是，锚点可以理解为一个标记，一个用于而且便于寻找的标记。常用于网页制作的超链接表示中。

  • 还有就是怎么在实际的开发中使用锚点呢？

下面先看一个简单的代码展示吧，为了演示出实际浏览网页时对一个超长网页的模拟，我故意添加了一些段落。：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>锚点的使用</title>
    </head>

    <body>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <a name="anchor1">这里是锚点1</a>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <a name="anchor2">这里是锚点2</a>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <a name="anchor3">这里是锚点3</a>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
        <p>此处是一个段落</p>
    </body>

</html>
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64

   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64

  • 接下来就是在实际中对锚点的测试了。测试的方法是在超链接的后面跟上”#anchor_idNumber“.井号后面的字母就是我们设计好的锚点的name值。如：http://127.0.0.1:8020/CSS_Study/anchor.html#anchor3

  • 结果如下： 
    这里写图片描述 
    我们可以发现，网页直接就跳到了我们想要进行访问的锚点的定义的位置。因此我们的关于锚点的测试便成功的完成了。


补充:也可以在当前页面中,设置a标签,将href属性的值设置Wie"#AnchorName" 来通过点击当前链接跳转到锚点位置(比如完成"到底部","回顶部"等功能)

马大头
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在html中什么叫锚点,html中的锚点介绍和使用
weixin_33696476的博客
06-17 3121
以下资料整理自网路1.锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。英文名：anchor使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。示例代码在HTML...
html中锚点的应用
09-28
总结一下，HTML锚点的应用主要包括： 1. 使用`<a name="id"></a>`设置页面定位点。 2. 使用`<a href="#id">`创建在同一页面内的跳转链接。 3. 使用`<a href="page.htm#id">`创建在不同页面间的跳转链接。 4. 使用`...
html 锚点使用
菜鸟吴de博客
09-29 126
html 锚点使用
html中锚点的使用
漫无目的猿猿的博客
11-15 412
html中锚点用来在页面中做个标记（mark），可以跳转到对应的标记处。当一个页面很长的时候可以根据html的主题在html中做标记（锚点）。 如何使用锚点呢？ 1、做标记 2、触发标记 做标记 通过给你个html 标签加name 和 id。 <a name="001" id="001" ></a> 触发标记 通过 a 标签进行触发 href的值要跟name ...
html5中锚点使用,html5 – 在Ember.js中使用HTML锚点
weixin_33007509的博客
06-15 67
使用jquery滚动到特定部分.$('html,body').animate({scrollTop: $("a[name='someAnchor']").offset().top});在渲染视图后滚动到锚点会覆盖路径视图定义中的didInsertElement.App.LonglistView = Ember.View.extend({didInsertElement: function() {/...
Html中锚点的使用
qq_40179479的博客
12-23 4625
URL是由多个部分组成。包括协议、主机（域名）、端口、路径、查询参数和锚点锚点（anchor）是网页内部的定位点，使用#加上锚点名称，放在网址的最后，比如#anchor。浏览器加载页面以后，会自动滚动到锚点所在的位置。锚点名称通过网页元素的id属性命名。id属性是元素在网页内的唯一标识符。比如，网页可能包含多个标签，id属性可以指定每个标签的唯一标识符。
html锚点使用,html 锚点使用
weixin_36156209的博客
06-16 241
Linking Within A Web PageContentsSection ⅠThis is the first section. dfdffdfdfdfdfdfdfdfdfdfdfdfdfdfdfasdfdsffadsfdasfdafdsfadsfdsfdsafdsfadsfdsfdsafdfasdfdddddddddddddddddddddddddddddddddddddddddddff...
HTML锚点的使用
皮一下很开心的猴头
07-30 1446
一、页面内跳转的锚点设置         页面内的跳转需要两步：         方法一：         ①：设置一个锚点链接&lt;a href="#miao"&gt;去找喵星人&lt;/a&gt;；（注意：href属性的属性值最前面要加#）         ②：在页面中需要的位置设置锚点&lt;a name="miao"&gt;&lt;/a&gt;；（注意：a标签中要写一个name属...
HTML中锚点的使用方法
刘鹏博的博客
11-12 6056
在写项目的时候，页面比较长，这时候需要设置锚点进行快速定位到某个段落。所以，在使用中总结了几种常用锚点的例子分享给大家。在HTML中设置锚点常用的有三种方式。 方式一：使用name 代码如下: 这里是顶部 中间内容省略... Top 使用name属性设置锚点很方便但只能针对a标签来使用，具有一定的局限性。而对div等其他没有name属性的标签
html锚点的使用,html 锚点的使用
weixin_39990660的博客
06-18 151
html 锚点到底是干吗的？通俗简单地说，比如一篇很长的文章，你想按分段精确来看，那就可以用到锚点了。代码：跳到001…文字省略…文字省略其实锚点只需name就可以可，加id是为了让它兼容性更好.href的值要跟name\i d一致，前面必须加"#"，以上代码在ie6/7,ff中都可以兼容，但在ie8中就不行。因为我们锚点的值为空，为不影响美观我们加个空格就行了,如以下代码，就可以兼容ie...
HTML中锚点的使用_动力节点Java学院整理
09-28
什么是HTML锚点，锚点应该如何用？这篇文章主要为大家详细介绍了HTML中锚点的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html 网页中的锚点(命名锚记)的使用介绍
09-28
总之，HTML锚点是一个强大的工具，能够帮助我们构建更加用户友好的网页。通过合理使用锚点，可以让用户在浏览长页面时更加方便，也可以在多个页面之间实现精准导航。了解并熟练掌握锚点的使用，对于提升网页设计和...
pi_heif-0.17.0-pp310-pypy310_pp73-macosx_12_0_x86_64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
mmexport1722080103662.jpg
07-27
mmexport1722080103662.jpg
matlab 20244a 6
07-27
matlab 20244a 6
pi_heif-0.17.0-cp310-cp310-macosx_12_0_x86_64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
pillow-10.4.0-cp312-cp312-musllinux_1_2_aarch64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
生产管理体系设计全案.pptx
07-27
生产管理体系设计全案.pptx
HTML入门：锚点链接详解与使用
在HTML中，锚点链接允许在同一网页的不同部分或不同网页之间跳转。要实现锚点链接，首先需要定义锚点，使用`“锚点名称”>`，其中“锚点名称”是自定义的标识符。接着，定义链接到这个锚点的链接，使用`锚点名称">...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值