数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 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://tutorialspoint.com/index.htm">
<img src="https://tutorialspoint.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 中。
_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://tutorialspoint.com/index.htm" target="_self">target 1</a><br>
<a href="https://tutorialspoint.com/index.htm" target="_blank">target 2</a><br>
<a href="https://tutorialspoint.com/index.htm" target="_parent">target 3</a><br>
<a href="https://tutorialspoint.com/index.htm" target="_top">target 4</a><br>
<a href="https://tutorialspoint.com/index.htm" target="framename">target 5</a>
</div>
</body>
</html>
点击 target 1 将在同一窗口中打开链接。
点击 target 2 将在新选项卡中打开链接。
点击 target 3 和 4 将重新加载整个窗口并在当前窗口中打开链接，因为没有 iframe。
点击 target 5 将在新窗口中打开链接。
443 次浏览
