极客笔记HTML 超链接是什么
概述
简单地说，超链接是帮助客户端重定向到用户所需的信息的链接。超链接可以将用户重定向到其他页面或同一页上的特定内容。在HTML中，锚标签元素允许开发人员创建指向网页的超链接。这个锚标签是一个起始和结束标签，需要同时使用起始和结束标签。
语法
在HTML中创建超链接的语法如下所示。其中包含一个”href”属性，其中包含页面链接或客户端将重定向到的位置的地址。
<a href="#"> Hyperlink </a>
步骤1
- 创建一个HTML文件并添加HTML样板
-
现在使用“”创建一个HTML锚点标签。
<a> deepinout </a>
- 现在在锚点标签元素中添加 href 属性，并将地址添加到其中。
<a href="https://deepinout.com/"> deepinout </a>
-
现在超链接已经准备好了。
-
点击超链接，您将被重定向到该页面。
示例1
在这个例子中，我们将学习如何创建一个超链接，以便将用户重定向到另一个网页。
<html>
<head>
<title> Redirect to another page </title>
</head>
<body>
Hyperlink: <a href="https://deepinout.com/"> deepinout </a>
</body>
</html>
步骤2
- 创建一个带有HTML骨架的HTML文件
-
现在创建一个带有几个列表标签的无序列表
<nav>
<li>About</li>
<li>Articles</li>
<li>Contact</li>
</nav>
- 现在将列表标签包裹在带有 href 属性的锚元素内，href 属性值应以 “#” 开头的 “id” 名称。
<nav>
<a href="#about">
<li>About</li>
</a>
<a href="#articles">
<li>Articles</li>
</a>
<a href="#contact">
<li>Contact</li>
</a>
</nav>
- 现在创建三个具有相同id名称的div标签，这些标签被分配在锚标签“href”属性中。
<div id="about" style="background-color: aquamarine;">
<p> About section </p>
</div>
<div id="articles" style="background-color: rgb(155, 241, 17);">
<p> Articles section </p>
</div>
<div id="contact" style="background-color: beige;">
<p> Contact section </p>
</div>
-
现在如果你想区分这些部分，可以对页面进行样式设置。
-
同一页的超链接已经准备好了。
示例2
在这个例子中，我们将创建一个包含关于、文章和联系的某些部分的网页。我们还将创建一个导航栏，其中包含指向该部分的超链接。因此，当用户单击特定链接时，用户将被重定向到该页面的该部分。例如，当用户单击“文章”链接时，用户将被重定向到网页的文章部分。
<html>
<head>
<title> Redirect to the content </title>
<style>
* {
margin: 0;
}
nav {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
position: fixed;
background-color: white;
width: 100%;
padding: 1rem;
}
div {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<nav>
<a href="#about">
<li>About</li>
</a>
<a href="#articles">
<li>Articles</li>
</a>
<a href="#contact">
<li>Contact</li>
</a>
</nav>
<div id="about" style="background-color: aquamarine;">
<p> About section </p>
</div>
<div id="articles" style="background-color: rgb(155, 241, 17);">
<p> Articles section </p>
</div>
<div id="contact" style="background-color: beige;">
<p> Contact section </p>
</div>
</body>
</html>
结论
正如我们在上面的例子中看到的，“href”是一个在构建超链接中起重要作用的属性。因此可以说，“href”属性是超链接的基础。在导航栏部分和导航栏项中，大多数时间都会使用它。在简单的HTML中，我们使用锚标签（<a>）来创建超链接，但在ReactJs中我们使用<Link>标签在页面之间进行路由。