HTML中的框架允许我们在一个浏览器窗口中显示多个不同的HTML文档页面。

《前端开发从零学起》HTML中的框架
框架可以让某个HTML文档显示在另一个HTML文档中,并且这个HTML文档可以加载多个HTML文档。一般框架多数使用在网站后台中,用于在一个页面中显示多个功能块,并且在点击面板菜单时,不影响菜单页面的显示。
最后,如果大家如果在自学遇到困难,想找一个前端的学习环境,可以加入我们的前端学习圈,点击我加入吧,会节约很多时间,减少很多在学习中遇到的难题。
图片描述
框架的使用方法

框架主要有两种类型,分别为iframe和frameset两种。

两种的主要区别在于:iframe 也成为内联框架,是在html页面内嵌入连接另一个页面,一般多使用iframe框架,frameset 在一个页面中设置一个或多个框架 不能嵌套在body标签里,应用较少。

iframe的使用方法为:<iframe src="xxx.html"></iframe>
通过设定src的值来为iframe指定其加载的页面。

iframe的可用的属性为:

《前端开发从零学起》HTML中的框架
frameset 的使用方法为:

<frameset>
<frame src="a.html"></frame>
<frame src="b.html"></frame>
</frameset>
framset以开始标签与结束标签定义框架的显示区域。通过在区域内设置farme标签的src来定义每个子框架显示的页面。需要注意的是,frameset标签只能用于框架性页面布局,不能使用在body标签内。

frameset可以使用的属性为:

《前端开发从零学起》HTML中的框架
下面的实例中,通过框架加载百度的首页。并且在点击框架中的页面时不会刷新整个页面,而是在框架中刷新内容。(由于在前端开发中frameset不能插入在body标签中,因此本文只演示ifarme框架)

《前端开发从零学起》HTML中的框架
使用框架的注意事项

使用框架时,需要维护多个HTML目标文档
如果框架中的HTML文档有可见边框,用户可以拖动边框来改变框架的大小。但是如果不希望用户改变框大小,可以在frame标签中加入noresize="noresize"
需要为不支持框架的浏览器添加 <noframes> 标签。
不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用
假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内
无法被搜索引擎良好的读取与爬行,对搜索引擎不友好
结语:框架多数情况下用于网站后台的管理页面开发,其页面的独立性可以在用户点击菜单时只改变部分页面的内容而不影响菜单的点击状态。不过在某些情况下,也可以用于前台页面的。例如:加载广告、处理某些幻灯片造成的JS冲突(将页面js与内容拆分为两个页面,解决冲突问题)调用其他站点的某些功能等。


前端技术栈
66 声望11 粉丝