标签介绍
内联框架只有一个标签<iframe>
iframe.src
:嵌入一个页面的URL
iframe.srcdoc
:嵌入html代码
iframe.name
:嵌入页面上下文,可以与以下两个标签属性绑定
a.target
:点击链接会在指定的框架窗口中打开input/button.formtarget
:与上面功能一样
下面的内容前期使用,学会css之后可使用css进行实现。
iframe.width
:设置框架宽度,默认300px
iframe.heiget
:设置框架高度,默认150px
iframe.frameborder
:设置框架边框
用内联框架简单写一个后台
由于没有使用css所以页面会很丑~
<!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>
成品演示
![图片[1]-内联框架的简单练手-在线源码网](https://cdn.zaixym.com/2023/01/20230119124026677.png)
感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容