HTML 中的锚点

HTML 锚标记是 HTML 中最重要的元素之一，用于在网站之间导航、从一个页面移动到另一个页面、单击鼠标打开某种图像或文本。它用于定义所包含超链接的开头和结尾。大多数情况下，搜索引擎使用它来定义目标 URL。它内容丰富，并且与登陆页面更相关。

这些链接在不同的场景中代表不同的含义，例如

• 带下划线且红色的链接表示活动链接
• 带下划线且紫色的链接表示已访问过的链接。
• 带有下划线和蓝色的链接表示未访问的链接。

语法：

让我们看看定义 的实际语法标签。

<a href="Link_URL">Link Home</a>

如上所示，语法;包含主要部分链接的标签，定义如下：

1。 href 属性

该属性用于定义超链接，其中的目标地址大家可能很熟悉。超链接充当网页文档和目标链接之间的连接器。

• 也可以是其他网站、图像或文件。 Href是超文本引用的缩写，用于定义我们需要的目的地址。 ‘=’符号用于定义属性与其连接值的连接。
• 在上面的语法中，href 被视为一个属性，其中之间的链接称为它的值。放置在 标签之间的值是锚文本或链接。哪个能够看到或点击用户
• 示例：印度时报

  2. 名称属性

中的name属性标签用于转到页面的特定点。

• It’s most useful for defining large pages or to define subdivisions.
• Example:Homepage So in this example we are adding #tag at the anchor name. it’s helpful to the browser to find or jump to the defined location like home. #name can be placed after the filename.

  3. Target attribute

• The target attribute is used to define the destination page or the defined target page may be opened.
• It’s used as a common option that is used by target attributes to link with other pages.
• If the target attribute defines with a blank value like “target=_blank” then it will open a new tab at the target location.

4. Title Attribute

• The title attribute is one of the important attributes used to give special attention where one can easily move when they click the link.
• If the user moves the mouse pointer onto the link reference, the title text which was given into the attribute point will be shown there.
• It works like a tooltip or details where the link will navigate. This approach makes webpages or documents more user-friendly.

Working of Anchor in HTML

• There are two scenarios through which we can anchor tags like Internal link and External link.
• Internal links are those which are showing entities that are other pages of our domain, where external links are used to show web pages that don’t consider as a part of our domain.
• Let’s see how anchor tag exactly works with both links. Internal links work as a navigator between websites to show navigation menus which are useful to everyone who visits the website can easily navigate on the required menu. As discussed above in the title attribute, internal links are useful to navigate on specific content.
• Those are also used by search engine web crawlers to exactly define the pages of a website as well as for sharing authority purposes.
• External links play an important role in tag, it’s always best practice to provide exact attribution to the source. It is useful for related content, which can show us for referring website visitors.
• Sometimes other sites upload some kind of external links, which are going to point towards our website is considered as backlinks, those give permission to flow into our site which is beneficial to improve the position of our site at SERP. (Search Engine Result Page).
• One more good thing to keep our visitors on our site for a longer time, by using target=”_blank” while writing external links, which will open a new tab.
• The text we are going to use as an Ideal anchor text identifies keywords, which are more suitable to the web page.
• Working with anchor by using Absolute and Relative By using absolute URL one can see the whole description of the destination link. It contains protocol which helps to complete domain name to reach the destination.
• Relative URL used to link given web pages showing the exact position of the relative towards the position of the current page.
• Whenever internal links are written, which are showing other pages of the same site in this case we are going to write relative URLs.

Examples

Here we are going to show some examples having use of actual tag.

1. HTML code

<h4>Examples for Anchor in HTML </h4>
<a href="https://timesofindia.indiatimes.com/">Latest News </a><br><br>
<a href="HTMLcolor.html">Navigate on other File</a><br>

Output:
 

On clicking the latest news, the output is :

 By clicking on the link “Navigate on other File” it will show another webpage as:

2. HTML Code

<h2>Reach to EDUCBA </h2>
<ul>
<li><a href="https://www.educba.com/">Website</a></li>
<li><a href="mailto:[email&#160;protected]">Email US</a></li>
<li><a href="tel:+123456789">Phone</a></li>
</ul>

 Output :

The output shows some links, and that those links are in blue they are unvisited, the link showing in purple has visited the link and this is used to show the difference in links.

3. HTML Code

<h4>Image and File Demo</h4>
<p><a href="C:\Users\\Sonali\Desktop\jerry.jpeg">Image Demo</a> It will
open image</p>
<a href="./generate-zip?id=4" download="assets.zip">Download File</a>

Output :

While clicking on image demo it will open the image as:

 While clicking on another link it will download the file as :

结论 - HTML 中的锚点

HTML 中的锚标记用于定义直接导航到目标位置的链接。它基于 hre 属性、name 属性、target 属性等主要组件。标签用于内部和外部链接以及绝对和相对 URL。

以上是HTML 中的锚点的详细内容。更多信息请关注PHP中文网其他相关文章！