前端知识的总结＜iframe＞框架与＜marquee＞标签

最新推荐文章于 2024-03-24 19:44:07 发布

尽欢_han

最新推荐文章于 2024-03-24 19:44:07 发布

阅读量323

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_71972062/article/details/132301992

版权

<iframe>

由于frame框架对页面可用性存在负面影响，因此在HTML5中不在支持frame框架，但是支持iframe框架。所以H5中废弃了frame框架的<frameset> <frame> <noframes>。

而其他被废弃的标签还有以下几种：

被废弃的标签                 替代的标签
<bgsound>                   <audio>

<marquee>                   js代码实现

<applet>                    <embed>和<object>

<rb>                        <ruby>

<acronym>                   <abbr>

<dir>                       <ul>

<isindex>                   <form>和<input>集合

<listing>                   <pre>

<xmp>                       <code>

<nextid>                    GUIDS

<plaintext>                 "text/plain" MIME 类型

HTML 内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。我们来做一个例子：

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        iframe {
            border: 1px solid black;
            /* 显示宽度设置为百分百 */
            width: 100%; 
        }       

    </style>
</head>
<body>
    <iframe
        id="iframe"
        title="iframe"
        width="300"
        height="200"
        /* 链接地址 */
        src="https://www.taobao.com">
</iframe>

</body>
</html>

以下为运行结果：

注意：页面上的每个<iframe>都需要增加内存和其他计算资源，这是因为每个浏览上下文都拥有完整的文档环境。虽然理论上来说你能够在代码中写出来无限多的<iframe>，但是你最好还是先看看这么做会不会导致某些性能问题。

属性

该元素包含全局属性。

allow：

用于为<iframe>指定其特征策略

allowfullscreen：

设置为true时，可以通过调用 <iframe> 的 requestFullscreen() 方法激活全屏模式。ps; 这是一个历史遗留属性，已经被重新定义为 allow="fullscreen"。

allowpaymentrequest:

设置为true时，跨域的 <iframe> 就可以调用 Payment Request API\ps： 这是一个历史遗留属性，已经被重新定义为 allow="payment".

csp 实验性:

对嵌入的资源配置内容安全策略。查看 HTMLIFrameElement.csp (en-US) 获取详情。

height:

以 CSS 像素格式，或像素格式，或百分比格式指定 frame 的高度。默认值为150。

high：

资源的加载优先级较高

name：

用于定位嵌入的浏览上下文的名称。该名称可以用作 <a> 标签与 <form> 标签的 target 属性值，也可以用作 <input> 标签和 <button> 标签的 formtarget 属性值，还可以用作 window.open() 方法的 windowName 参数值。

referrerpolicy：

表示在获取 iframe 资源时如何发送 referrer 首部

sandbox：

该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。属性值可以为空字符串（这种情况下会启用所有限制），也可以是用空格分隔的一系列指定的字符串。

src:

被嵌套的页面的 URL 地址。

width:

以 CSS 像素格式，或以像素格式，或以百分比格式指定的 frame 的宽度。默认值是300。

不赞成使用的属性

下面这些属性已不赞成使用，并且可能不再被所有的浏览器支持。你应避免在新项目里面使用它们，也应尽量从旧项目中移除它们。

align 已弃用：此元素相对于周围元素的对齐方式。

frameborder 已弃用：值为1（默认值）时，显示此框架的边框。值为0时移除边框。此属性已不赞成使用，请使用 CSS 属性 border代替。

marginheight 已弃用：这个属性定义了框架的内容距其上边框与下边框的距离，单位是像素。

marginwidth 已弃用：这个属性定义了框架的内容距其左边框和右边框的距离，单位是像素。

scrolling 已弃用：这个属性控制是否要在框架内显示滚动条，允许的值包括：

auto: 仅当框架的内容超出框架的范围时显示滚动条。
yes: 始终显示滚动条。
no: 从不显示滚动条。

<maruee>

marquee简介

<marquee>标签,是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。<marquee>标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它们都是可选的。

ps:marguee已弃用： 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；

<marquee>例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <marquee>从右到左</marquee>
    <marquee direction="up">从下到上</marquee>
    <marquee
        direction="down"
        width="250"
        height="200"
        behavior="alternate"
        style="border:solid">
        <marquee behavior="alternate"> 左右上下浮动 </marquee>
    </marquee>

</body>
</html>

运行结果如下：