关于HTML拓展标签iframe和marquee

236 阅读3分钟

1、iframe:浮动框架

浮动框架(iframe)是一种HTML元素,作用是用于在网页中嵌入其他网页或文档,也可以在小窗口中显示不同的网页。它可以创建一个包含另一个网页的独立窗口,并在主页面中显示。通过使用浮动框架,可以在一个页面中同时显示多个不同来源的内容,如嵌入地图、视频、广告或其他网站的内容。

<iframe src="https://www.mi.com/shop" width="800" height="500"></iframe>

屏幕截图 2023-08-18 152031.png

上面的代码将在页面中创建一个宽度为800像素、高度为500像素的浮动框架,并且将"www.mi.com/shop" 小米的网页嵌入其中,效果图如图所示。通过指定src属性,可以指定要嵌入的网址或文档的URL。

    <iframe src="https://www.mi.com/shop" width="500" height="500"></iframe>
    <iframe src="https://www.lenovo.com.cn/" width="500" height="500"></iframe>

需要注意的是,由于安全性问题,浏览器可能会限制某些特殊网址的嵌入。此外,使用浮动框架时应该考虑页面布局和用户体验,确保嵌入的内容不会影响整体页面的加载速度和可用性。

2、marquee:跑马灯标签

跑马灯标签(marquee)是一种HTML元素,用于创建在网页中水平滚动的文本或图像效果。它可以让内容以连续滚动的方式在页面上显示,类似于跑马灯效果。 使用marquee标签可以创建跑马灯效果,例如:

<marquee behavior="scroll" direction="left">这是一个跑马灯效果的文本</marquee>

上面的代码将在页面上创建一个向左滚动的跑马灯效果,其中的文本内容是“这是一个跑马灯效果的文本”。通过指定behavior属性为"scroll",direction属性为"left",可以控制滚动的行为和方向。

下面介绍marquee属性:

1.behavior 设置文本在 marquee 元素内如何滚动 参数值有:alternate(表示文字来回滚动)、scroll(单方向循环滚动)、slide(只滚动一次)。需要注意的是:如果在标签中同时出现了direction和behavior属性,那么scroll和slide的滚动方向将依照direction属性中参数的设置。

2.bgcolor 通过颜色名称或十六进制值设置背景颜色,这是一个红色的展示效果

屏幕截图 2023-08-18 162327.png

3.direction 设置 marquee 内文本滚动的方向可选值:left,right,up,down(默认值为left)

4.height 以像素或百分比值设置高度

5.hspace 设置水平边距

6.loop 设置 marquee 滚动的次数,默认值为 −1,表示 marquee 将连续滚动

7.scrollamount 设置每次滚动时移动的长度(以像素为单位),默认值为 6

8.scrolldelay 设置每次滚动时的时间间隔(以毫秒为单位)默认值为 85

9.truespeed 默认情况下,会忽略小于60的scrolldelay值,如果存在truespeed,那些值不会被忽略

10.vspace 以像素或百分比值设置垂直边距

11.width 以像素或百分比值设置宽度

需要注意的是,marquee标签在HTML5中已被废弃,不再被推荐使用。这是因为跑马灯效果往往会干扰用户的浏览体验,并且对可访问性和可用性也有一定影响。如果需要实现类似的滚动效果,建议使用CSS动画或JavaScript来实现,以提供更好的控制和用户体验。