目录
1。 href 属性
  2. 名称属性
  3. Target attribute
4. Title Attribute
Working of Anchor in HTML
1. HTML code
结论 - HTML 中的锚点
首页 web前端 html教程 HTML 中的锚点

HTML 中的锚点

Sep 04, 2024 pm 04:38 PM
html html5 HTML Tutorial HTML Properties HTML tags

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

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

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

语法:

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

<a href="Link_URL">Link Home</a>
登录后复制

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

HTML 中的锚点

1。 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

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:
 HTML 中的锚点

On clicking the latest news, the output is :HTML 中的锚点

 By clicking on the link Navigate on other File” it will show another webpage as:
HTML 中的锚点

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 :

HTML 中的锚点

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 :

HTML 中的锚点

While clicking on image demo it will open the image as:HTML 中的锚点

 While clicking on another link it will download the file as :HTML 中的锚点

结论 - HTML 中的锚点

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

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

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

HTML 表格边框指南。在这里,我们以 HTML 中的表格边框为例,讨论定义表格边框的多种方法。

HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

这是 HTML 中嵌套表的指南。这里我们讨论如何在表中创建表以及相应的示例。

HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

HTML 左边距指南。在这里,我们讨论 HTML margin-left 的简要概述及其示例及其代码实现。

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局指南。在这里,我们详细讨论 HTML 表格布局的值以及示例和输出。

HTML 输入占位符 HTML 输入占位符 Sep 04, 2024 pm 04:54 PM

HTML 输入占位符指南。在这里,我们讨论 HTML 输入占位符的示例以及代码和输出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在这里我们还分别讨论了 HTML 有序列表和类型的介绍以及它们的示例

HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

HTML onclick 按钮指南。这里我们分别讨论它们的介绍、工作原理、示例以及各个事件中的onclick事件。

在 HTML 中移动文本 在 HTML 中移动文本 Sep 04, 2024 pm 04:45 PM

HTML 中的文本移动指南。在这里我们讨论一下marquee标签如何使用语法和实现示例。

See all articles