iframe内联框架 html5

72 阅读 0 评论 48 点赞

我是靠谱客的博主大意路灯，最近开发中收集的这篇文章主要介绍iframe内联框架 html5，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

学习要点：

iframe元素用来在文档中添加一个内联框架

为body的子元素，必须在body中使用。

例：

添加一个百度的内联框架,点击京东会变成京东页面。

综合举例效果如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
<title>内联框架和综合实例</title>
<meta charset="utf-8">
<style type="text/css">
li{
text-align: center;
}
</style>
</head>
<body style="background-color: blue;margin: 0px">
<table style="height: 650px;width: 1340px;background-color: green;">
<tr><td colspan="3" style="background-color: lightcoral;text-align:center;height:10%;color: blue;font-size: 19px">
内联框架举例
</td></tr>
<tr><ul style="list-style-type: none"><td rowspan="3" style="background-color: cornsilk;width: 15%">
<li><a href="1.html" target="myframe" target="myframe"><img src="image/he.jpg" style="width:20%;height:20%"><br>智障网</a><br>
<br><li><a href="http://www.baidu.com" target="myframe"><img src="image/baidu.png" style="width:20%;height:20%"><br>百度网</a><br>
<br><li><a href="http://www.jd.com" target="myframe"><img src="image/jd.png" style="width:20%;height:20%"><br>京东网</a><br>
<br><li><a href="http://z.firefox.com.cn/2013/" target="myframe"><img src="image/hh.png" style="width:20%;height:20%"><br>火狐网</a><br>
</ul></tr>
<tr><td colspan="3" rowspan="3"><iframe src="http://www.baidu.com" style="width: 100%;height: 100%" name="myframe"></iframe></td></tr>
<tr><td></td></tr>
<!--<caption style="background-color: darkgray">内联框架举例</caption>-->
<!--<a href="1.html" target="myframe">大傻子网</a><br>-->
</table>
</body>
</html>