HTML 锚点


2022年1月7日, 学习 eTutorial
2016

在这个 HTML 教程中,你将学习所有关于 HTML 中的锚点。我们还将讨论 HTML 中锚点标签的不同用法。

HTML 中的锚点标签是什么?

链接,通常称为超链接,是一种将一个网络资源连接到另一个网络资源的链接。用户可以通过链接从世界任何服务器上的一个网页导航到另一个网页。一个连接有两个端点,称为锚点。链接始于源锚点,止于目标锚点,目标锚点可以是图像、音频或视频剪辑、PDF 文件、HTML 页面或文档本身内的元素等。

在大多数浏览器中,链接默认显示如下:

  • 未访问的链接以蓝色突出显示。
  • 已访问的链接以紫色突出显示并带有下划线。
  • 活动链接以红色突出显示。

语法

在 HTML 中,链接使用 <a> 标签指定。链接或超链接可以是一个单词、一组单词或一个图像。用户在浏览器中看到并点击的链接部分始终在开始 <a> 标签和结束 </a> 标签之间。


<a href="url">Link text</a>
 

锚点标签示例


<a href="https://www.google.com/">Google Search</a>
<a href="https://www.learnetutorials.com/"> Learn E Tutorials </a>
<a href="images/smile.jpg">
    <img src="smile.jpg" alt="kites">
</a>
 

如何设置锚点标签的目标?

target 属性指示浏览器引用的内容的位置。有四种不同的目标,每种目标都有自己的名称,以一个下划线 (_) 字符开头。

  • _blank    — 此命令在新窗口或新标签页中打开引用的文档。
  • _parent  — 此命令在父窗口中显示链接的文档。
  • _self       — 在与原始文档相同的窗口或标签页中显示链接的文档。由于这是默认设置,因此无需显式提及。
  • _top        — 在浏览器窗口中完整显示链接的文档。

锚点标签示例


<a href="/about-us.php" target="_top">About Us</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
    <img src="sky-thumb.jpg" alt="Cloudy Sky">
</a>
 

如何创建书签锚点?

你还可以使用书签锚点将用户引导到当前网页的特定区域。如果你有一个很长的网站,书签会非常有用。使用锚点标签创建书签只需两个步骤:将 id 属性添加到你希望跳转到的元素,然后使用 <a> 标签的 href 属性的值。

锚点标签示例


<a href="#sectionA">Jump to Section A</a>
<h2 id="sectionA">Section A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
 

最常用的锚点标签属性

属性 描述
charset charset 指定引用资源的字符编码。
cords x,y 坐标 指定链接在屏幕上的位置。
download 文件名 当用户点击链接时,此属性指定是下载相关资源而不是跳转到它。
href URL 指定目标文档或在线资源(如图像、PDF 或任何其他媒体文件)的位置。
hreflang 语言代码 指定引用文档的语言。此属性只能在给定 href 属性时使用。
media 媒体查询 指定创建链接资源所针对的媒体类型。
name text 指定锚点的名称。请改用全局属性 id。
rel 备用 作者 书签 帮助 许可证 下一个 nofollow noreferrer prefetch 上一个 搜索 标签 描述超链接文档与引用资源之间的连接。仅当 href 属性存在时才使用此属性。
rev rev 描述链接文档与原始文档的连接(与 rel 属性相反)。
shape 矩形 圆形 多边形 默认 指定热点区域(即超链接的可选择区域)的形状。
target _blank _parent _self _top 框架名称 定义将用于打开 href 属性中提供的链接资源的目标。
type content-type 指定连接内容的 MIME 类型,例如“image/jpeg”、“text/html”等。