• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html5 frameset标签的替代方案是什么?frameset标签替代的解决办法

html5 frameset标签的替代方案是什么?frameset标签替代的解决办法

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含frameset,html5等相关知识,匿名希望在学习及工作中可以帮助到您
本篇文章主要的介绍了关于html5 frameset标签的替代方案实例解析,还有关于html5 frameset标签的两个解决办法,现在让我们一起来看这篇文章吧

首先我们先看看html5 frameset标签的替代方案是什么:

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

下面是在Visual Studio中对FrameSet与Frame的警告提示:

警告 验证 (XHTML 1.0 Transitional): 不支持元素“frameset”。

警告 验证 (XHTML 1.0 Transitional): 不支持元素“frame”。

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

<div id="navigation">
<!--其中可以用asp.net中的TreeView,Menu等菜单控件或者用HTML的<u><li>标记配合CSS,配置菜单可以在DataBase中动态读取或者在
XML中配置-->
</div>
<div id="content">
<iframe id="contentIFrame" name="Content" src="XMLDataBinding.aspx" scrolling="no" frameborder="0"
onload="this.height=this.contentWindow.document.body.scrollHeight+5;this.width=this.contentWindow.document
.body.scrollWidth+5;" />
</div>

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

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

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

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

看看关于frameset标签的代码实例说明:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>div+css实现frameset效果</title>
        <style type="text/css">.header{border-bottom:1px solid #ccc;margin-bottom:5px;}
        .MainContainer{min-width:960px;max-width:1600px;}
        .sidebar{width:180px;float:left;margin-right:-180px;border-right:1px solid #ccc;min-height:500px;
        padding:5px;}.main{float:left;margin-left:200px;padding:5px;}
        .content{padding:0 10px;}
        </style>
    </head>
    <body>    
    <div class="page"><div class="header"><div id="title">
        <h1>顶部</h1>
        </div></div>
        <div class="MainContainer"><div class="sidebar">边栏</div>
        <div id="main" class="main">内容</div></div>
    </div>
    </body>
</html>

上文代码运行效果如下:

tuyi.png

以上就是本篇关于HTML5 frameset标签的替代方案,还有替代后的解决办法实例解析。有问题的可以在下方提问

【小编推荐】

HTML5 meter标签什么意思?meter标签的用法详解

html中的注释怎么写?html中的注释符号又是什么?(附实例)

以上就是html5 frameset标签的替代方案是什么?frameset标签替代的解决办法的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • HTML5不支持frameset的两种解决方法
  • html5 frameset标签的替代方案是什么?frameset标签替代的解决办法
  • HTML5不支持frameset的两种解决方法

相关文章

  • 2018-12-03JsChart的组件使用详解
  • 2017-08-06HTML5 canvas实现雪花飘落特效
  • 2017-08-06Html5实现二维码扫描并解析
  • 2018-12-03如何配置H5的滚动条样式的代码
  • 2018-12-03利用HTML5与jQuery技术创建一个简单的自动表单完成
  • 2018-12-03前端必看H5 meta小结
  • 2018-12-03phonegap实现提示操作详解
  • 2018-12-03H5的LocalStorage本地存储使用详解
  • 2018-12-03HTML5 标签、事件句柄属性以及浏览器兼容情况速查手册
  • 2018-12-03女生学HTML5有何发展前途?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 在html文件引入其它html文件的几种方法
    • html5 canvas的绘制文本自动换行的示例代码
    • html5 canvas 画图教程案例分析
    • H5做视频直播
    • 网页中增加一个 div, 怎样估算它的内存占用?
    • HTML5 video 视频标签使用介绍
    • 突袭HTML5之Javascript API扩展3—本地存储全新体验_html5教程技巧
    • HTML5.1中有哪些新特性?
    • 谷歌浏览器小字体处理方案即12px以下字体_html5教程技巧
    • HTML5必读书籍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有