内联框架的简单练手 - html学习

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发 UI设计计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

内联框架介绍

内联框架只有一个标签<iframe>
iframe.src：嵌入一个页面的URL
iframe.srcdoc：嵌入html代码
iframe.name：嵌入页面上下文，可以与以下两个标签属性绑定
a.target：点击链接会在指定的框架窗口中打开
input/button.formtarget：与上面功能一样
iframe.width：设置框架宽度，默认300px
iframe.heiget：设置框架高度，默认150px
iframe.frameborder:设置框架边框

一个简单的后台

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>iframe标签和元素优先级</title>
  </head>
  <body>
    <!-- 用iframe写一个简单的后台框架 -->
    <!-- 页面头部 -->
    <header>
      <div class="head">
        <!-- 一个logo -->
        <h1>后台管理系统<small>V1.0</small></h1>
        <!-- 用户昵称 -->
        <b>昊森</b>
        <!-- 退出按钮 -->
        <button>退出</button>
      </div>
    </header>
    <!-- 页面侧边栏-->
    <nav>
      <div class="nav">
        <a href="">首页</a>
        <a href="https://zaixym.com/" target="id">在线源码网</a>
        <a href="https://zaixym.com/wxym" target="id">微信源码</a>
        <a href="https://zaixym.com/bjjc" target="id">笔记教程</a>
      </div>
    </nav>
    <!-- 页面主体 -->
    <div class="boy">
      <figure>
        <iframe
          srcdoc="<h1>我是后台首页</h1>"
          frameborder="0"
          name="id"
          width="500"
          height="800"
        ></iframe>
      </figure>
    </div>
  </body>
</html>