如何在 HTML 中指定链接并解释 Target 属性?
在 HTML 中指定链接
HTML 链接本质上是超链接。点击链接即可跳转到另一个文档。鼠标移动到链接上时，鼠标箭头会变成一只小手。链接不需要文本。链接可以是图像或其他类型的 HTML 元素。
超链接由 HTML <a> 标签(也称为锚标签)定义。其语法如下:
<a href="url">--link text--</a>
href 属性指示链接的目标位置，是 <a> 元素最重要的属性。链接文本是读者将看到的部分。点击链接文本，读者将被定向到指定的 URL 地址。如果 <a> 标签上没有 href 属性，则它只是一个超链接的占位符。
在所有浏览器中，链接默认显示如下:
未访问的链接以蓝色突出显示。
已访问的链接以紫色突出显示。
活动链接以红色突出显示。
锚标签有几个属性，如下所示。
charset:此属性指定字符集。 HTML 5 不支持此功能。
download: 用户点击时，用于指定要下载的目标链接。
hreflang: 指定链接文档的语言。
media: 用于指定链接的媒体。
coords: 用于指定链接坐标。HTML 5 不支持此功能。
name: 这是锚点的名称。HTML 5 不支持此功能;因此，我们可以使用全局 id 属性代替。
rel: 用于指定当前文档和链接文档之间的关系。
shape: 指定链接的形状。 HTML 5 不支持它。
type:此参数指定链接的类型。
target:指定链接的目标。
rev:指定链接文档与当前文档之间的关系。HTML 5 不支持它。
让我们看一些在 HTML 中指定链接的不同示例。
示例
在此示例中，我们将演示如何使用图像作为链接。
<!DOCTYPE html>
<html>
<head>
<title>Using an image as a link</title>
<style>
div{
padding:50px;
width:500px;
height:350px;
background-color:papayawhip;
}
img{
height:100px;
width:300px;
border:2px solid sienna;
}
p{
font-size:18px;
font-weight:bold;
}
</style>
</head>
<body>
<div>
<p>Click on the image to get redirected to the link's destination.<p>
<a href="https://www.cainiaomax.com/index.htm">
<img src="https://www.cainiaomax.com/images/logo.png">
</a>
</div>
</body>
</html>
示例
此特定示例演示了如何创建打开用户电子邮件的链接。
<!DOCTYPE html>
<html>
<head>
<title>Creating a link to an email address</title>
<style>
div{
padding:50px;
width:300px;
height:150px;
background-color:darkslategrey;
}
p{
font-size:18px;
color:white;
}
a{
color:cornflowerblue;
}
</style>
</head>
<body>
<div>
<p>Creating a link that opens in the user's email using mailto: in the href attribute.</p>
<a href="mailto:contact@tutorialspoint.com">Send email</a>
</div>
</body>
</html>
示例
在此示例中，我们将创建一个指向 JavaScript 函数的链接。
<!DOCTYPE html>
<html>
<head>
<title>Creating a link to a JavaScript function</title>
<style>
div{
padding:50px;
width:300px;
height:100px;
background-color:lavenderblush;
}
</style>
</head>
<body>
<div>
<a href="javascript:alert('Welcome to the website!');">Click here to execute the JavaScript function.</a>
</div>
</body>
</html>
Target 属性
链接上的 target 属性指定链接页面的打开位置。链接可以在相同标签页、新标签页、新窗口或 iframe 中打开页面。如果未指定 target 参数，则链接将在与当前页面相同的标签页/窗口中打开。target 属性需要 href 的值。
语法
<a href="url" target="_self | _blank | _parent | _top | framename" />
属性值
_self: 在与当前页面相同的标签页/窗口中打开页面。这是默认设置。
_blank:此命令在新标签页中打开页面。
_parent:此函数在父 iframe 中打开页面。如果没有父 iframe，则页面位于同一 iframe 中。
_top:在 iframe 的最顶层部分打开页面。如果没有最顶层的 iframe，则页面位于同一 iframe 中。
framename:此函数在命名的 iframe 中打开页面。
示例
此示例演示了 <a> 标签中 target 属性及其所有属性值的用法。
<!DOCTYPE html>
<html>
<head>
<title>
Example of HTML <a> target Attribute
</title>
<style>
p{
font-weight:bold;
}
div{
background-color:lightblue;
height:100px;
width:200px;
padding:20px;
}
</style>
</head>
<body>
<p>Opening links at different targets</p>
<div>
<a href="https://www.cainiaomax.com/index.htm" target="_self">target 1</a><br>
<a href="https://www.cainiaomax.com/index.htm" target="_blank">target 2</a><br>
<a href="https://www.cainiaomax.com/index.htm" target="_parent">target 3</a><br>
<a href="https://www.cainiaomax.com/index.htm" target="_top">target 4</a><br>
<a href="https://www.cainiaomax.com/index.htm" target="framename">target 5</a>
</div>
</body>
</html>
点击目标 1 将在同一窗口中打开链接。
点击目标 2 将在新标签页中打开链接。
点击目标 3 和 4 将重新加载整个窗口，并在当前窗口中打开链接，因为没有 iframe。
点击目标 5 将在新窗口中打开链接。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
