如何使用HTML实现点击一个链接打开新窗口
- 格式:doc
- 大小:27.50 KB
- 文档页数:4
HTML特效代码大全(完整全收录)1) 贴图:2)加入连接:写上你想写的字3)在新窗口打开连接:写上要写的字消除连接的下划线在新窗口打开连接:target="_blank">写上你想写的字4)移动字体(走马灯):写上你想写的字5)字体加粗:写上你想写的字6)字体斜体:写上你想写的字7)字体下划线: (写上你想写的字)8)字体删除线: 写上你想写的字9)字体加大: 写上你想写的字 10)字体控制大小:写上你想写的字 (其中字体大小可从h1-h5,h1最大,h5最小)11)更改字体颜色:写上你想写的字(其中value值在000000与ffffff(16位进制)之间12)消除连接的下划线:写上你想写的字13)贴音乐:14)贴flash:15)贴影视文件:16)换行:17)段落:段落18)原始文字样式:正文20)固定帖子背景不随滚动条滚动:21)定制帖子背景颜色:(value值见10)22)帖子背景音乐:23)贴网页:HTML特效代码1。
忽视右键或2。
加入背景音乐IE:NS:*.mid你的背景音乐的midi格式文件3。
简单的window.open方法onclick="javascript :window.open(文件路径/文件名,newwindow, toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,width=400,height=300);">文字或图片参数解释:js脚本开始; window.open 弹出新窗口的命令;文件路径/文件名弹出窗口的文件名;newwindow 弹出窗口的名字(不是文件名),非必须,可用空代替;width=400 窗口宽度;height=300 窗口高度;top=0 窗口距离屏幕上方的象素值;left=0 窗口距离屏幕左侧的象素值;toolbar=no 是否显示工具栏,yes为显示;menubar,scrollbars 表示菜单栏和滚动栏。
如何利用HTML超链接打开链接文件
这是关于如何利用HTML超链接打开链接文件,它主要讲述了创建超链接打开HTML链接文件的方法,特别适合初学者学习哦!
a和href属性
HTML用来表示超链接,英文叫anchor。
可以指向任何一个文件源:一个HTML网页,一个图片,一个影视文件等。
用法如下:链接的显示文字
点击当中的内容,即可打开一个链接文件,href属性则表示这个链接文件的路径。
比如链接到51edu站点首页,就可以这样表示:
51edu首页
target属性
使用target属性,可以在一个新窗口里打开链接文件。
51edu首页
title属性。
JS实现页⾯跳转与刷新的⽅法汇总window.location(.href)="URL"其实 .href 可以省略window.location 和window.location.href 实现的效果是⼀样的例如:window.location = ""window.location.href = 上⾯两种⽅法都可以从当前页⾯跳转到⽬标页⾯不同之处在于window.location 返回的是对象,如果没有.href,它会默认参数就是hrefwinodw.location.assign("URL")这个⽅法和上⾯的⽅法差不多⽤法:winodw.location.assign()window.location.replace("URL")如果⽤window.location.replace("") 实现跳转页⾯, 它和上⾯⽅法的区别在于它跳转后不会保存跳出页⾯的信息.所以如果使⽤ history 历史返回按钮是⽆效的它的效果类似于在⽹页上点击右键, 在新窗⼝打开或新标签页打开.⽽window.location.href 实现的效果是在页⾯上点击⽬标链接, 然后可以点击历史返回按钮, 返回到之前页⾯。
历史页跳转下⾯的两种⽅法都可以实现返回历史页,相当于点了页⾯左上⾓的返回按钮window.history.back();window.history.go(-1);back和go⾥⾯都可以放数值例如:⾥⾯放上 -1 意思就是返回上⼀级,⾥⾯放上 -2 就是返回上上级,以此类推⽽且⾥⾯还可以放上指定的路由路径,⽐如window.history.go('../routes/admin/'); 这样可以跳转到指定的路由模块meta refresh如果⽤户浏览器禁⽤了javascript, 那么可以⽤meta refresh来实现⾃动跳转:<noscript><meta http-equiv="refresh" content="0;URL=/"></noscript>如果要实现 JS ⾃动跳转,可以加个定时器:setTimeout(function(){ ... }, 1000);重新加载本页如果你的代码逻辑执⾏完了,想要重新加载页⾯的话,可以⽤这两种⽅法:window.location.reload()window.location.replace()这两种⽅法都可以重新加载本页,但是replace()可以导向另外⼀个URL例如:window.location.replace("")window.navigate('URL')window.navigate('URL')这个⽅法是只针对IE的,不适⽤于⽕狐等其他浏览器,在HTML DOM Window Object中,根本没有列出window.navigate这个⽅法,所以这个⽅法尽量少⽤,遗忘最好。
HTML是一种标记语言,用于创建网页。
在网页中,经常需要使用信息或按钮来打开新窗口或关闭当前窗口。
本文将介绍如何在HTML中使用超信息和JavaScript来实现打开和关闭窗口的功能。
一、使用超信息打开新窗口在HTML中,可以使用超信息(<a>标签)来打开新窗口。
通过在<a>标签中添加target属性,可以指定信息打开的位置,包括_blank(在新窗口中打开)、_self(在当前窗口打开)、_parent(在父窗口打开)和_top(在顶层窗口打开)等选项。
例如:```html<a href="xxx" target="_blank">在新窗口中打开信息</a>```这将在用户单击信息时在新窗口中打开指定的信息。
二、使用JavaScript关闭窗口在HTML中,可以使用JavaScript来关闭当前窗口。
可以在需要执行关闭窗口的元素上绑定一个JavaScript函数,当用户与该元素交互时,将触发关闭窗口的操作。
例如:```html<button onclick="window.close()">关闭窗口</button>```这将创建一个按钮,当用户单击按钮时将会关闭当前窗口。
总结:通过HTML中的超信息和JavaScript,可以实现在网页中打开和关闭窗口的操作。
通过合理的使用,可以改善用户体验,增加网页的交互性和可用性。
HTML具有丰富的功能和灵活的应用方式,在前端开发中有着重要的地位。
掌握HTML的相关知识,可以为网页设计和开发带来便利和效率。
希望本文介绍的相关内容能够对您有所帮助。
在前文中我们介绍了如何使用HTML中的超信息和JavaScript来实现打开和关闭窗口的功能,这些功能在网页设计和开发中都有着重要的作用。
接下来我们将进一步深入探讨这些功能的使用方法以及在实际项目中的应用。
alert在html中用法
在HTML中,alert 通常与JavaScript一起使用,用于显示弹出框。
它有三种主要用法:
1、简单的弹出框:可以直接在JavaScript函数中使用alert("要输出的内容")。
这将显示一个包含指定内容的弹出框。
2、带选择的弹出框:可以使用confirm("继续吗") 来创建一个带有“确定”和“取消”选项的弹出框。
如果用户点击“确定”,函数将继续执行;如果用户点击“取消”,函数将停止执行。
3、能输入和输出的弹出框:使用prompt("请输入密码") 可以创建一个允许用户输入内容的弹出框。
用户输入的内容可以作为函数的返回值,然后可以用
alert(name) 显示出来。
还可以在prompt 的第一个参数后面添加第二个参数,作为输入框的默认值。
这些alert、confirm 和prompt 函数都是在浏览器端执行的,因此它们不会将任何数据发送到服务器。
纯前端实现⼀键⽣成⼆维码,打开新页⾯展⽰⼆维码(原来可以这么简单)前⾔:相信不少同学在实际⼯作中做项⽬的时候会遇到点击形成⼆维码,跳转新的页⾯展⽰⼆维码的项⽬需求。
解决问题的思路实际有很多种,今天笔者介绍⼀个简单实现的思路,供⼤家参考,实际实现这个⼩功能其实是特别简单的。
⼀ demo效果⼆思考如何让实现如何实现这个需求呢⾸先我们需要⽣成⼆维码,⽽且要打开⼀个新的页⾯展⽰,那么我们需要img标签来展⽰图⽚的载体,那么⽣成图⽚src必不可少的。
⽆论我们的项⽬是spa,还是多页⾯应⽤,我们这⾥都要⽤base64储存图⽚的信息。
所以需要把⽣成的⼆维码转化成base64。
接下来让我们整理⼀下思路。
梳理具体思路第⼀步:我们需要将⽬标⼆维码链接⽣成⼆维码。
第⼆步:将上⼀步⽣成的⼆维码转化成base64格式url,并保存url。
第三步:打开新页⾯,获取保存的url,展⽰⽣成的⼆维码。
1 引⼊arale-qrcode库⾸先我们需要将连接绘制成⼆维码,那么我在这⾥给⼤家推荐⼀个形成⼆维码的库arale-qrcode。
它可以根据传⼊的⼆维码链接⽣成svg或table 形式的dom节点。
import AraleQRCode from 'arale-qrcode'const result = new AraleQRCode({render: "svg", /* ⽣成的类型 'svg' or 'table dom元素类型 */text:'https://juejin.im/post/6895011670301605896', /* ⼆维码的链接*/size: 100 /* ⼆维码的⼤⼩ */})console.log(result)我们看看AraleQRCode把⼆维码链接变成了什么东西。
没错,AraleQRCode把我们的⼆维码变成了,真是的dom的节点,如果是在当前页⾯展⽰,现在已经满⾜需求了,然⽽这不是我们想要的,因为我们的要在新的页⾯中展⽰⽣成的⼆维码。
组策略以及来宾用户权限的设置我都是用组策略来实现这个目的的具体用法如下(简单的)Windows 2000/XP/2003 组策略控制台如果是Windows 2000/XP/2003 系统,那么系统默认已经安装了组策略程序,在“开始”菜单中,单击“运行”命令项,输入gpedit.msc 并确定,即可运行程序。
使用上面的方法,打开的组策略对象就是当前的计算机,而如果需要配置其他的计算机组策略对象的话,则需要将组策略作为独立的控制台管理程序来打开,具体步骤如下:1)打开Microsoft 管理控制台(可在“开始”菜单的“运行”对话框中直接输入MMC 并回车,运行控制台程序)。
2)在“文件”菜单上,单击“添加/删除管理单元”。
3)在“独立”选项卡上,单击“添加”。
4)在“可用的独立管理单元”对话框中,单击“组策略”,然后单击“添加”。
5)在“选择组策略对象”对话框中,单击“本地计算机”编辑本地计算机对象,或通过单击“浏览”查找所需的组策略对象。
6)单击“完成”,单击“关闭”,然后单击“确定”。
组策略管理单元即打开要编辑的组策略对象。
对于不包含域的计算机系统来说,在上面第5 步的界面中,只有“计算机”标签,而没有其他标签项目。
通过上面的方法,我们就可以使用Windows 2000/XP/2003 组策略系统强大的网络配置功能,让管理员的工作更轻松和高效。
在上面我们介绍了Windows 9X下的策略编辑器配置项目有“选中、清除、变灰”三种状态,Windows 2000/XP/2003 组策略管理控制台同样也有三种状态,只不过名字变了。
它们分别是:已启用、未配置、已禁用。
四、“桌面”设置Windows的桌面就像我们的办公桌一样,需要经常进行整理和清洁,而组策略就如同我们的贴身秘书,让桌面管理工作变得易如反掌。
下面就让我们来看看几个实用的配置实例:位置:“组策略控制台→用户配置→管理模板→桌面”1.隐藏桌面的系统图标(Windows 2000/XP/2003)虽然通过修改注册表的方式可以实现隐藏桌面上的系统图标的功能,但这样比较麻烦,也有一定的风险。
Test 061.在指定页内超链接的时候,如果在某一个位置使用了<a name ="target1">锚点</a>语句定义了锚点,那么应使用以下语句,以便在单击超链接时跳转到锚点定义的位置:<a href= “# target1 >锚点链接</a>2.在指定锚点超链接的时候,如果在文件file1.htm某一个位置使用了<a name="target1">锚点</a>语句定义了锚点,那么应使用以下语句,以便在file2.htm 中单击超链接时跳转到file1.htm中该锚点定义的位置:<a href= file1.htm# target1 >锚点链接</a>3.一个超级链接链接的地址为:this.html#x11,其中x11是this.html页中的某个锚点。
T (判断对错,若对请标“T”,若错请标“F”)4.<a href=″#hlj″>黑龙江</a>的作用是。
A.超级链接到黑龙江网页上B.超级链接到本文件中hlj标记处C.超级链接暂时不被运行D.超级链接到#hlj网页上5.在框架式网页中添加超级链接时,对象的“target ”属性分别表示的意思正确的是:ABC (多选)A._blank 在新窗口打开网页B._parent 在父框架窗口打开网页C._self 在本窗口打开网页D.以上都不正确6.在HTML文档中使用有序列表应使用()标记A.<ul> B.<ol> C.<dl> D.<li>7.能够链接到当前文档某个位置的链接类型是。
A.锚链接 B.链接到电子邮件 C.链接到文档 D.链接到脚本8.创建空链接使用的符号是。
A.@B.#C.&D.*9.在设置超级链接时,如果希望在一个新浏览器窗口中载入所链接的文档,则设置链接的target属性值为。
1 2 3 4 5 6self.location.href;//当前页⾯打开URL页⾯window.location.href;//当前页⾯打开URL页⾯this.location.href;//当前页⾯打开URL页⾯location.href;// 当前页⾯打开URL页⾯parent.location.href;//在⽗页⾯打开新页⾯top.location.href;//在顶层页⾯打开新页⾯1 2 3 4 5<form id="form1"action=""><div><strong>这是a.html页⾯<strong><iframe src="b.html"width="500px"height="300px"></iframe> </strong></strong></div> </form><pre>1 2<span>这是b.html</span><span id="span1"></span><br/> <iframe src="c.html"width="500px"height="300px"></iframe>1 2<span><strong>这是c.html:<strong></span><span id="span1"></span><br/> <iframe src="d.html"width="500px"height="300px"></iframe>1 2 3<span>这是d.html:</span><span id="span1"></span><br/> <input type='button'onclick='jump();'value='跳转'><iframe src="d.html"width="500px"height="300px"></iframe>1 2 3 4 5 6 7 8 9 10<strong>function jump(){//经测试:window.location.href与location.href,self.location.href,location.href都是本页⾯跳转//作⽤⼀样window.location.href="";//location.href="";//self.location.href="";//this.location.href="";//location.href="";} </strong>1 2function jump(){window.location.href和window.open的⼏种⽤法和区别使⽤js的同学⼀定知道js的location.href的作⽤是什么,但是在js中关于location.href的⽤法究竟有哪⼏种,究竟有哪些区别,估计很多⼈都不知道了。
《网页制作》理论试题及答案一、单选题1.当测览器不能正常显示图像时,会在图像的位置显示的内容__A__。
A.替代B.目标C.地图D.低品质源2.将超链接的目标网页在当前窗口中打开的方式是__D___。
A.parentB._blankC._topD._self3.当网页既设置了背景图像又设置了背景色,那么__A__。
A.以背景图像为主B.以背景色为主C.产生--种混合效果D.冲突,不能同时设置4.在页面属性对话框中,我们不能设置__C___。
A.网页的背景色B.网页文本的颜色C.网页文本的大小D.网页的边界5.在文本的属性面板中,不能设置___D__ 。
A.文字的大小和颜色B.加粗或倾斜风格C.文字的超链接D.矩形热区6.下列路径中属于绝对路径的是___A___ 。
B./xuesheng/chengji/mingci.htmC. address.htmD. staff/telephone.htm7.DreamweaverMX可以导入的表格式数据的格式是___C___。
A.Excel格式B.Word格式C.文本格式D.任意格式8.要一次选择整个行,在标签检查器中选择___B___ 标签。
A.tableB.trC.tdD.tp9.指定表格内单元格之间的间隙大小,需要设置表格属性面板中的___B___。
10.如果层中的图片太大,要设置超出部分照样显示,则"溢出"选项中应选择__A___ 。
A.visibIeB.hiddenC.scrolID.auto11.不论层中的内容是否超出,都显示滚动条,则"溢出"选项中应选择 ___C____ 。
A.visibleB.hiddenC.scrollD.auto12.利用键盘方向键移动层时,一次按键只能移动 ___A___ px。
A.lB.2C.3D.413.层的对齐万式"设成宽度相同"的含义是__B___ 。
【最基本的弹出窗口代码】其实代码非常简单:<SCRIPT LANGUAGE="javascript"><!--window.open ('page.html')--></SCRIPT>因为这是一段javascript代码,所以它们应该放在<SC RIPT LANGUA GE ="ja vascript">标签和</script>之间。
<!--和-->是对一些版本低的浏览器起作用,在这些老浏览器中如果不支持ja vascript,不会将标签中的代码作为文本显示出来。
Window.open ('pa ge.html')用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。
用单引号和双引号都可以,只是不要混用。
这一段代码可以加入HT ML的任意位置,加入到<head>和</hea d>之间也可以,位置越靠前执行越早,尤其是页面代码较长时,又想使页面早点弹出就尽量往前放。
【经过设置后的弹出窗口】下面再说一说弹出窗口外观的设置。
只要再往上面的代码中加一点东西就可以了。
我们来定制这个弹出窗口的外观、尺寸大小、弹出位置以适应该页面的具体情况。
<SCRIPT LANGUAGE="javascript:><!--window.open ('page.html','new window','height=100,width=400,top=0,left=0,toolbar=no,menuba r=no,scrollbars=no,resizable=no,location=no,status=no')//写成一行--></SCRIPT>参数解释:<SCRIPT LANGUAGE="javascript"> js脚本开始;window.open 弹出新窗口的命令;page.html 弹出新窗口的文件名;newwindow 弹出窗口的名字(不是文件名),可用空″代替;height=100 窗口高度;top=0 窗口距离屏幕上方的像素值;left=0 窗口距离屏幕左侧的像素值;toolbar=no 是否显示工具栏,yes为显示;menubar,scrollbars 表示菜单栏和滚动栏;resizable=no 是否允许改变窗口大小,yes为允许;location=no 是否显示地址栏,yes为允许;status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;</SCRIPT> js脚本结束。
【用函数控制弹出窗口】下面是一个完整的代码。
<html><head><script LANGUA GE="javascript"><!--function openwin(){window.open("page.html","n ewwindow","height=100,width=400,toolbar=no,menuba r=no,scrollbars=no,resizable=no,location=no,status=no";)//写成一行}--></script></head><body onload="open win()">...任意的页面内容...</body></html>这里定义了一个函数openwin(),函数内容就是打开一个窗口。
在调用它之前没有任何用途。
怎么调用呢?方法一:<bod y onload="openwen()"> 浏览器读页面时弹出窗口;方法二:<bod y onunload="openwen()"> 浏览器离开页面时弹出窗口;方法三:用一个连接调用:<a href="#" onclick="open win()">打开一个窗口</a>注意:使用的"#"是虚连接。
方法四:用一个按钮调用:<input t ype="button" onclick="o penwin()" value="打开窗口">【主窗口打开文件1.htm,同时弹出小窗口p age.html】将如下代码加入主窗口<head>区:<script language="javascript"><!--function openwin(){window.open("page.html","","width=200,height=200" ;)}//--></script>加入<bod y>区:<a h ref="http://w " onclick="openwin()">open</a>即可。
【弹出的窗口之定时关闭控制】下面我们再对弹出窗口进行一些控制,效果就更好了。
如果我们再将一小段代码加入弹出的页面(注意是加入到p age.html的HTML中,可不是主页面中,否则…),让它在10秒钟后自动关闭是不是更酷了?首先,将如下代码加入pag e.html文件的<head>区:<script language="javascript">function close it() {setTimeout("self.close()",10000) //毫秒}</script>然后,再用<bod y onload="closeit()">这一句话代替pa ge.html中原有的<B ODY>这一句就可以了。
(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。
)【在弹出窗口中加上一个关闭按钮】<form><INPUT TYPE='BUTTON' value='关闭' on Click='window.close()'></form>呵呵,现在更加完美了!原来的HT ML标准中可以用<a href="document.html" target="_blank"> 打开一个新窗口</a>但新的HT ML标准严格上是不允许的。
可以采用以下代码:<a href="document.html" rel="external">打开一个新窗口</a>javascript:function externallinks() {if (!document.getElementsByTagName) retu rn;var ancho rs = document.getElementsByTagNam e("a");for (var i=0; i<ancho rs.length; i++) {var ancho r = anchors[i];if (anchor.getAttribute("h ref") &&anchor.getAttribute("rel") == "exte rnal")anchor.target = "_blan k";}}window.onload = e xternallinks;参考资料:/a rticle/tips/2005/107.html我们在使用<a>标签时,常常会使用它的href属性为一段javasrcipt来实现某些功能。
比如关闭一个窗口:<a href="javascript:windows.close();">,或者弹出一个新的窗口<a href="javascript:windows.open('url');">。
这样来实现窗口的操作。
当然也有人会用onclick事件来实现打开或者关闭窗口<a href="#" onclick="windows.close();">, 打开新窗口<a href="#" onclick="windows.open(url);">。
那么他们之间到底有什么区别呢?下面来好好分析一下<a href="javascript:windows.close();">关闭窗口时,浏览器不会弹出窗口关闭的对话框,而<a href="#" onclick="windows.close();">,浏览器就会弹出窗口关闭的对话框。
<a href="javascript:windows.open('url');">打开一个新的窗口时,会使原来的窗口发生页面回传,从而导致 css样式无效,如果是动态页面的话还可能导致页面变空白。
所以还是慎用这个方法。
<a href="#"onclick="windows.close();">,是完全在客户端执行的动作,页面不会产生回传,不会刷新页面。
<li onclick="javascript:window.open('')"> </li>。