软件测试工程师之必备html知识，框架的设计
框架和表单设计：
什么是框架：将浏览器划分为不同的部位，每一部分加载不同的网页，实现同一个浏览器窗口加载多个页面的效果
注意：写的位置在body的上面部位，如果写在body里面，是不能运行的，放在body外面都可以运行
同时，frame标记必须要放在frameset 里面
例子：左中右是cols 如果是上中下 就是 rows，一个浏览器实现打开3个页面的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架</title>
</head>
<frameset cols="25%,25%,50%">
<frame src="http://www.baidu.com" />
<frame src="http://www.taobao.com" />
<frame src="http://www.jingdong.com" />
</frameset>
<body>
</body>
</html>
执行效果如图所示：
frame必须要写在frameset里面，分成几份，写几个frame
通过框架的方式实现以下界面，将页面分成3分，上面一份，下面两份，如图：
1：分成3份
2：点击公司简介，右边出来对应的内容
代码如下：需要创建3个html界面，左边的 左边html /右边的 右边html/第三章html
主页面代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<frameset rows="20%,*" frameborder="yes" border="1">
<frame src="logo.html"/>
<frameset cols="20%,*">
<frame src="左边.html" />
<frame src="右边.html" name="mainframe" noresize= "size" scrolling="no">
</frameset>
</frameset>
<body>
</body>
</html>
注意：noresize 表示不能调整框架大小，没有设置时，就可以调整的
scrolling 表示是否需要滚动条
name 框架名称，是链接标记的target所要的参数
左边html：
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="https://www.baidu.com/" target="mainframe">百度</a><br />
<a href="https://www.taobao.com/" target="mainframe">淘宝</a><br />
<a href="https://www.jd.com/" target="mainframe">京东</a><br />
<a href="注册.html" target="_parent">登陆</a><br />
<a href="登陆.html" target="_blank">注册</a><br />
</body>
</html>
注意：mainframe是别名：
右边的html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>主要内容</h1>
</body>
</html>
iframe 可以在body里面写，也可以在body外面写，三个页面
页面1：test05-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我是页面1</h1>
<iframe src="test05-2.html" width="1000"height="1000"></iframe>
</body>
<!--
作者：offline
时间：2018-06-14
描述：iframe 可以在body里面写，也可以在body外面写
-->
</html>
页面2：test05-2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我是页面2</h1>
<iframe src="test05-3.html"></iframe>
</body>
</html>
页面3：test05-3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我是<a href="http://www.zongheng.com/" target="_parent">页面</a>3</h1>
</body>
</html>
运行结果如下：
点击页面链接，进入页面2，如图