HTML5 之 Frame Frameset Noframes 标签

概述

frame 可定义特定区域，用于显示HTML文档。

HTML5已废弃，不再支持frame，但是当前仍有一部分浏览器支持。

frame为块级双标签，只能作为frameset子元素，无法单独使用。

常用属性如下。

src：指定显示的HTML文档
name：为frame添加标识，若未指定标识，所有链接将在其所在的frame打开
noresize：禁止改变区域大小

<!DOCTYPE html>
<html lang="en"><frameset rows='10%, *'><frame src='header.html'></frame><frameset cols='30%, *'><frame src='aside.html'></frame><frame src='content.html'></frame></frameset>
</frameset></html>

一般的frame是可拖动的，指定noresize将禁止拖动。

scrolling：浏览器会根据frame内容决定放置滚动条，scrolling="no"表示强制关闭滚动条，scrolling="yes"表示强制开启滚动条
marginheight：指定frame区域上下外边距

// index.html
<frameset rows='10%, *'><frame src='header.html'></frame><frameset cols='30%, *'><frame src='aside.html'></frame><frame src='content.html' marginheight='50px'></frame></frameset>
</frameset>// content.html
<!DOCTYPE html>
<html lang="en"><body>content
</body></html>

index.html控制台可查看到content.html内body含上下外边距。

marginwidth：指定frame区域左右外边距
frameborder：是否显示frame周围的边框，默认显示，frameborder="0"表示关闭边框，frameborder="1"表示开启边框

frameset

frameset 用于包含frame元素。

frameset为块级双标签，HTML5已废弃，不再支持frameset，当前仍有一部分浏览器支持。

常用属性如下。

cols：指定frame列数和尺寸，尺寸可指定px、%和*，其中*表示页面剩余的尺寸
rows：指定frame行数和尺寸

<frameset rows="*, *"><frame src="header.html"></frame><frameset cols="10%, 80%, *"><frame src="aside.html"></frame><frame src="content.html"></frame><frame src="aside.html"></frame></frameset>
</frameset>

其中frameset是支持嵌套的。

noframes

noframes 与noscript元素类似，用于在不支持frame的浏览器显示。

HTML5不支持，但是大部分浏览器可用。

<frameset><frame src="content.html" /><noframes><p>It seems your browser does not support frames.</p></noframes>
</frameset>

应用

三标签配合可以实现一个简单的后台系统。

页面布局如下，其中右侧部分的frame需指定name="content"标识，且默认显示user.html页面，aside.html内a链接的target则需要为content。

// index.html
<!DOCTYPE html>
<html lang="en"><frameset rows='10%, *'><frame src="header.html" /><frameset cols='30%, *'><frame src="aside.html" /><frame name='content' src='user.html' /></frameset><noframes><p>It seems your browser does not support frames.</p></noframes>
</frameset></html>// header.html
<!DOCTYPE html>
<html lang="en"><body><p>欢迎进入人员管理系统！！！</p>
</body></html>// aside.html
<!DOCTYPE html>
<html lang="en"><body><ul><li><a href="user.html" target="content">人员管理</a></li><li><a href="leave.html" target="content">请假管理</a></li><li><a href="live.html" target="content">住宿管理</a></li></ul>
</body></html>

左侧路由页面如下。

// user.html
<!DOCTYPE html>
<html lang="en"><body>user
</body></html>// leave.html
<!DOCTYPE html>
<html lang="en"><body>leave
</body></html>// live.html
<!DOCTYPE html>
<html lang="en"><body>live
</body></html>

HTML5 之 Frame Frameset Noframes 标签相关推荐

html5实现frame效果,html5 frameset标签的替代方案是什么
摘要腾兴网为您分享:html5 frameset标签的替代方案是什么,优酷,校讯通,小米手环,我的世界等软件知识,以及亚马逊手机端,帮5淘,安全一点通,安信证券软件,微信骰子表情包gif,兄弟706 ...
web前端入门到实战：HTML5新增和废弃的标签
一.废弃的标签以下的 HTML 4.01 元素在HTML5中已经被删除,虽然浏览器为了兼容性考虑都还支持这些标签,但建议使用新的替代标签,矛盾的是老浏览器对新标签的支持度又不够,视项目的受众对象而定 ...
html方法介绍,html中noframes标签的使用方法介绍
html中noframes标签的使用方法介绍发布时间:2020-04-17 09:35:28 来源:亿速云阅读:672 作者:小新这篇文章主要为大家详细介绍了html中noframes标签的使用 ...
frame/frameset/iframe的区别
框架概念 : 所谓框架便是网页画面分成几个框窗,同时取得多个 URL.只需要 <FRAMESET> <FRAME> ...
java_web1:基本标签、form表单、frameset框架标签、CSS样式、javascript、servlet
前端三剑客: html,css,js(javascript) html: Hyper Text Markup Language:超文本标记语言针对字体,图片,视频,音频等等进行操作,设置字体颜色,大 ...
HTML5学习之语义化标签
一.为什么HTML5要引入新语义标签在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
html5语义化编程,HTML5常用的语义化标签
本文将为您描述HTML5常用的语义化标签,具体实现方法:快速查询 article | aside | nav | section | header | footer 架构预览 nav定义导航链接的部分 ...
html5中figure怎么用,HTML5中figure和figcaption标签用法
HTML5中figure和figcaption标签一般都是配套使用的,先了解下两者的基本定义,然后结合实例来说明两者的用法. 标签规定独立的流内容(图像.图表.照片.代码等等). figure元素的内 ...
html5标签云,TagCanvas - HTML5 Canvas技术开发的标签云动画
TagCanvas 是一个基于HTML5Canvas技术开发的标签云动画.还提供一个以jQuery插件形式实现的版本.它支持文本和图片两种格式,能够以 Sphere, hcylinder 或 vcy ...

HTML5 之 Frame Frameset Noframes 标签

概述

frameset

noframes

应用

HTML5 之 Frame Frameset Noframes 标签相关推荐

最新文章

热门文章

HTML5 之 Frame Frameset Noframes 标签

概述

frameset

noframes

应用

insertAdIfNeeded();

HTML5 之 Frame Frameset Noframes 标签相关推荐

最新文章

热门文章