`

关于 href 中的 target

 
阅读更多


关于 href 中的 target

href target属性html中的标签和target标签的作用
一:Span
SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。 
SPAN元素被加入到HTML中以允许网页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用,而且它也能接受STYLE、CLASS和ID属性。

SPAN是一个内联元素,所以它可以作为HTML中的元素如EM和STRONG使用。最重要的差别在于虽然EM和STRONG带有结构的意义,但SPAN就没有这样的意义。它的存在纯粹是应用样式,所以当样式表失效时它就没有任何的作用。

具体属性参考下面连接:http://www.phpx.com/man/dhtmlcn/objects/SPAN.html

二:target


target 属性              -- 代表链接目标 取值 
_blank                      -- 打开一个新窗体 
_parent                    -- 在父窗体中打开 
_self                         -- 在本页打开,此为默认值 
_top                          -- 在上层窗体中打开一个对应的框架页的名称 -- 在对应框架页中打开 
此标记已经被w3c抛弃 
HTML中target的相关说明
1._blank       <a href="document.html" target="_blank">my document</a>         浏览器会另开一个新窗口显示document.html文档   
2._parent      <a href="document.html" target="_parent">my document</a>       指向父frameset文档   
3._self          <a href="document.html" target="_self">my document</a>           把文档调入当前页框 
4._top          <a href="document.html" target="_top">my document</a>            去掉所有页框并用document.html取代frameset文档    
小技巧1:使别人的页框不能引用你的网页        在文件头加:<base target="_top">    
小技巧2:在当前页打开连接或做刷新,提交到当前页在文件头加:<base target="_self">


链接的 target 属性怎么用 JS 来控制?

 

在HTML 4.0 Strict和XHTML 1.0 STRICT里不允许在<a>标签里使用target属性,这是一件令网页设计者懊恼的事.在过渡的规范里还是允许使用的.但通过一定的方法,我们可以解决这一问题.

 


HTMl4.0规范里拿掉了target属性.但它添加了另外一个属性:rel.这个属性是用来指定包含链接的文档和所链接文档之间的关系的.规范里定义 了其属性值(如:next,previous,chapter,section),在这些属性里大多数是用来定义一个大文档里各个小部分之间的关系的.事 实上.规范里允许开发人员自由的使用非标准属性值做特定的运用.

在这里,我们采用一个自定义值external用于rel属性来标记一个链接,用来新开一个窗口.

不符合最新Web标准的链接代码:
<a href="document.html" target="_blank">external link</a>

运用rel属性:
<a href="document.html" rel="external">external link</a>

现在我们构建了一个符合Web标准的新开窗口的链接,我们还需要运用JavaScript是其实现新开窗口.脚本要实现的工作是当网页加载时,找到文档里的所有那些我们定义为rel="external"的超链接.

首先我们要判断浏览器.
if (!document.getElementsByTagName) return;

getElementsByTagName是DOM1标准里一个容易使用的方法,且它被现在的大多数浏览器所支持,因为一些旧的浏览器如Netscape 4和IE4不支持DOM1,所以我们必须通过判定这一方法是否存在来排除这些旧版本的浏览器.

下一步,我们通过getElementsByTagName方法取得文档里所有的<a>标签:
var anchors = document.getElementsByTagName("a");

anchors被赋值为包含各个<a>标签的数组,现在我们必须遍历各个<a>标签并且修改它:

for (var i=0; i < anchors.length; i++) {
var anchor = anchors;

找到要实现新开窗口的<a>标签
以下是引用片段:
if (anchor.getAttribute("href") && 
anchor.getAttribute("rel") == "external")

接下来.建立属性值target并赋值"_target":
anchor.target = "_blank";

完整的代码:

以下是引用片段:
function externalLinks() { 
if (!document.getElementsByTagName) return; 
var anchors = document.getElementsByTagName("a"); 
for (var i=0; i<anchors.length; i++) { 
var anchor = anchors; 
if (anchor.getAttribute("href") && 
anchor.getAttribute("rel") == "external") 
anchor.target = "_blank"; 


window.onload = externalLinks;


所有链接都设成_blank简单方法
在页面<head></head>之间加入<base target=_blank>(XHTML:<base target="_blank" />),就会使该页面所有链接均为新开窗口打开。

<base>是一个链接基准标记,用以改变页面中所有链接标记的参数默认值。

引申应用:


<head><base href="http://hi.baidu.com/jjpro" target="_blank" /></head>
<body><a href="jjpro">资料收集</a></body>


分享到:
评论

相关推荐

    用好href的target属性

    ### 用好`href`的`target`属性 在网页设计与开发中,合理利用超链接的`target`属性能够显著提升用户体验,并实现更为复杂的页面交互功能。`target`属性通常用于规定在何处显示被链接文档的目标窗口或框架。本文将...

    Get href target-crx插件

    "Get href target-crx插件"是一款专为Chrome浏览器设计的扩展程序,主要功能是处理HTML页面中的`href`元素,使得链接可以在新的标签页中打开。这款插件尤其适用于那些希望快速、方便地在多个标签页之间切换的用户,...

    frameset框架中target的使用

    ### frameset框架中target的使用 在Web开发中,`frameset`是一种早期用来组织多个文档在一个页面中显示的技术。这种技术允许开发者在一个浏览器窗口内分割出多个区域,并且每个区域都可以独立加载不同的HTML文档。...

    CSS3 target伪类简介

    其中,`:target`伪类作为一种重要的选择器,在交互式网页设计中扮演着不可或缺的角色。它能够帮助开发者轻松实现基于URL片段标识符的目标元素高亮或样式更改等功能,极大地提升了用户体验。 #### 二、`:target`伪类...

    HTML a 标签的 target 属性.doc

    HTML `&lt;a&gt;` 标签中的 `target` 属性用于指定在何处打开由 `href` 属性定义的链接文档。该属性提供了多种选项来控制链接文档的加载方式,包括在新窗口打开、在当前窗口打开或在特定框架内打开等。 #### 二、基本用法...

    html的frameset和target的应用

    &lt;a href="about.html" target="contentFrame"&gt;关于我们 ``` 这段代码创建了一个链接,当点击时,将在名为`contentFrame`的框架中打开`about.html`页面。 ### 3. 布局与导航的结合 结合`&lt;frameset&gt;`和`&lt;target&gt;`,...

    window.location.href页面跳转的用法(区别于redirect)

    例如,在一个包含多个框架(frames)的页面结构中,可以通过调整`window.location.href`前面的修饰词来控制不同框架内的页面跳转或刷新。 - **"window.location.href"**:表示当前页面自身的跳转。 - **"parent....

    HTML利用超链接打开链接文件的方法介绍

    a和href属性HTML用来表示超链接... 比如链接到jb51.net站点首页,就可以这样表示: &lt;ahref&gt;多特软件站jb51.net首页&lt;/a&gt;target属性使用target属性,可以在一个新窗口里打开链接文件。 &lt;ahref=https://www.jb51.netta

    struts中base标签的target属性

    &lt;a href="&lt;s:url value='about'/&gt;" target="_blank"&gt;关于我们 ``` 这段代码将创建一个链接,点击后将在新的窗口或标签页中打开 `http://example.com/about`。 #### 总结 通过本文的介绍,我们可以看到 Struts 中...

    HTML base 标签的 href 属性

    总之,`&lt;base&gt;`标签的`href`属性是一个强大的工具,用于管理和标准化页面中的链接行为。正确使用它可以提高网站的可维护性和用户体验。在实际开发中,我们需要根据项目需求来决定是否以及如何使用这个标签,确保其...

    实战 target 选择器,解放生产力!.doc

    在这篇文章中,我们将探索 Target 选择器的强大功能,了解它如何帮助我们实现网页开发中的锚点和 tab 切换功能。 首先,让我们来学习一下网页开发中的锚点。锚点是一种网页内设置的一个位置,点击链接可以跳转到...

    关于js中[removed].href,location.href,parent.location.href,top.location.href的用法与区别

    标题和描述中提到了JavaScript中的几个与页面跳转和刷新相关的属性,分别是window.location.href、location.href、parent.location.href以及top.location.href。这些属性在JavaScript编程中非常常用,用于控制页面的...

    a标签的target链接指向iframe的方法

    本篇将详细讲解如何利用`&lt;a&gt;`标签的`target`属性来指定链接在哪个`iframe`中打开,以及相关注意事项。 首先,`&lt;iframe&gt;`标签是HTML中用于嵌入另一个文档的元素,它可以在同一个页面内显示来自不同源的内容。`...

    html超级链接标记A的TARGET属性详解

    &lt;a href="aboutme.htm" target="_blank"&gt;关于我 ``` - **鼠标移到链接时显示说明文字**: ```html &lt;a href="hscf.htm" title="这是一个介绍网页制作技巧的专业网站"&gt;黄山村夫 ``` 以上就是关于HTML超级链接...

    base target=””控制链接的目标打开框架

    当我们设置 `target="_blank"` 时,这意味着所有没有明确指定 `target` 的链接将在新窗口或新标签页中打开。 然而,使用 `&lt;base target="_blank"&gt;` 需要谨慎。如果你对 HTML、CSS 和 JavaScript 不够熟悉,可能引发...

    Vue配置marked链接添加target="_blank"的方法

    然而,默认情况下,marked不会自动添加`target="_blank"`属性到Markdown中的链接,这意味着链接会在当前窗口打开。为了解决这个问题,我们需要自定义marked的渲染器(Renderer)来实现链接在新窗口打开的功能。 ...

    base href 使用方法详解

    &lt;base href="URL" target="target_name"&gt; ``` - **`href`属性**:定义文档的基础URL。所有相对URL都将基于此URL进行解析。 - **`target`属性**:定义文档中所有未明确指定`target`属性的链接的目标窗口或框架名称。...

    通过href简单实现点击a链接跳到页面中指定的地方

    &lt;a href="目标URL" target="打开方式"&gt;链接文本 ``` `href`属性是`&lt;a&gt;`标签的核心,它定义了链接的目标。在这里,我们关注的是如何利用`href`进行页面内部跳转。 当`href`属性后面跟着一个`#`符号时,它就变成了一...

    html base标签 target=_parent使用介绍

    同时,由于`target="_parent"`,所有链接都将尝试在父框架中打开,如果当前页面没有嵌套在框架中,那么它相当于`_self`,即在当前页面中打开。 理解`&lt;base&gt;`标签的工作原理对于创建大型网站或者需要统一处理链接的...

Global site tag (gtag.js) - Google Analytics