8.内联框架-HTML基础

作者: 見贤思齊_ | 来源:发表于2020-10-07 08:54 被阅读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标签还被赋予了很多新的定义,自己一定要去看看。

    相关文章

      网友评论

        本文标题:8.内联框架-HTML基础

        本文链接:https://www.haomeiwen.com/subject/ogtfpktx.html