前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >8.内联框架-HTML基础

8.内联框架-HTML基础

作者头像
见贤思齊
发布2020-10-10 16:08:42
1.6K0
发布2020-10-10 16:08:42
举报
文章被收录于专栏:初见Linux初见Linux

一、iframe标签

HTML中,我们可使用iframe标签来创建包含另外一个文档的内嵌框架(即行内框架、内联框架)

1.何为内嵌框架?

内嵌框架就是在当前页面再嵌入另外一个网页

2.语法格式

<iframe src='链接页面地址' width='数值' height='数值'></iframe>

(1)说明

  • src必选属性,用于定义链接页面的地址
  • width、height:可选属性,,分别用于定义框架的宽度、高度
(2)示例
① 例1-嵌入一个页面
代码语言:javascript
复制
<!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-嵌入多个页面
代码语言:javascript
复制
<!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标签还被赋予了很多新的定义,自己一定要去看看。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、iframe标签
    • 1.何为内嵌框架?
      • 2.语法格式
        • (1)说明
        • (2)示例
      • 3.语义化
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档