锚记的代码

说到主播,我当然有这方面的经验。
过去当我建立网站时,我必须做大量的研究,以便用户可以快速找到页面的特定部分,例如产品介绍或文章的特定章节。

记得有一次,我在优化一个电商网站的详情页。
为了让用户直接跳转到产品规格,我使用了锚标签。
这时就使用了HTML4 标准,即使用name属性来设置锚点。
编写方法如下:规格参数。

有趣的是,随着HTML5 随后的流行,我发现id属性被推荐取代name属性。
原因主要是因为ID属性在HTML和CSS中比较常用,并且具有更好的兼容性。
我亲自测试了一下,使用ID属性来设置锚点。
写法为:规格参数。

然后你需要在链接上使用href属性来指向这个锚点。
该链接可能如下所示:直接查看规格。
用户点击该链接后,页面平滑滚动到规范锚点位置。

说起来:当时我还是挺自豪的,觉得自己在这方面取得了一些小成绩。
然而归根结底,这些技术都是为了提供更好的用户体验,让用户更容易在复杂的页面上快速找到自己想要的信息。
现在想想,这就是互联网时代的一个小缩影。

html中设置锚点定位的几种常见方法

说白了,网页中的锚点定位其实很简单。
首先,您可以向目标元素添加唯一 ID,然后使用它来定位目标元素,以便单击链接即可到达该元素。
比如我们去年做的项目,我们有近3 000个锚点定位,效果非常好。

我们先来说最重要的,方法一,像这样:

练习


还有一点,方法二,是在a标签上添加锚点进行定位,但是这种方法只能针对a标签,对其他标签无效。
例如:

xxx

xxx

Exercise
我最初以为方法2 可以用于任何标签,但后来发现这是错误的。
这仅适用于 a 标签。
等等,还有一件事,你可以使用 JavaScript 来实现更复杂的锚点定位,比如滚动到指定元素的位置。
用行话来说,这称为雪崩效应。
事实上,前面的一点延迟就会把整个后面搞乱,但这种情况可以通过 JavaScript 来避免。

最后,我认为这些方法值得尝试,但要注意不要过度使用锚点定位,否则会让页面变得杂乱。
很多人没有注意到这一点,但我认为这是非常重要的。

HTML页面内部锚点链接的正确使用指南

上周,当我做一个网络项目时,我遇到了锚链接的问题。
我发现在现代网页设计中使用锚链接的正确方法是通过附加到属性元素的 URL 标识符片段 ()。
例如你可以写:
跳转到第一部分 然后仅将其放入目标元素中:

第 1 部分:简介


这样,点击链接就会跳转到相应的部分。

2 02 3 年我发现了一个新技巧,就是如果需要使用旧版本的浏览器,可以将name和id属性都放在标签中,并确保两个值一致:

我的一个朋友用这个方法来解决保存旧项目时的兼容性问题。

这取决于你。
如果想了解更多细节,可以查看相关文档或者教程。