HTML页面结构分析和iframe内联框架

在这里插入图片描述
示例:

<!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>

运行结果:
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/I_r_o_n_M_a_n/article/details/114155442