转载

html中frameset、frame、iframe框架用法小结

本文总结html中与框架相关的三个标签frameset、frame、iframe的用法，下面是一些简单的代码示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>      <head>          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">          <title>测试</title>      </head>         <frameset cols="25%,50%,25%">             <frame src="http://www.baidu.com/" noresize="noresize" />             <frameset rows="25%,50%,*">                 <frame src="http://www.admin5.com/" />                 <frame src="http://www.hand-china.com/" />                 <frame src="http://yedward.net/" />             </frameset>             <frame src="http://yedward.net/" />             <noframes>                 <body>您的浏览器无法处理框架</body>             </noframes>         </frameset> </html>

注意，frameset不能和body在一起用。另外，如果浏览器不支持frameset、frame、iframe等标签，建议加上noframes标签，显示提示用户的内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>      <head>          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">          <title>测试</title>          <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css">         <script type="text/javascript" src="ext4/ext-all.js"></script>     </head>          <frameset cols="10%,*" rows="100%">             <frame src="navi.html" noresize="noresize" />             <frame src="content.html" name="content"/>             <noframes>                 <body>您的浏览器无法处理框架！</body>             </noframes>          </frameset> </html>

下面是各个页面：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>navi.html</title> </head> <body>     <ul>         <li><a href="http://www.baidu.com/" target="content">百度</a></li>         <li><a href="http://www.qq.com/" target="content">腾讯</a></li>     </ul> </body> </html>

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>content.html</title> <style type="text/css"> html, body {     margin : 0;     width : 100%;     height : 100%; } </style> </head> <body>     <iframe src="http://yedward.net/" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe> </body> </html>

注意使用iframe的时候，想要height="100%"生效，需要设置它的父容器的height="100%"，否则会有问题！

原文 http://blogread.cn/it/article/7707?f=hot1

正文到此结束