HTML 文本链接

HTML 链接可以是链接或超链接。这会重定向到另一个页面、图像或网站；它可以是任何东西。它们还用于在同一页面上导航特定部分。他们过去只需通过单击即可呈现数据和文档。我们将文档、图像、网址或数据包装在文本中。根据要求，它还可以指向文件、对象或同一页面或不同页面上的任何内容。当我们将鼠标悬停在 HTML 链接上时，它会将光标更改为其他图标。我们可以在文章的下一部分中讨论它们的工作原理以及如何创建它们。在本主题中，我们将学习 HTML 文本链接。

HTML 链接语法

我们可以使用下面的语法创建我们的第一个 HTML 链接。我们将在下面给定的语法中使用不同的标签、属性和相应的属性。

<a href="your url">Link your corresponding text here</a>

在上面的语法中，我们使用锚标记来创建 html 链接或超链接。我们将详细讨论这个锚标记。

锚标记是我们可以附加或链接文本、短语或单词以创建外部或内部链接的标记。通过使用锚标签；我们在页面中创建一个 URL，可用于导航到任何其他页面、网站或页面上的同一部分。

使用锚标签，我们有下面提到的许多优点。

• 组织：它有助于组织我们的数据。我们不需要制作多个网页或将数据分成多个块来进行管理；我们可以轻松地将数据组织在一个地方。
• 无滚动：通过使用html链接或html内部链接，我们不需要担心在很长的页面上滚动；我们可以点击该链接找到所需的部分页面。因此，可以轻松找到页面上的任何数据或部分。

如何创建锚标签？

正如你在上面的语法中看到的，我们现在在那里使用了很多东西；我们将更仔细地了解如何创建及其工作原理。

它由三个不同的部分（属性）组成：

1. href 属性
2. 目标属性
3. 名称属性

1. href 属性

Href 属性代表超文本引用。假设我们要创建一个超链接，那么第一个要求是一个文档地址，可以是任何其他网站、PDF等文件

所以，例如：

<a href="http://www.google.com">Google</a>

在此，http://www.google.com 是我们分配给 href 属性的值。因此，每当我们点击 Google 时，它​​都会将我们重定向到 Google 主页链接。因此 href 属性包含文档地址。我们还可以在 href 中提及我们自己的 HTML 链接。

例如

<a href="demo.html">My page</a>

2.目标属性

目标属性定义文档的打开方式。它有很多种，我们可以根据自己的需要来使用。

• _parent:它只是将附加文档打开到父框架中。
• _blank:它将文档打开到新选项卡或窗口中。
• _top:它会在全窗口中打开附件文档。
• _self: 它将文档打开到单击它的同一窗口或同一选项卡中。默认情况下，此目标已启用。我们可以像下面这样修改它：

<a href="http://www.demo.com" target="_blank" rel="noopener">Your Link text</a>

这里的 target=”_blank” 是使用它的语法。

3.名称属性

name属性用于跳转或导航到页面上的某个点；当我们有一个包含如此多内容的重要 VRU 页面时，这会很有用。这有助于节省用户的发现和时间，而无需滚动。语法如下：

<a name="to end"></a> or

在此，我们单击即可转到页面末尾，而无需向下滚动。

<a href="#SomeSection">Section</a>

此浏览器将识别该部分，但我们必须使用 (#) 和 name 属性。

<a href="otherpage.html#title">Link your text</a>

通过这个，我们可以在内部引用其他页面的“标题”。另外，页面地址末尾必须使用 (#)。

HTML 链接颜色

我们还可以为 html 链接提供颜色。默认情况下，它们具有三种链接颜色状态；这将出现在所有浏览器中。

• 活动链接：当我们点击任何链接时，它就会变成带有下划线和红色的活动链接。
• 未访问的链接：未访问的链接的标准浏览器默认颜色为蓝色并带有下划线。
• 访问过的链接：这些是紫色的并带有下划线。

但我们也可以使用以下语法提供自定义颜色来链接。我们可以遵循这种不同的类型来为我们的链接赋予颜色。但我们在这里使用内联 CSS；如果需要，您还可以创建外部 CSS。

• Directly provide the name of the color.
• By using the HEX color code.
• By using rgb() and rgba() values.
• By using hsl and hsla() values.

<a href="http://demo.com/" style="color:blue;">Red Link</a>

We can directly specify the color name in the style attribute. This is an inline CSS.

<a href="http://demo.com/" style="color:#FF0000;">Red color code</a>

Here we are specifying the color by using color codes. (HEX color codes)

<a href="http://demo.com/" style="color:rgb(255,0,0);">Red color</a>

We can also use RGB() values to specify the color of our links. We can control the opacity of the color by using rgb().

<a href="http://demo.com/" style="color:rgba(255,0,0,0.4);">Red color</a>

You can replace rbg() with rgba() but specify the fourth value for transparency and opacity.

<a href="http://demo.com/" style="color:hsl(0,10%,50%);">Red color</a>

We can also use HSL t color our link. HSL stands for hue, saturation, and lightness. We can also use HSLA for specifying color, but we need to provide one more parameter in hsla().

Conclusion – HTML Text Link

So in Sort, we use the anchor tag and its attributes to create the hyperlink or link in HTML. HREF contains the document’s address and the target responsible for handling the document. We can also color our link using inline or external CSS.

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