Home >Web Front-end >Front-end Q&A >How to use marquee tag in html5
How to use marquee tag in html5
- 青灯夜游Original
- 2022-08-25 17:51:202369browse
In HTML5, the marquee tag is used to create scrolling text or images, the syntax ")"; it allows the content contained in the tag pair to be Scroll down horizontally or vertically on a web page. By setting properties, you can control what happens when the text reaches the edge of the container. For example, the behavior property can control the scrolling method (cyclic scrolling, scrolling only once and then stopping, and alternating scrolling back and forth).
The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.
In HTML, marquee means "scrolling". The marquee element (
This tag is used to make text or images scroll down horizontally or vertically on a web page. You can use its properties to control what happens when the text reaches the edge of the container.
marquee scrolling text tag
There will be many multimedia elements on a page, such as dynamic text, dynamic images, audio and video, etc., and the simplest one is sky-high Scroll text. In HTML, if we want to add scroll text, we need to use the marquee tag.
Let’s take a look at the simplest example first:
<!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>In order to make the display effect more obvious, here the page background is set to black and the scrolling text is set to white. The display effect is as shown in the figure:
In this way we have implemented the simplest scrolling text. There are also some attributes in the scrolling text used to control the scrolling direction, scrolling speed, etc. Let's take a look at it below. Several commonly used attributes.
direction scrolling direction attribute
By default, text scrolls from right to left. In actual application, we may need to change the direction, so we can set it through this attribute. The available values for this attribute are: : up, down, left, right, respectively representing scrolling up, down, left and right.
Examples are as follows:
<!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>
behavior scrolling method attribute
The rolling method can be set through behavior, such as reciprocating motion, etc. Available values for behavior are: scroll, slide, alternate, which respectively represent circular scrolling, scrolling once and then stopping, and alternate scrolling back and forth.
Examples are as follows:
<!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>
scrolldelay scroll delay attribute and scrollamount scroll speed attribute
Text scrolling can be set through the scrolldelay attribute time interval. The time interval unit of scrolldelay is milliseconds. This time interval is set as the time interval between two scrolling steps. If the time is too long, a stop-and-go effect will occur.
scrollamount is used to set the scrolling step size.
Examples are as follows:
<!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>
loop Scroll loop attribute
If we want the text to stop after scrolling a few times, we can Use the loop attribute.
Examples are as follows:
<!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>
(Learning video sharing: Getting started with web front-end)
The above is the detailed content of How to use marquee tag in html5. For more information, please follow other related articles on the PHP Chinese website!