Html框架标签
特点：框架标签可以将页面分成不同的部分
frameset 框架集合，里面可以包含多个部分（frame frameset）
属性
rows 设置行信息
cols 设置列信息
frame 代表页面的某一个部分
src 设置这一部分页面要展示的html页面
name 给这一部分起个名字
例：使用框架同时展示四个网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset cols="50%,50%" rows="50%,50%"> <!--*通配符-->
<frame src="A.html" name="aa"><!--设置自己框架页面中frame标签的name属性值，代表的是在指定部分打开页面-->
<frame src="biaogetext.html" />
<frame src="ittext.html" />
<frame src="B.html" name="bb">
</frameset>
</html>
1.jpg
如何将超链接的目标网站转移至你所需要的那个框架网页中去呢？
将框架name属性设置好，然后再讲<a>标签的target属性设置成和框架name属性相同就好了
内联框架<iframe>
内联框架可以将一个网页嵌套在另一个网页里面
<iframe src="//www.baidu.com" width="100%" height="400px" scrolling="auto" name="zhongzhuan" >
<p>您的浏览器不支持 iframe 标签。</p>
</iframe>
下面放上一个本人经过三天学习做出来的简陋网页，关于html各个方面基本都用上了.
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="UTF-8">
<title>任地狱的个人空间</title>
<style type="text/css">
table{
border-color: white;
}
a{color: white}
a:hover{color: green}
.color_white{color:white} <!-- 使用css 设置div属性-->
.color_red{color:red}
.divherf1 a{ color: white ;text-decoration: none}
.divherf1 a:hover{color:green ;text-decoration: none}
.divherf1 {color: white}
body{
background: black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
background-repeat:repeat-x;
}
</style>
</head>
<body>
<div class="color_white" >
<table border="1px" bordercolor="white" width="90%" align="center">
<tr>
<td >
<h1 align="center">任地狱的个人空间</h1>
</td>
</tr>
<tr height="30px" align="right">
<td >
<table>
<tr>
<td><a > <img src="imgx/login.jpg" height="30px"></a></td>
<td><a href="网站注册页面.html" target="zhongzhuan"> <img src="imgx/register.jpg" height="30px"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div class="divherf1" >
<table border="1px" bordercolor="white" align="center">
<tr >
<td style="padding-left: 50px;"><a href="https://space.bilibili.com/7535069" target="zhongzhuan" title="www.bilibili.com/7535069">我的B站空间</a></td>
<td style="padding-left:50px; "><a href="rizhi.html" target="zhongzhuan">日志</a></td>
<td style="padding-left:50px; "><a href="../../../../HTML/HTMLtext/gonglue.html" target="zhongzhuan">攻略</a></td>
<td style="padding-left:50px; "><a href="../../../../HTML/HTMLtext/youxituijian.html" target="zhongzhuan">游戏推荐</a></td>
<td style="padding-right: 20px;"><a href="http://baidu.com" target="zhongzhuan"> <img width="200" height="150px" src="img/1.jpg" alt="万能的度娘" /></a></td>
</tr>
</table></div>
</td>
</tr>
<tr>
<td>
<iframe src="//www.baidu.com" width="100%" height="400px" scrolling="auto" name="zhongzhuan" >
<p>您的浏览器不支持 iframe 标签。</p>
</iframe>
</td>
</tr>
<tr height="20px">
<td >
强烈推荐下饭集锦
</td>
</tr>
<tr>
<td>
<div class="divherf1">
<table border="1px" bordercolor="white">
<tr >
<td width="180" height="105">
<a href="https://www.bilibili.com/video/av72051084" target="zhongzhuan"><img src="imgx/天生我司.jpg" width="100%"></a>
</td>
<td width="180" height="105">
<a href="https://www.bilibili.com/video/av69488665"target="zhongzhuan"><img src="imgx/otto1.jpg" width="100%"></a>
</td>
<td width="180" height="105">
<a href="https://www.bilibili.com/video/av68993745"target="zhongzhuan"><img src="imgx/停杯投箸.jpg" width="100%"></a>
</td>
<td width="180" height="105">
<a href="https://www.bilibili.com/video/av61663158"target="zhongzhuan"><img src="imgx/jubaoxia.jpg" width="100%"></a>
</td>
</tr>
<tr>
<td>
<a href="https://www.bilibili.com/video/av69488665" target="zhongzhuan"><center><font size="2">天生我司必有用,<br /> 饭香散尽还复来！</font></center></a>
</td>
<td>
<center><font size="2">保护我方OTTO</font></center>
</td>
<td>
<center><font size="2">停杯投箸不能食,<br /> 打开手机看大司！</font></center>
</td>
<td>
<center><font size="2">JUBAOXIA</font></center>
</td>
</tr>
</table>
</div>
</td>
</tr>
<form class="评论" method="get" action="http://baidu.com">
<tr>
<td>
请输入你的评论<input name="评论" /> <button height="100%" type="submit" class="评论" >提交</button ><br />
</td>
</tr>
<tr>
<td>
<table border="1px">
<tr>
<td align="center"><label><img src="imgx/王司徒给力.gif"><input type="radio"name="评价" value="好评" /></label></td>
<td align="center"><label><img src="imgx/石化王司徒.gif"><input type="radio"name="评价" value="差评" /></label></td>
</tr>
<tr>
<td align="center"><font size="2">给力点赞</font></td>
<td align="center">我惊了</td>
</tr>
</table>
</td>
</tr>
</form>
<tr>
<td>
</td>
</tr>
</table>
</div>
</body>
</html>
网友评论