HTML 框架[frame&iframe]
2017-08-17 23:23
381 查看
框架简介
HTML框架用于在一个窗口中显示多个页面,包括frame(框架)与iframe(内联框架)。窗口中每个HTML页面称为一个框架,且每个框架相互独立,互不影响。框架使用
<frame>
<frame>标签通过src元素的属性值定义框架中放置的HTML页面,可为相对地址或URL。hint:<frame>不能与<body>同时出现。
<iframe>
<iframe>内联框架,用法基本与<frame>相似,区别在于,<iframe>可作为嵌套与<body>中的标签使用。可通过CSS修改height、width等参数值。例:
<body bgcolor="red"> <h1>I am the left one</h1> <iframe src="https://www.baidu.com/"></iframe> </body>
<frameset>
<frameset>为框架结构标签,定义如何定位框架。frame_set顾名思义为框架的集合(包括内联框架),存放框架集。可通过修改frameset中cols或rows元素的属性值,设置框架的垂直或水平布局,以及每个框架所占用的比例大小。
noresize 一般情况下,用户可通过移动框架边框拉伸框架大小。为避免这种情况,可设置frame中noresize的属性固定框架大小。
<frameset cols="35%,65%"> <frame name="index" src="left.html" noresize="noresize"></frame> <frame name="content" src="right.html"></frame> </frameset>
例,可拉伸的垂直分布的两个框架,左右各占页面35%、65%。(将65%替换为*,将得到同样效果)
<!DOCTYPE html> <html> <head> <title>the left one</title> </head> <frameset cols="35%,65%"> <frame name="index" src="left.html"></frame> <frame name="content" src="right.html"></frame> </frameset> </html>
框架优缺点
优点:可以利用框架制作导航栏
重载时只需重载页面中某框架,不需要对整个页面进行重载,减少了数据的传输,提高了网页的下载速度
把页面的JS独立隔离或者使用框架做一些跨域的Ajax请求
缺点:
开发人员必须同时跟踪更多的HTML文档
页面难以打印
多框架页面会增加服务器的http请求
多数小型移动设备无法完全显示多框架页面
事实上现在很多标准网页都不采用frame,除去以上几点原因外,当前frame的优点基本上都可使用Ajax实现。
相关文章推荐
- HTML中的Frame与Iframe框架属性
- HTML 学习笔记(二)frameset、frame、iframe、#……id、.……class、<link rel=……、url("……")
- HTML中<a>标签的target属性--在使用frame框架做网页时可用到
- html框架之iframe和frame及frameset的相关属性介绍
- html框架之iframe和frame及frameset的相关属性介绍
- html Frame、Iframe、Frameset 的区别
- html的内联框架iframe
- 浏览器IFrame出Refused to display 'URL' in a frame because it set 'X-Frame-Options' to 'DENY' 的错
- HTML <table> 标签的 frame 属性
- X-Frame-Options头未设置 防止网页被iframe内框架调用
- html基础 frameset 将网页分割成左右形,框架网页。 为frame添加name属性,超链接在同网页中指定的frame中显示
- html Frame、Iframe、Frameset 的区别
- HTML <iframe> 标签
- HTML&&CSS基础框架
- frameset, iframe, frame框架页面出现横向滚动条bug的隐藏方法
- 【css与html】iframe框架代码
- <pre>标记、表格标记、html表单标记、插入Flash、框架技术
- html悬浮框架的设置使用示例(iframe加载html)
- html&css基础框架
- javascript访问frame,iframe框架和href的定向