8.内联框架-HTML基础
2020-10-07 本文已影响0人
見贤思齊_
一、iframe标签
在
HTML中，我们可使用iframe标签来创建包含另外一个文档的内嵌框架（即行内框架、内联框架）。
1.何为内嵌框架?
内嵌框架就是在当前页面再嵌入另外一个网页。
2.语法格式
<iframe src='链接页面地址' width='数值' height='数值'></iframe>
（1）说明
src必选属性，用于定义链接页面的地址。
- width、height：可选属性，，分别用于定义框架的宽度、高度。
（2）示例
① 例1-嵌入一个页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>内嵌框架</title>
</head>
<body>
<iframe src='https://www.jianshu.com/p/8a24f0ea7161' width='666' height='361'></iframe>
</body>
</html>
iframe标签示例1.png
可以看到，
iframe标签功能就是让当前页面嵌入另外一个页面。
② 例2-嵌入多个页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>内嵌框架</title>
</head>
<body>
<iframe src='https://www.jianshu.com/p/8a24f0ea7161' width='666' height='361'></iframe>
<iframe src='https://www.jianshu.com/p/0fa294fbb778' width='666' height='361'></iframe>
</body>
</html>
iframe标签示例2.png
例1我们嵌入了一个页面，我又尝试嵌入多个页面，也是可以实现的。
所以说，
iframe标签不仅可以让当前页面嵌入一个页面，也可以嵌入多个页面。
3.语义化
其实涉及内嵌框架的标签还有 frameset、frame，但这些在
HTML5标准中已被舍弃。对于内嵌（内联）框架，只需掌握
iframe标签标签即可。此外，在
HTML5标准中iframe标签还被赋予了很多新的定义，自己一定要去看看。
