html5中如何替代框架标签 - 行业资讯 - 肥雀云

　　介绍

这篇文章将为大家详细讲解有关html5中如何替代框架标签,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<强>首先我们先看看html5框架标签的替代方案是什么:

页面尽量少用框架集不利于被搜索引擎搜索到。

下面是在Visual Studio中对框架与框架的警告提示:

警告,验证(XHTML 1.0过渡):不支持元素“框架集”。

警告,验证(XHTML 1.0过渡):不支持元素“帧”。

新的HTML标准已经不支持框架与框架元素,替代方式之一是用DIV配合IFrame与CSS替代框架集元素.IFrame根据不同的内容,高宽自适应其实很简单,但是很多人没有解决,其解决方法如下& lt;即在onLoad方法中设置其高与宽即可祝辞:

& lt; DIV id=皀avigation"比; 　　& lt; !——其中可以用asp.net中的TreeView,菜单等菜单控件或者用HTML的& lt;标签;& lt; li>标记配合CSS,配置菜单可以在数据库中动态读取或者在　　XML中配置——比; 　　& lt;/div> 　　& lt; div id=癱ontent"祝辞　　& lt; iframe id=癱ontentIFrame"name=癈ontent"src=https://www.yisu.com/zixun/盭MLDataBinding.aspx“滚动=安弧敝”咴?" 0 " 　　onload=" this.height=this.contentWindow.document.body.scrollHeight + 5;上this.contentWindow.document 　　.body.scrollWidth + 5;“/> 　　

这么使用是在网上看到的比较好的方案之一了。

<强>现在我们介绍下关于框架标签替代的解决办法: (html5不支持框架集的,所以解决方法有以下两种)

1。使用iframe,但是目前使用iframe的人已经越来越少了,而且iframe在不同浏览器之间还有不兼容的情况。

2。使用jQuery的onload方法加载页面,不过这种方法跳转多个页面后,点击浏览器上方的后退前进是无效的,不过可以认为的添加一个返回按钮,所以更流行的是这种方法:

<强>看看关于框架标签的代码实例说明:

& lt; !DOCTYPE HTML> 　　& lt; html> 　　& lt; head> 　　& lt;元http-equiv=癈ontent-Type"内容=皌ext/html;charset=utf-8"/比; 　　& lt; title> div + css实现框架集效果& lt;/title> 　　& lt;风格类型=拔谋?css"祝辞。标题{边界底部:1 px固体# ccc; margin-bottom: 5 px;} 　　.MainContainer {min-width: 960 px; max-width: 1600 px;} 　　.sidebar{宽度:180 px;浮动:左;margin-right: -180 px;边境:1 px固体# ccc;最小高度:500 px; 　　填充:5 px;} .main{浮动:左;margin-left: 200 px;填充:5 px;} 　　.content{填充:0 10 px;} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div类=皃age"祝辞& lt; div类=癶eader"祝辞& lt; div id=皌itle"比; 　　& lt; h2>顶部& lt;/h2> 　　& lt;/div> & lt;/div> 　　& lt; div类=癕ainContainer"祝辞& lt; div类=皊idebar"在边栏& lt;/div> 　　& lt; div id=癿ain"类=癿ain"祝辞内容& lt;/div> & lt;/div> 　　& lt;/div> 　　& lt;/body> 　　& lt;/html>

上文代码运行效果如下:

关于html5中如何替代框架标签就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。