HTML锚点的id属性和name属性

很简单的知识点,一看就知道怎么用。
很早以前了,初学HTML的时候就看到的锚点这个功能,但是一直没有使用过,最近在给公司做官网的时候用到了锚点,顺手记录一下。

// a.html
<a href="#one">点击跳转到第一个锚点</a>
<a href="b.html#two">点击跳转到第二个锚点</a>
// a.html
<div id="one">第一个锚点</div>
// b.html
<a name="two">第二个锚点</a>

如同上面代码所示,要在网页上实现锚点效果,需要具有两个要素:

  • 需要有一个锚点,这个锚点就是我们要跳转到的位置。一般情况下,我们会在目标节点上添加id属性或者name属性,这个id或者name属性的值就是我们寻找锚点的依据,推荐使用id属性来标记锚点(因为id能够在各种标签上使用,name属性标记锚点时只能用在a标签上)。
  • 需要一个触发锚点跳转的a标签。a标签一般用作定义超链接,用作超链接时它的href属性的值是另一个页面的URL。a标签用作锚点时,href的值是锚点的id值或者name值。
  • 同一页面内的锚点跳转时,给href赋值# + 锚点id的值或者# + 锚点name的值,需要跳转其他页面的锚点位置时,需要在#前面加上跳转的路径,例如:href="b.html#two"
  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值