a标签和iframe的使用

最新推荐文章于 2024-09-11 21:57:53 发布

KBkongbaiKB

最新推荐文章于 2024-09-11 21:57:53 发布

阅读量1.5k

点赞数 19

文章标签： dubbo

本文链接：https://blog.csdn.net/KBkongbaiKB/article/details/136161085

版权

本文详细介绍了HTML中a标签的href、target和锚点功能，以及iframe的src、frameborder、width和height属性，展示了如何通过a标签在iframe中定向跳转。还讨论了iframe用于创建嵌套窗口的场景及其应用实例。

摘要由CSDN通过智能技术生成

首先，我们要了解a标签和iframe的作用：

a标签

超链接 href ：指定页面资源路径，网洛资源，本地资源 <a href="http://www.baidu.com">跳转到百度</a>

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

a标签锚点 name ：设置锚点名称 <a name="top">顶部</a> <a herf="#top">跳转到顶部</a>

框架元素 iframe

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

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

width ：设置嵌套窗口宽度

height ：设置嵌套窗口高度

name ：设置嵌套窗口名称

我们来依次讲解：

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

但是如果你这样写： <a href="https://www.baidu.com/" target="_blank"></a>，那么它将会打开一个新窗口：

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

iframe的基本格式如下：<iframe src="" width="" height="" name=""></iframe>

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

在这里面，width="" height=""是规定打开页面的框的大小。代码如下：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

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