数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究HTML 中的超链接是什么？
概述
简单来说，超链接是指帮助客户端重定向到用户想要的信息的链接。超链接可以将用户重定向到其他页面，或者在同一页面上重定向到特定内容。在 HTML 中，锚标记元素允许开发者创建指向网页的超链接。此锚标记是一个开始和结束标记，需要同时使用开始标记和结束标记。
语法
在 HTML 中创建超链接的语法如下所示。其中还包含一个“href”属性，该属性包含页面链接或客户端将被重定向到的位置的地址。
<a href="#"> Hyperlink </a>
算法 1
<a> tutorialspoint </a>
现在为锚标记元素添加一个 href 属性，并在其中添加地址。
<a href="https://tutorialspoint.com/"> tutorialspoint </a>
现在超链接已准备就绪。
单击超链接，您将被重定向到该页面。
示例 1
在此示例中，我们将学习如何创建将用户重定向到另一个网页的超链接。
<html> <head> <title> Redirect to another page </title> </head> <body> Hyperlink: <a href="https://tutorialspoint.com/"> tutorialspoint </a> </body> </html>
算法 2
创建一个包含 HTML 基本结构的 HTML 文件。
现在创建一个无序列表，其中包含一些列表项。
<nav> <li>About</li> <li>Articles</li> <li>Contact</li> </nav>
现在将列表项包含在一个锚元素中，并为其添加 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>
现在创建三个 div 标记，并使用与锚标记“href”属性中分配的相同的 id 名称。
<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>标记在页面之间进行路由。
更新于： 2023年8月16日
255 次查看
广告