如何使用HTML实现点击一个链接打开新窗口
【最基本的弹出窗口代码】
其实代码非常简单:
因为这是一段javascript代码,所以它们应该放在
Window.open ('pa ge.html')用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。
用单引号和双引号都可以,只是不要混用。
这一段代码可以加入HT ML的任意位置,加入到
和之间也可以,位置越靠前执行越早,尤其是页面代码较长时,又想使页面早点弹出就尽量往前放。【经过设置后的弹出窗口】
下面再说一说弹出窗口外观的设置。只要再往上面的代码中加一点东西就可以了。
我们来定制这个弹出窗口的外观、尺寸大小、弹出位置以适应该页面的具体情况。
js脚本结束。
【用函数控制弹出窗口】
下面是一个完整的代码。
...任意的页面内容...
这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢?
方法一:
方法二:
方法三:用一个连接调用:打开一个窗口
注意:使用的"#"是虚连接。
方法四:用一个按钮调用:
【主窗口打开文件1.htm,同时弹出小窗口p age.html】
将如下代码加入主窗口
区:加入
【弹出的窗口之定时关闭控制】
下面我们再对弹出窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到p age.html的HTML中,可不是主页面中,否则…),让它在10秒钟后自动关闭是不是更酷了?
首先,将如下代码加入pag e.html文件的
区:function close it() {
setTimeout("self.close()",10000) //毫秒
}
然后,再用
【在弹出窗口中加上一个关闭按钮】
呵呵,现在更加完美了!
原来的HT ML标准中可以用
但新的HT ML标准严格上是不允许的。可以采用以下代码:
javascript:
function externallinks() {
if (!document.getElementsByTagName) retu rn;
var ancho rs = document.getElementsByTagNam e("a");
for (var i=0; i var ancho r = anchors[i]; if (anchor.getAttribute("h ref") && anchor.getAttribute("rel") == "exte rnal") anchor.target = "_blan k"; } } window.onload = e xternallinks; 参考资料: https://www.360docs.net/doc/313953140.html,/a rticle/tips/2005/107.html 我们在使用标签时,常常会使用它的href属性为一段javasrcipt来实现某些功能。比如关闭一个窗口:,或者弹出一个新的窗口。这样来实现窗口的操作。 当然也有人会用onclick事件来实现打开或者关闭窗口, 打开新窗口。那么他们之间到底有什么区别呢?下面来好好分析一下 关闭窗口时,浏览器不会弹出窗口关闭的对话框,而,浏览器就会弹出窗口关闭的对话框。 打开一个新的窗口时,会使原来的窗口发生页面回传,从而导致 css样式无效,如果是动态页面的话还可能导致页面变空白。所以还是慎用这个方法。 onclick="windows.close();">,是完全在客户端执行的动作,页面不会产生回传,不会刷新页面。 HTML实例超级链接使用 2010-01-05 21:51:47 作者:来源:网友评论 0 条 HTML代码实例:详细讲解超级链接,超级链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级链接串接而成,超级链接完成了页面之间的跳转。超级链接是浏览者和服务器的交互的主要手段,在后面的技术中会逐步深化学习。超级链接超级链接是网站 超级链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级链接串接而成,超级链接完成了页面之间的跳转。超级链接是浏览者和服务器的交互的主要手段,在后面的技术中会逐步深化学习。超级链接 超级链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级链接串接而成,超级链接完成了页面之间的跳转。超级链接是浏览者和服务器的交互的主要手段,在后面的技术中会逐步深化学习。 —注意:图片也可以做链接,将在下一章“网页中的图片”详细学习。 4.5.1 给文字添加链接 超级链接的标签是,给文字添加超级链接类似于其他修饰标签。添加了链接后的文字有其特殊的样式,以和其他文字区分,默认链接样式为蓝色文字,有下划线。超级链接是跳转到另一个页面的,标签有一个href属性负责指定新页面的地址。href指定的地址一般使用相对地址。 —说明:网站开发中,文档相对地址使用更为普遍。 在D:\web\目录下创建网页文件,命名为a.htm,编写代码如代码4.18所示。 代码4.18 超级链接的设置:a.htm html超链接实例
HTML超链接
先看两个示例 建立一个超链接 这个示例演示了如何在HTML文件里创建超链接。 将一个图片作为一个超链接
你可以将一张图片作为一个链接,点击这个图片。 这个示例演示了如何将一个图片作为一个超链接,即点击一个图片,可以连接到其它文件。 a和href属性 HTML用来表示超链接,英文叫anchor。 可以指向任何一个文件源:一个HTML网页,一个图片,一个影视文件等。用法如下: 链接的显示文字 点击当中的内容,即可打开一个链接文件,href属性则表示这个链接文件的路径。比如链接到https://www.360docs.net/doc/313953140.html,/html站点首页,就可以这样表示: 站长网站长学院https://www.360docs.net/doc/313953140.html,/html首页 target属性 使用target属性,可以在一个新窗口里打开链接文件。 站长网站长学院https://www.360docs.net/doc/313953140.html,/html首页 示例 title属性 使用title 属性,可以让鼠标悬停在超链接上的时候,显示该超链接的文字注释。 链接的显示文字 点击当中的内容,即可打开一个链接文件,href属性则表示这个链接文件的路径。 比如链接到https://www.360docs.net/doc/313953140.html,/html站点首页,就可以这样表示: 站长网站长学院https://www.360docs.net/doc/313953140.html,/html首页 target属性 使用target属性,可以在一个新窗口里打开链接文件。 站长网站长学院 https://www.360docs.net/doc/313953140.html,/html首页 示例 title属性 使用 title 属性,可以让鼠标悬停在超链接上的时候,显示该超链接的文字注释。 站长网站长学院网站 如果希望注释多行显示,可以使用 作为换行符。 站长网站长学院网站 示例 name属性 使用name属性,可以跳转到一个文件的指定部位。 使用name属性,要设置一对。一是设定name的名称,二是设定一个href指向这个name: 参见第一章 第一章 示例 name属性通常用于创建一个大文件的章节目录(table of contents)。每个章节都建立一个链接,放在文件的开始处,每个章节的开头都设置Name属性。当用户点击某个章节的链接时,这个章节的内容就显示在最上面。 如果浏览器不能找到Name指定的部分,则显示文章开头,不报错。 链接到email地址 在网站中,你经常会看到“联系我们”的链接,一点击这个链接,就会触发你的邮件客户端,比如Outlook Express,然后显示一个新建mail的窗口。用可以实现这样的功能。 联系新浪网站制作HTML文件中最重要的应用之一就是超链接
HTML文件中最重要的应用之一就是超链接,超链接是一个网站的灵魂,web上的网页是互相链接的,单击被称为超链接的文本或图形就可以链接到其它页面。超文本具有的链接能力,可层层链接相关文件,这种具有超级链能力的操作,即称为超级链接。超级链接除了可链接文本外,也可链接各种媒体,如声音、图象、动画,通过它们我们可享受丰富多采的多媒体世界。 建立超链接的标签为和 格式为:超链接名称 说明:标签表示一个链接的开始,表示链接的结束; 属性“HREF”定义了这个链接所指的目标地址;目标地址是最重要的,一旦路径上出现差错,该资源就无法访问 TARGET:该属性用于指定打开链接的目标窗口,其默认方式是原窗口。 建立目标窗口的属性 TITLE:该属性用于指定指向链接时所显示的标题文字。 "超链接名称"是要单击到链接的元素,元素可以包含文本,也可以包含图像。文本带下划线且与其它文字颜色不同,图形链接通常带有边框显示。用图形做链接时只要把显示图像的标志嵌套在之间就能实现图像链接的效果。当鼠标指向"超链接名称"处时会变成手状,单击这个元素可以访问指定的目标文件。 4-1 链接路径 每一个文件都有自己的存放位置和路径,理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。 URL(Uniform Resourc Locator)中文名字为"统一资源定位器"。指的就是每一个网站都具有的地址。同一个网站下的每一个网页都属于同一个地址之下,在创建一个网站的网页时,不需要为每一个连接都输入完全的地址,我们只需要确定当前文档同站点根目录之间的相对路径关系就可以了。因此,链接可以分以下三种:
HTML5超链接和路径
第4章超链接和路径 学习要点: 1.超链接的属性 2.相对与绝对路径 3.锚点设置 本章主要探讨HTML5中文本元素最重要的一个超链接,探讨它自身的属性以及路径问题。 一.超链接的属性 元素属于文本元素,有一些私有属性或者叫局部属性。那么,相对应的还有通用属性或叫做全局属性。这方面的知识,后面会详细探讨。 属性名称说明 href 指定元素所指资源的URL hreflang 指向的链接资源所使用的语言 media 说明所链接资源用于哪种设备 rel 说明文档与所链接资源的关系类型 target 指定用以打开所链接资源的浏览环境 type 说明所链接资源的MIME类型(比如text/html) 在这几个属性当中,只有href和target一般比较常用,而href是必须要用的。其他几个属性,在元素使用较少,将在CSS章节再探讨。 1.href属性 百度 解释:href是必须属性,否则元素就变成空元素了。如果属性值是http://开头的URL,意味着点击跳转到指定的外部网站。 2.target属性 百度 解释:target属性告诉浏览器希望将所链接的资源显示在哪里。 属性名称说明
_blank 在新窗口或标签页中打开文档 _parent 在父窗框组(frameset)中打开文档 _self 在当前窗口打开文档(默认) _top 在顶层窗口打开文档 这四种最常用的是_blank,新建一个窗口。而_self是默认,当前窗口打开。_parent和_top是基于框架页面的,分别表示在父窗口打开和在整个窗口打开。而HTML5 中,框架基本被废弃,只能使用
html超级链接标记A的TARGET属性详解
超级链接标记A的TARGET属性详解. 超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像,这已是众所周知了,但关于它的语法结构可能有点鲜为人知,而要用活它则必须了解其语法结构。<a>标记的基本语法结构是: <a class=type id=value href=reference name=value rel=same|next|parent|previous rev=value target=window style=value title=title onclick=function onmouseout=function onMouseOver=function>连接</a> 从标记的语法结构可以看出,在设定一个超级链接时有很多参数可供选择,以实现不同的链接效果,这有点出乎意料吧?! TARGET详解: 1._blank <a href="example.html" target="_blank">example</a> 浏览器会另开一个新窗口显示example.html文档 2._parent <a href="example.html" target="_parent">example</a> 指向父frameset文档 3._self <a href="example.html" target="_self">example</a> 把文档调入当前页框 4._top <a href="example.html" target="_top">example</a> 去掉所有页框并用document.html取代frameset文档 小技巧1:使别人的页框不能引用你的网页在文件头加:<base target="_top"> 小技巧2:在当前页打开连接或做刷新,提交到当前页在文件头加:<base target="_self"> 其中class和id选项:用于设定链接点所属的类型和分配的ID号,通常不加以设定。最常用的两个参数是href和name。其中href是hypertext reference的缩略词,用于设定链接地址。链接地址必须为url地址,如果没有给出具体路径,则默认路径和当前页的路径相同。链接到的文件也分为几种情况:如果为HTML文件,则在当前浏览器中直接打开;如果为可执行文件(.exe文件),则直接执行或下载,我们提供下载的文件就是用它的这种特性做的;如果为文本文件如word格式的文件,则在浏览器中打开此文件,并可以进行编辑加工。 rel:表示设定链接的关系:rel=same表示待链接的文件与此文件相同,rel=next表示待链接的文件为下一页,rel=parent表示本文件为待链接文件的父文件,rel=previous则表示待链接的文件为上一页。 rev:则用于设定反向链接。