锚点链接_锚链接

锚点链接

An anchor is a named point in a page, invisible to the viewer, embedded in code. By using an <a> link you can navigate to not only a specific page, but also a specific location on that page. This is particularly useful when you have very long pages, and want to give the user the ability to navigate to a specific section (for example, in a long article or essay written on a single page).

锚点是页面中的一个命名点,对于查看器是不可见的,嵌入在代码中。 通过使用<a>链接,您不仅可以导航到特定页面,而且可以导航到该页面上的特定位置。 当您的页面很长,并且希望使用户能够导航到特定部分时(例如,在长篇文章或写在单个页面上的文章中),此功能特别有用。

First, you need to create an anchor point. This is achieved by adding an id attribute to the tag nearest the point your want to jump to: usually, but not exclusively, a heading element. Note that the id attribute value must be unique to that page. For example, a heading element with an id of introduction:

首先,您需要创建一个锚点。 这是通过在标签上添加一个id属性来实现的,该属性最靠近您要跳转到的点:通常但并非唯一地是heading元素。 请注意, id属性值对于该页面必须是唯一的 。 例如,具有标题元素idintroduction

<h1 id="introduction" >Introduction</h1>

While almost any tag may be given an id attribute (and doing so becomes very useful for both CSS and JavaScript), no other element on this page can have an id value of introduction.

虽然几乎所有的标签,可给予一个id属性(和这样成为两个非常有用的CSSJavaScript的 ),此页面上没有其他元素可以有一个id值的introduction

Then you need to create a link to this location. Using a standard link tag, write a link to the id attribute value you just created, with a # sign in front of it:

然后,您需要创建一个指向该位置的链接。 使用标准链接标记,将指向您刚创建的id属性值的链接写在其前面,并带有#号:

<a href="#introduction">Go to the introduction</a>

Note that you will need plenty of space between the link and the anchor in order to see the page move when you click on this link. The easiest and most forthright method is to enter some filler filler text between the link and its destination.

请注意,在链接和锚点之间需要足够的空间,以便在单击此链接时看到页面移动。 最简单,最直接的方法是在链接与其目标之间输入一些填充文本

Assuming that the anchor was on a page called manual.html and you were linking from another page to the specific location of important_info in manual.html the link would be:

假设锚点位于一个名为manual.html的页面上,并且您是从另一个页面链接至manual.html中important_info的特定位置,则链接为:

<a href="manual.html#important_info">Read this information first<a>

注意事项: (A few things to note:)

  • The value of an anchor id can be anything you wish, so long as it follows web naming conventions and is unique to that page.

    id的值可以是您想要的任何值,只要它遵循Web命名约定并且对于该页面是唯一的即可。

  • When you reference the anchor, the reference must be preceded by a hash ("#") character, even though the character is not part of the original name.

    当您引用锚点时,引用必须在前面加上一个井号(“ ”),即使该字符不是原始名称的一部分。

翻译自: https://thenewcode.com/202/Anchor-Links

锚点链接

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值