html5中marquee標(biāo)簽如何用

本篇內(nèi)容介紹了“html5中marquee標(biāo)簽如何用”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

10年積累的網(wǎng)站設(shè)計、做網(wǎng)站經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有貢山免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

在html5中，marquee標(biāo)簽用于創(chuàng)建滾動文本或圖像，語法“<marquee 屬性>文本或圖像</marquee>)”；它可以讓包含于標(biāo)簽對中的內(nèi)容在網(wǎng)頁上水平或垂直向下滾動，通過設(shè)置屬性可以控制當(dāng)文本到達(dá)容器邊緣發(fā)生的事情，例如behavior屬性可以控制滾動方式（循環(huán)滾動、只滾動一次就停止和來回交替滾動）。

如何快速入門VUE3.0：進(jìn)入學(xué)習(xí)

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

在html中，marquee的意思為“滾動”。marquee 元素（<marquee>） 用來插入一段滾動的文字。

<marquee>標(biāo)簽成對出現(xiàn)。內(nèi)容寫在開始 (<marquee>) 和結(jié)束 (</marquee>) 標(biāo)記之間。

該標(biāo)簽用于使文本或圖像在網(wǎng)頁上水平或垂直向下滾動。你可以使用它的屬性控制當(dāng)文本到達(dá)容器邊緣發(fā)生的事情。

marquee 滾動文字標(biāo)簽

在一個頁面中會有很多多媒體元素，比如動態(tài)文字、動態(tài)圖象、音視頻等，而最簡單的就是天價滾動文字了，在HTML中，如果我們想要添加滾動文字，需要使用marquee標(biāo)簽。

我們先來看一下最簡單的示例：

<!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>

為了顯示效果更明顯，這里將頁面背景設(shè)置為黑色，將滾動文字設(shè)置為白色，顯示效果如圖：

html5中marquee標(biāo)簽如何用

這樣我們就實現(xiàn)了一個最簡單的滾動文字，在滾動文字中還有一些屬性用于控制滾動方向、滾動速度等，下面我們就來看一下幾個比較常用的屬性。

direction 滾動方向?qū)傩?/h4>

默認(rèn)情況下，文字從右向左滾動，實際應(yīng)用中，我們可能需要改變方向，就可以通過該屬性來設(shè)置，該屬性可用值有：up，down，left，right，分別表示向上、向下、向左和向右滾動。
示例如下：

<!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>

html5中marquee標(biāo)簽如何用

behavior 滾動方式屬性

通過behavior 可以設(shè)置滾動方式，如往復(fù)運動等。behavior可用值有：scroll，slide，alternate，分別表示循環(huán)滾動、只滾動一次就停止和來回交替滾動。
示例如下：

<!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>

html5中marquee標(biāo)簽如何用

scrolldelay 滾動延遲屬性與scrollamount 滾動速度屬性

通過scrolldelay屬性可以設(shè)置文字滾動的時間間隔。scrolldelay 的時間間隔單位是毫秒，這一時間間隔設(shè)置為滾動兩步之間的時間間隔，如果時間過長，則會出現(xiàn)走走停停的效果。
scrollamount 用于設(shè)置滾動的步長。
示例如下：

<!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>

html5中marquee標(biāo)簽如何用

loop 滾動循環(huán)屬性

如果我們希望文字滾動幾次后停止，就可以使用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>

html5中marquee標(biāo)簽如何用

“html5中marquee標(biāo)簽如何用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

分享名稱：html5中marquee標(biāo)簽如何用
當(dāng)前路徑：http://muchs.cn/article24/gpjgce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、建站公司、網(wǎng)站排名、定制開發(fā)、網(wǎng)站制作、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名