a标签打开iframe(a标签 iframe)

a标签打开iframe(a标签 iframe)p 首先 我们要了解 a 标签和 iframe 的作用 p a 标签 超链接 href 指定页面资源路径 网洛资源 本地资源 lt a href http www baidu com gt 跳转到百度 lt a gt target

大家好,我是讯享网,很高兴认识大家。



 <p>首先&#xff0c;我们要了解a标签和iframe的作用&#xff1a;</p> 

讯享网

a标签

超链接 href :指定页面资源路径,网洛资源,本地资源 &lt;a href=“http://www.baidu.com&#34;&gt;跳转到百度&lt;/a&gt;

target :设置页面打开的方式 _self(默认,本窗口),_blank(新窗口),_top(顶级窗口),_parent(父级窗口),自定义窗口 &lt;a href=”http://www.baidu.com" target=“_self”&gt;跳转到百度&lt;/a&gt;

a标签 锚点 name :设置锚点名称 &lt;a name=“top”&gt;顶部&lt;/a&gt; &lt;a herf=“#top”&gt;跳转到顶部&lt;/a&gt;

框架元素 iframe

        src :设置嵌套窗口打开的页面资源路径

        frameborder :设置嵌套窗口边框是否显示

        width :设置嵌套窗口宽度

        height :设置嵌套窗口高度

        name :设置嵌套窗口名称

            &lt;iframe src=“text2.html” frameborder=“0” width=“100%” height=“500px” name=“gs”&gt;&lt;/iframe&gt;

 我们来依次讲解:

a标签的作用是你可以通过它跳转到你所想要的页面,其基本格式为:&lt;a href=“” target=“”&gt;&lt;/a&gt;,其中href=“”内存放的是你所想要跳转的页面的地址,比如,当你向通过点击跳转到百度页面时,你可以这样写:&lt;a href=“https://www.baidu.com/&#34;&gt;&lt;/a&gt;&#xff0c;这样&#xff0c;当你点击到该处时&#xff0c;你将进入百度的页面。target&#61;&#34;&#34;的作用则是规定你打开页面的方式&#xff0c;如果你这样写&#xff1a; &lt;a href=”https://www.baidu.com/" target=“”&gt;&lt;/a&gt;,那么它将在本窗口打开你所想跳转的页面:


讯享网

 

但是如果你这样写: &lt;a href=“https://www.baidu.com/" target=”_blank“&gt;&lt;/a&gt;,那么它将会打开一个新窗口:

如果你想本页面的一个小窗口打开自己想要的页面,那么就要用到iframe。

iframe的基本格式如下:&lt;iframe src=”“ width=”“ height=”“ name=”“&gt;&lt;/iframe&gt; 

我们先来介绍name=”“,它的作用是将iframe和a标签进行绑定,就像前面几章所讲的css选择器一样,你要先给标签命名,css才能通过命名找到对应的标签,这也是相同的原理,你要给iframe命名,a标签才能知道在哪个iframe所规定的小框内打开。所以我们就可以这样写:

 &lt;a href=”https://www.baidu.com/" target=“wcy”&gt;&lt;/a&gt;

&lt;iframe src=“” width=“” height=“” name=“wcy”&gt;&lt;/iframe&gt; 

在这里面,width=“” height=“”是规定打开页面的框的大小。代码如下:

&lt;!DOCTYPE html&gt;

&lt;html lang=“en”&gt;

&lt;head&gt;

    &lt;meta charset=“UTF-8”&gt;

    &lt;meta name=“viewport” content=“width=device-width, initial-scale=1.0”&gt;

    &lt;title&gt;Document&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

    &lt;a href=“https://www.baidu.com/" target=”wcy“&gt;1&lt;/a&gt;

    &lt;iframe src=”“ width=”100%“ height=”500px“ name=”wcy“&gt;&lt;/iframe&gt;

&lt;/body&gt;

&lt;/html&gt;

这个代码表示的是,当你点击a标签的内容“1”时,a标签通过target=”wcy“找到了对应的iframe,iframe是一个width=”100%“ height=”500px“的小框,所以a标签对应的路径href=”https://www.baidu.com/"将会在iframe的小框内打开。效果如下:

那么这个时候就会有人问了,“哎呀为什么不显示百度的页面啊”,这是因为其工作人员的为了别人通过这种方式来盗用自己的页面而做出的防治措施,你可以换换其他的页面来进行尝试。

 iframe中的src=“”则是设置一开始iframe框中的页面,比如,当src=“”为空时,

iframe内部是没有任何内容的,只有当你点击“1”后才能在iframe框中打开百度的页面,但是如果 src=“https://www.jd.com/?cu=true&utm_source=haosou-search&utm_medium=cpc&utm_campaign=t__haosousearch&utm_term=_0_3d1e3a682bcf4acd859dacb0f"

那么一开始它就会显示京东的页面,然后当你点击“1”时,它才会打开百度的页面


小讯
上一篇 2025-05-26 13:00
下一篇 2025-05-14 11:40

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/188912.html