示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<header>
<h1>网页头部</h1>
</header>
<section>
<h1>网页主体</h1>
</section>
<footer>
<h1>网页尾部</h1>
</footer>
</body>
</html>
运行结果:
iframe内联框架
先看一个引例
我们先在B站找一个自己喜欢的视频
我们把它粘贴到代码中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe src="//player.bilibili.com/player.html?aid=458958395&bvid=BV115411J7vq&cid=290037440&page=1" scrolling="no"
border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</body>
</html>
运行:
这个嵌入在网页中的画面就是内联框架
iframe
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
iframe内联框架
src: 地址
w-h: 宽高
iframe 和 a 标签联合使用可以实现在页面内跳转
-->
<iframe src="" name="hello" frameborder="1px" width="1000px" height="600px"></iframe>
<a href="https:www.baidu.com" target="hello">点击跳转</a>
</body>
</html>
运行结果: