• 技术文章 >web前端 >前端问答

    html5中marquee标签怎么用

    青灯夜游青灯夜游2022-08-25 17:51:20原创385

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

    大前端零基础入门到就业:进入学习

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

    在html中,marquee的意思为“滚动”。marquee 元素(<marquee>) 用来插入一段滚动的文字。

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

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

    marquee 滚动文字标签

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

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

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>marquee</title>
        </head>
    
        <body style="background: black;padding: 20px;">
            <marquee><span style="font-weight: bolder;font-size: 40px;color: white;">Welcom PHPCN!</span></marquee>
        </body>
    </html>

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

    1.gif

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

    direction 滚动方向属性

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

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>marquee</title>
            <style>
                body {
                    background: black;
                    padding: 20px;
                }
    
                marquee {
                    font-weight: bolder;
                    font-size: 40px;
                    color: white;
                }
            </style>
        </head>
    
        <body>
            <marquee direction="up">UP</marquee>
            <marquee direction="down">DOWN</marquee>
            <marquee direction="left">LEFT</marquee>
            <marquee direction="right">RIGHT</marquee>
        </body>
    
    </html>

    2.gif

    behavior 滚动方式属性

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

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>marquee</title>
            <style>
                body {
                    background: black;
                    padding: 20px;
                }
    
                marquee {
                    font-weight: bolder;
                    font-size: 40px;
                    color: white;
                }
            </style>
        </head>
    
        <body>
            <marquee behavior="scroll">scroll</marquee>
            <marquee behavior="slide">slide</marquee>
            <marquee behavior="alternate">alternate</marquee>
        </body>
    
    </html>

    3.gif

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

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

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>marquee</title>
            <style>
                body {
                    background: black;
                    padding: 20px;
                }
    
                marquee {
                    font-weight: bolder;
                    font-size: 40px;
                    color: white;
                }
            </style>
        </head>
    
        <body>
            <marquee scrolldelay="800" scrollamount="100">Welcom PHPCN!</marquee>
        </body>
    
    </html>

    4.gif

    loop 滚动循环属性

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

    示例如下:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>marquee</title>
            <style>
                body {
                    background: black;
                    padding: 20px;
                }
    
                marquee {
                    font-weight: bolder;
                    font-size: 40px;
                    color: white;
                }
            </style>
        </head>
    
        <body>
            <marquee loop="2">Welcom CSDN!</marquee>
        </body>
    
    </html>

    5.gif

    (学习视频分享:web前端入门

    以上就是html5中marquee标签怎么用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:html5 html
    上一篇:web前端中的web是什么意思 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• JavaScript HTML DOM导航(总结分享)• 聊聊webpack中怎么压缩打包html资源• html5的pc端是什么• vue属于html5吗• mp3格式不是html5支持的音频格式
    1/1

    PHP中文网