简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页> web前端> 前端问答> 正文

html5中marquee标签怎么用

青灯夜游
发布： 2022-08-25 17:51:20
原创
2148 人浏览过

在html5中，marquee标签用于创建滚动文本或图像，语法“ 文本或图像 )”；它可以让包含于标签对中的内容在网页上水平或垂直向下滚动，通过设置属性可以控制当文本到达容器边缘发生的事情，例如behavior属性可以控制滚动方式（循环滚动、只滚动一次就停止和来回交替滚动）。

html5中marquee标签怎么用

本教程操作环境：windows7系统、HTML5版、Dell G3电脑。

在html中，marquee的意思为“滚动”。marquee 元素（ ） 用来插入一段滚动的文字。

标签成对出现。内容写在开始 ( ) 和结束 ( ) 标记之间。

该标签用于使文本或图像在网页上水平或垂直向下滚动。你可以使用它的属性控制当文本到达容器边缘发生的事情。

marquee 滚动文字标签

在一个页面中会有很多多媒体元素，比如动态文字、动态图象、音视频等，而最简单的就是天价滚动文字了，在HTML中，如果我们想要添加滚动文字，需要使用marquee标签。

我们先来看一下最简单的示例：

    marquee 
  Welcom PHPCN!
登录后复制

为了显示效果更明显，这里将页面背景设置为黑色，将滚动文字设置为白色，显示效果如图：

1.gif

这样我们就实现了一个最简单的滚动文字，在滚动文字中还有一些属性用于控制滚动方向、滚动速度等，下面我们就来看一下几个比较常用的属性。

direction 滚动方向属性

默认情况下，文字从右向左滚动，实际应用中，我们可能需要改变方向，就可以通过该属性来设置，该属性可用值有：up，down，left，right，分别表示向上、向下、向左和向右滚动。
示例如下：

    marquee  
  UP DOWN LEFT RIGHT
登录后复制

2.gif

behavior 滚动方式属性

通过behavior 可以设置滚动方式，如往复运动等。behavior可用值有：scroll，slide，alternate，分别表示循环滚动、只滚动一次就停止和来回交替滚动。
示例如下：

    marquee  
  scroll slide alternate
登录后复制

3.gif

scrolldelay 滚动延迟属性与scrollamount 滚动速度属性

通过scrolldelay属性可以设置文字滚动的时间间隔。scrolldelay 的时间间隔单位是毫秒，这一时间间隔设置为滚动两步之间的时间间隔，如果时间过长，则会出现走走停停的效果。
scrollamount 用于设置滚动的步长。
示例如下：

    marquee  
  Welcom PHPCN!
登录后复制

4.gif

loop 滚动循环属性

如果我们希望文字滚动几次后停止，就可以使用loop属性。

示例如下：

    marquee  
  Welcom CSDN!
登录后复制

5.gif

（学习视频分享：web前端入门）

以上是html5中marquee标签怎么用的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
html html5
来源：php.cn
上一篇：web前端中的web是什么意思 下一篇：CSS a是行内元素吗
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
如何使用Javascript设置HTML5的required属性？ 我正在尝试在Javascript中将text输入框标记为必需。
来自于 2023-10-13 08:52:25
0
2
317
无法获取鼠标准确坐标的问题：在调整页面大小时使用HTML5画布 我想从前端专家那里创建这个像素效果。虽然我能够在全屏画布上实现整个像素效果：constcanvas=getElementById('canvas');canvas.height=w...
来自于 2023-09-12 12:20:33
0
1
280
使用Base64编码的HTML5视频M3U8 我想在HTML5的Video标签中添加一个base64编码的M3U8文件，我该怎么做
来自于 2023-09-09 23:07:18
0
1
247
vue.js / bootstrap：未调用 onclick 事件方法，错误'找不到变量：updateDocument” 我是前端开发新手，但对HTML5、CSS和Javascript有基本了解。我创建了一个vue.js项目并添加了bootstrap和axios。我的应用程序加载数据并显示它们。但是，...
来自于 2023-09-09 20:06:48
0
1
362
XHTML中移除图像标签中的闭合斜杠'/' 我有一个存储图像的字符串txt1。它的值是XHTML格式，即元素已关闭：。但我需要删除该关闭斜杠，因此它可以是就像HTML5中一样。有没有办法做到这一点。
来自于 2023-09-06 12:15:38
0
1
240
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！