整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML 中 target 属性的精彩应用

天, 我们来聊一聊 HTML 中 target 属性的精彩应用。 target 属性可让你控制链接 opening 的位置: 在当前窗口/标签页、新窗口/标签页中,或在框架/ifram 中。

什么是 target 属性?

target 属性是 HTML a 元素和 form 元素的属性。 它规定链接 URL 应该在何处显示: 在当前浏览器窗口、新选项卡/窗口中,或嵌入到 frameset 中的框架中。

下面是 target 属性可接受的值:

  • _blank: 在新窗口/选项卡中打开链接。
  • _self: 默认值。在相同的框架/ifram/窗口/标签页中打开链接。
  • _parent: 在父框架集中打开链接 (如果当前文档是在框架集中打开的)。
  • _top: 在整个浏览器窗口中打开链接 (如果当前文档是在框架集中打开的)。
  • framename: 在 frameset 中指定的框架中打开链接。

target 属性的实际应用

在新选项卡/窗口中打开链接

如果你希望在新选项卡/窗口中打开链接,请使用 target="_blank":

<a href="https://www.example.com/" target="_blank">点击打开新选项卡</a>

在新窗口中打开 PDF 文件

如果你有一个 PDF 文件,并希望在新窗口中打开它,可以使用 target="_blank":

<a href="https://www.example.com/document.pdf" target="_blank">点击打开新窗口中的 PDF 文件</a>

️在新选项卡中打开图片

如果你有一个大图片,并希望在新选项卡中打开它,请使用 target="_blank":

<a href="https://www.example.com/image.jpg" target="_blank">
  <img src="https://www.example.com/image-thumbnail.jpg" alt="Image thumbnail">
</a>

搜索表单中的 target="_blank"

如果你有一个搜索表单,并希望在新选项卡中打开搜索结果,请使用 target="_blank":

<form target="_blank" action="https://www.google.com/search" method="get">
  <input type="text" name="q" placeholder="输入搜索关键字">
  <input type="submit" value="搜索">
</form>

在父框架中打开链接

如果你有一个框架集,并希望在父框架中打开链接,请使用 target="_parent":

<frameset rows="50%,50%">
  <frame name="top-frame" src="top-frame.html">
  <frame name="bottom-frame" src="bottom-frame.html" target="_parent">
</frameset>

在顶级框架中打开链接

如果你有一个框架集,并希望在整个浏览器窗口中打开链接,请使用 target="_top":

这个适合初学者的指南中,你将学习如何创建一个响应式电子邮件模板。你将跟随逐步说明以及代码片段设计一个在任何设备上都看起来很棒的电子邮件模板。

这个项目非常适合渴望掌握电子邮件设计基础的新手!

(本文视频讲解:java567.com)

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML 链接

如何在HTML文档中创建链接。

(可以在本页底端找到更多实例)

HTML 超链接(链接)

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线。

  • 访问过的链接显示为紫色并带有下划线。

  • 点击链接时,链接显示为红色并带有下划线。

注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。

HTML 链接语法

链接的 HTML 代码很简单。它类似这样::

<a href="url">链接文本</a>

href 属性描述了链接的目标。.

实例

<a href="http://www.runoob.com/">访问菜鸟教程</a>

上面这行代码显示为:: 访问菜鸟教程

点击这个超链接会把用户带到菜鸟教程的首页。

提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性

使用 target 属性,你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档:

实例

<ahref="http://www.runoob.com/"target="_blank">访问菜鸟教程!</a>

HTML 链接- id 属性

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。

实例

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips")":

<a href="#tips">访问有用的提示部分</a>

或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":

<a href="http://www.runoob.com/html/html-links.html#tips">

访问有用的提示部分</a>

基本的注意事项 - 有用的提示

注释: 请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.runoob.com/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.runoob.com/html/"。

图片链接

如何使用图片链接。

在当前页面链接到指定位置

如何使用书签

跳出框架

本例演示如何跳出框架,假如你的页面被固定在框架之内。

创建电子邮件链接

本例演示如何如何链接到一个邮件。(本例在安装邮件客户端程序后才能工作。)

建电子邮件链接 2

本例演示更加复杂的邮件链接。

HTML 链接标签

标签描述
<a>定义一个超级链接

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!