HTML-iframe标签_<li> <a> <href='html iframe-优快云博客

本文链接：https://blog.youkuaiyun.com/Kilig___/article/details/109022055

本文详细介绍了HTML中的iframe标签的基本使用方法及进阶技巧，包括如何在页面中嵌入其他页面、设置iframe名称以便作为目标窗口接收链接跳转等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iframe标签

iframe基本操作
进阶操作

iframe基本操作

概念： 在页面上开辟一个小区域显示一个单独的页面（本例为HTML页面之间的相互调用）
代码及解析：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是iframe</title>
</head>
<body>
<h2 align = "center">
    我是一个单独完整的界面
</h2>
<iframe src="table.html" wedith = "500" height="400"></iframe>
<iframe src="test1.html" wedith = "500" height="400"></iframe>
<iframe src="../test2.html" wedith = "500" height="400"></iframe>
<iframe src="../demo1.html" wedith = "500" height="400"></iframe>
</body>
</html>

运行界面如下（注意调用文件之间的相互位置）：
在这里插入图片描述

其中要注意文件见调用的相互关系
.代表当前目录
..代表上一级目录
以此类推

进阶操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe-demo2</title>
</head>
<body>
<iframe src="table.html" wedith = "500" height="400" name = "name1"></iframe>
<ul>                                                <!--ul表示无序列表-->
    <li><a href="iframe-demo1.html" target="name1">iframe-demo1.html</a>   </li>
    <li><a href="iframe-demo2.html" target="name1">iframe-demo2.html</a>   </li>
    <li><a href="table.html" target="name1">table.html</a>   </li>
    <li><a href="test1.html" target="name1">test1.html</a>   </li>
    <li><a href="../demo1.html" target="name1">demo1.html</a>   </li>
    <li><a href="../test2.html" target="name1">test2.html.html</a>   </li>
</ul>
</body>
</html>

运行结果
在这里插入图片描述
代码解析

1、ul使文本显示为无序列表
2、<li><a href="iframe-demo1.html" target="name1">iframe-demo1.html</a>   </li>
 其中herf是文件路径（相对路径）target为要显示的目标窗口