Comment utiliser la balise de sélection en HTML5-Questions et réponses frontales-php.cn

Comment utiliser la balise de sélection en HTML5

青灯夜游

Libérer： 2022-08-25 17:51:20

original

2185 Les gens l'ont consulté

En HTML5, la balise marquee est utilisée pour créer du texte ou des images défilantes, la syntaxe "texte ou image)" elle permet de faire défiler le contenu contenu dans la paire de balises horizontalement ou horizontalement. sur la page Web Faites défiler verticalement vers le bas. En définissant des propriétés, vous pouvez contrôler ce qui se passe lorsque le texte atteint le bord du conteneur. Par exemple, la propriété de comportement peut contrôler la méthode de défilement (défilement cyclique, défilement une seule fois puis arrêt, et). défilement alterné d’avant en arrière).

Comment utiliser la balise de sélection en HTML5

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

En HTML, chapiteau signifie "défilement". L'élément marquee () permet d'insérer un texte défilant. Les balises

apparaissent par paires. Le contenu est écrit entre les balises d'ouverture () et de fermeture ().

Cette balise est utilisée pour faire défiler du texte ou des images vers le bas horizontalement ou verticalement sur une page Web. Vous pouvez utiliser ses propriétés pour contrôler ce qui se passe lorsque le texte atteint le bord du conteneur.

étiquette de texte défilant de marquee

Il y aura de nombreux éléments multimédias dans une page, tels que du texte dynamique, des images dynamiques, de l'audio et de la vidéo, etc., et le plus simple est un texte défilant très haut en HTML, si. nous voulons Pour ajouter du texte défilant, vous devez utiliser la balise marquee. 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>

Copier après la connexion

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

Comment utiliser la balise de sélection en HTML5

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

direction 滚动方向属性

默认情况下，文字从右向左滚动，实际应用中，我们可能需要改变方向，就可以通过该属性来设置，该属性可用值有：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>

Copier après la connexion

Comment utiliser la balise de sélection en HTML5

behavior 滚动方式属性

通过behavior 可以设置滚动方式，如往复运动等。behavior可用值有：scroll，slide，alternate
Jetons d'abord un coup d'œil à l'exemple le plus simple :

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

Copier après la connexion

Afin de rendre l'effet d'affichage plus évident, ici l'arrière-plan de la page est défini sur noir et le texte défilant est défini sur blanc. L'effet d'affichage est comme indiqué ci-dessous : Comment utiliser la balise de sélection en HTML5

Comment utiliser la balise de sélection en HTML5

Dans de cette façon, nous avons obtenu le texte de défilement le plus simple, certains attributs dans le texte de défilement sont utilisés pour contrôler la direction de défilement, la vitesse de défilement, etc. Jetons un coup d'œil à certains des attributs les plus couramment utilisés.

attribut de direction de défilement de direction

Par défaut, le texte défile de droite à gauche dans les applications réelles, nous devrons peut-être changer la direction, nous pouvons donc la définir via cet attribut. Les valeurs disponibles sont : up, down, left, right, qui représentent respectivement haut, bas, gauche et faites défiler vers la droite.
Un exemple est le suivant :

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

Copier après la connexion

attribut du mode de défilement du comportement

Grâce au comportement, vous pouvez définir le mode de défilement, tel qu'un mouvement alternatif, etc. Les valeurs disponibles pour le comportement sont : `scroll`, `slide` et `alternate`, qui représentent respectivement un défilement circulaire, un défilement une seule fois puis un arrêt, et défilement alterné d'avant en arrière. Les exemples sont les suivants :

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

Copier après la connexion

attribut de délai de défilement scrolldelay et attribut de vitesse de défilement scrollamount Comment utiliser la balise de sélection en HTML5

L'intervalle de temps pour le défilement du texte peut être défini via l'attribut scrolldelay. L'unité d'intervalle de temps de scrolldelay est la milliseconde. Cet intervalle de temps est défini comme l'intervalle de temps entre deux étapes de défilement. Si le temps est trop long, un effet stop-and-go se produira. scrollamount est utilisé pour définir la taille du pas de défilement. Un exemple est le suivant :

rrreee🎜🎜🎜🎜🎜loop Attribut de boucle de défilement🎜🎜🎜Si nous voulons que le texte arrête de défiler après quelques fois, nous pouvons utiliser l'attribut de boucle. 🎜🎜Les exemples sont les suivants : 🎜rrreee🎜🎜🎜🎜 (Partage de vidéos d'apprentissage : 🎜Début avec l'interface Web🎜)🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!