HTML - target 属性_HTML 菜鸟教程

HTML target 属性用于指定打开链接文档的位置。

target 属性为 <base> 标记指定页面中所有超链接和表单的默认目标。此属性指定一个名称或关键字，该名称或关键字指示在提交 <form> 标记的表单后收到的响应的显示位置。

语法


<element target = "_blank | _self | _parent | _top | framename " \>

以下是属性值：

_blank：在新窗口中打开链接。
_self：在同一帧中打开链接，它是默认值。
_parent：在父框架集中打开链接。
_top：在窗口的整个正文中打开链接的文档。
framename：在命名框架中打开链接的文档。

适用对象

下面列出的元素允许使用 HTML target 属性。

元素	描述
<a>	HTML <a> 标签定义了一个超链接。它用于从一个页面链接到另一个页面。
<area>	HTML <area> 标签指定了图像的区域、可以单击的映射或通过超链接链接到的活动区域。
<base>	HTML <base> 标签用于指定基本 URL。
<form>	HTML <form> 标签用于通过表单收集网站上的用户输入。

HTML target 属性的示例

以下示例将说明 HTML target 属性，我们应该在何处以及如何使用此属性！

使用带有“a”标签的target 属性

在运行下面的代码时，它将生成一个带有超链接的输出。当用户单击链接时，QikepuCom 网站将在新窗口或标签页中打开。


<!DOCTYPE html>
<html>
<head>
		<title>Target attribute with a Tag</title>
</head>
<body>
		<h3>QikepuCom</h3>
		<h2>Target attribute with a tag</h2>
		<p>Open link in a new window or tab: 
		<a href=
"https://www.qikepu.com/index.htm" 
			 target="_blank">Visit QikepuCom
		</a>
		</p>
</body>
</html>

使用带有“area”标签的target 属性

在执行以下代码时，将显示带有可点击区域的图像映射。单击每个区域时，将根据指定的目标值打开相应的链接。


<!DOCTYPE html>
<html>
<head>
		<title>HTML area Tag</title>
</head>
<body>
		<img src = "/images/usemap.gif" alt = "usemap"
				 border = "0" usemap = "#QikepuCom"/>   
		<map name = "QikepuCom">
			<area shape = "poly" 
						coords = "74,0,113,29,98,72,52,72,38,27"
						href = "/perl/index.htm" 
						alt = "Perl QikepuCom" 
						target = "_blank">
			<area shape = "rect" 
						coords = "22,83,126,125" 
						alt = "HTML QikepuCom"
						href = "/html/index.htm" 
						target = "_self">
			<area shape = "circle" 
						coords = "73,168,32" 
						alt = "PHP QikepuCom"
						href = "/php/index.htm" 
						target = "_top">
		</map>
		<p>
				Click each of the above technologies 
				to view in different frame
		</p>
</body>
</html>

使用带有“base”标签的target 属性

输出窗口显示一个链接。点击链接后，QikepuCom 网站将在同一框架中打开。


<!DOCTYPE html>
<html>

<head>
		<base target="_self">
		<title>Base tag with target Attribute </title>
</head>

<body>
		<h2>Base tag with target Attribute</h2>
		<p>Visit
		<a href=
"https://www.qikepu.com/index.htm">
				 QikepuCom</a>
				 To Learn New Technologies
		</p>
</body>

</html>

使用带有“form”标签的target 属性

当我们运行下面的代码时，会显示一个表单。提交表格后，QikepuCom 网站将在父选项卡中打开。


<!DOCTYPE html>
<html>

<head>
		<title>form tag with target attribute</title>
</head>

<body>
		<h2>Target attribute in form tag</h2>
		<form action="/action_page.php" 
				method="post" 
				target="_parent">
				<label for="first_name">Enter name:</label>
				<input type="text" name="first_name" />
				<br>
				<p>
						Click on submit to view the QikepuCom
						website on the same frame
				</p>
				<input type="submit">
		</form>
</body>

</html>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - style 属性 HTML - type 属性 >>