HTML - 10、框架标签

  HTML的<iframe>标签可以嵌入其他网页或内容，并结合超链接和表单的target属性来控制内容的显示。

1. <iframe> 标签

<iframe>（内嵌框架）标签用于在当前页面中嵌入另一个HTML页面或内容。它允许在一个独立的区域中显示外部内容，类似于一个小型的浏览器窗口。

常用属性

  • src：指定嵌入的内容的URL。
  • width 和 height：设置<iframe>的宽度和高度。
  • frameborder：设置边框样式，0表示无边框，1表示有边框。
  • name：为<iframe>设置一个名称，用于与超链接或表单的target属性配合使用。

2. 超链接与<iframe>结合

通过设置超链接的target属性为<iframe>的name，可以将点击链接后的内容加载到指定的<iframe>中。

代码示例

<a href="https://news.163.com" target="container">点我看网易新闻</a><br>
<a href="https://www.taobao.com" target="container">点我看淘宝</a><br>
<iframe name="container" frameborder="0" width="900" height="300"></iframe>
  • <a> 标签：
    • href属性指定链接地址。
    • target="container"属性指定链接内容加载到名为container的<iframe>中。
  • <iframe> 标签：
    • name="container"属性与超链接的target属性配合，指定内容加载的目标框架。
    • frameborder="0"属性设置无边框。
    • width和height属性设置框架的大小。

3. 表单与<iframe>结合

通过设置表单的target属性为<iframe>的name，可以将表单提交后的结果加载到指定的<iframe>中。

代码示例

<form action="https://so.toutiao.com/search" target="container">
    <input type="text" name="keyword">
    <input type="submit" value="搜索">
</form>
<iframe name="container" frameborder="0" width="900" height="300"></iframe>
  • <form> 标签：
    • action属性指定表单提交的地址。
    • target="container"属性指定表单提交后的结果加载到名为container的<iframe>中。
  • <input> 标签：
    • type="text"定义一个文本输入框，用于输入搜索关键词。
    • type="submit"定义一个提交按钮，用于触发表单提交。

4. 嵌入其他内容

<iframe>不仅可以嵌入网页，还可以嵌入其他类型的内容，如PPT文件。

代码示例

<iframe src="./resource/如何一夜暴富.pdf" frameborder="0" width="900" height="300"></iframe>
  • src属性：
    • 指定嵌入内容的路径，可以是本地文件路径或外部URL。
  • frameborder="0"：
    • 设置无边框。
  • width 和 height：
    • 设置<iframe>的宽度和高度。

完整代码解析

以下是完整的HTML代码，结合了超链接、表单和<iframe>的使用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>框架标签</title>
</head>
<body>
    <!-- 超链接与iframe结合 -->
    <a href="https://news.qq.com" target="container">点我看腾讯新闻</a><br>
    <a href="https://news.163.com" target="container">点我看网易新闻</a><br>
    <a href="https://www.taobao.com" target="container">点我看淘宝</a><br>

    <!-- 表单与iframe结合 -->
    <form action="https://so.toutiao.com/search" target="container">
        <input type="text" name="keyword">
        <input type="submit" value="搜索">
    </form>

    <!-- 嵌入内容的iframe -->
    <iframe name="container" frameborder="0" width="900" height="300"></iframe>

    <!-- 嵌入文件 -->
    <iframe src="./resource/如何一夜暴富.ppt" frameborder="0" width="900" height="300"></iframe>
    
</body>
</html>

总结

  • <iframe>：用于在当前页面中嵌入其他内容，如网页、PDF文件等。
  • target属性：与超链接和表单配合使用，指定内容加载到特定的<iframe>中。
  • 应用场景：
    • 嵌入外部网页或内容。
    • 实现页面内导航，避免页面跳转。
    • 嵌入本地文件（如PDF）。
posted @ 2025-02-18 14:56  别晃我的可乐  阅读(49)  评论(0)    收藏  举报
//雪花飘落效果 // 设置博客浏览器图标 Logo