一、本节目标
- 了解网页布局结构
- 掌握HTML5结构元素的使用
二、页面布局分析
整个页面包括以下几个部分：页面头部，页面主题，页面底部。
HTML5的结构元素
结构元素
三、iframe内联框架
3.1示例一
语法：<iframe src="https://www.baidu.com/" name="myFrame"></iframe>
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="https://www.baidu.com/" name="myFrame"></iframe>
</body>
</html>
结果：
image.png
3.2示例二
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p><a href="https://www.baidu.com/" target="mainFrame">百度</a></p>
<p><a href="https://www.zhihu.com/compatibility/index.html#signin" target="mainFrame">知乎</a></p>
<iframe name="mainFrame"></iframe>
</body>
</html>
结果如下：
image.png
分析；当点击一个超链接的时候，如果target属性的值是自己设置的，则就会先去检测本页面的符合该名字的内联框架，然后在这个框架的内部显示。
