HTML框架(frameset)和内嵌(iframe)

一.框架

(frameset)
1.用<frameset></frameset>代替了<body></body>
2.rows设置行的占页面的百分比;cols设置列的所占百分比;*表示剩余的百分比;frameborder设置框架的边框(取值0/1)0–不显示边框1–在每个页面之间都显示边框;bordercolor设置边框颜色;framespacing表示框架与框架间保留的空白距离。
3.noresize设置禁止用户拖拉框架大小;scrolling设置滚动条是否显示;src路径连接到内容页面
4.用法例:
例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
    <frameset rows="30%,*,10%" frameborder="1"  bordercolor="blue" framespacing="10">
    	<frame src="02.html" noresize="noresize" scrolling="no" />
    	<frameset cols="20%,70%,*">
    		<frame src="03.html" />
    		<frame src="01.html" noresize="noresize" scrolling="no"/>
    		<frame src="index.html" noresize="noresize" scrolling="no"/>
    	</frameset>	
    	<frame src="03.html" noresize="noresize" scrolling="no"/>
    </frameset>
</html>

二.内嵌
例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/01.css"/>
	</head>
	<body>
		<h1 align="center">个人简历</h1><!--标题-->
		<form><!--表单-->
		<table border="1" cellspacing="0" cellpadding="0" align="center"><!--表格-->
		<tr align="center">
			<td>姓名</td>
			<td><input type="text" placeholder="觅知网"/></td><!--placeholder设置提示-->
			<td>出生年月</td>
			<td><input type="text"placeholder="1996.05"/></td>
			<td rowspan="4">
				<div id="div1"><img src="img/希望.jpg" width="180" height="90"/></div></td>
		</tr><!--img插入图片-->
		<tr align="center">
			<td>名族</td>
			<td><input type="text"placeholder="汉"/></td>
			<td>政治面貌</td>
			<td><input type="text" placeholder="中共党员"/></td>
		</tr>
		<tr align="center">
			<td>电话</td>
			<td><input type="tel" name="tel" maxlength="11" placeholder="13500135000"/></td>
			<td>毕业院校</td>
			<td><input type="text" placeholder="广州科技大学"/></td>
		</tr>
		<tr align="center">
			<td>邮箱</td>
			<td><input type="email" placeholder="[email protected]"/></td>
			<td>学历</td>
			<td><input type="text" placeholder="专科"/></td>
		</tr>
		<tr align="center">
			<td>地址</td>
			<td colspan="4"><iframe src="dizhi.html" noresize="noresize" scrolling="no" width="600" height="30" frameborder="0"></iframe></td>
		</tr><!--iframe内嵌一个文件到单元格之中-->
		<tr align="center">
			<td>求职意向</td>
			<td colspan="4"><iframe src="qiuzhiyixiang.html" noresize="noresize" scrolling="no" width="600" height="30" frameborder="0"></iframe></td>
		</tr><!--noresize="noresize"用户无法改动拖拉边框大小-->
		<tr>
			<td>教育背景</td>
			<td colspan="4"><iframe src="jiaoyubeijing.html" noresize="noresize" scrolling="no" width="600" height="80"frameborder="0"></iframe></td>
		</tr><!--scrolling="no"设置滚动条不显示-->
		<tr>
			<td>实习经历</td>
			<td colspan="4"><iframe src="shixijingli.html"noresize="noresize" scrolling="no" width="600" height="140"frameborder="0"></iframe></td>
		</tr><!--frameborder="0"设置无边框-->
		<tr>
			<td>校内实践</td>
			<td colspan="4"><iframe src="xiaoneishijian.html" noresize="noresize" scrolling="no" width="600" height="140"frameborder="0"></iframe></td>
		</tr>
		<tr>
			<td>技能证书</td>
			<td colspan="4"><iframe src="jinengzhengshu.html"noresize="noresize" scrolling="no" width="600" height="60"frameborder="0"></iframe></td>
		</tr>
		<tr>
			<td>自我评价</td>
			<td colspan="4"><iframe src="ziwopingjia.html"noresize="noresize" scrolling="no" width="600" height="50"frameborder="0"></iframe></td>
		</tr>
		</table>
		</form>
	</body>	
</html>

在这里插入图片描述
注释:iframe可以设置宽width和高height

猜你喜欢

转载自blog.csdn.net/qq_43434300/article/details/83548336