How to use the Marquee tag in XHTML code

How to use the Marquee tag in XHTML code
In the forum, I saw netizen jeanjean20 mentioned how to modify Marquee to meet the standards. I read some of my friends' comments and thought they were all good. The moderator greengnn pointed out that Marquee does not meet the standards and has been abandoned by W3C. Some friends complained that it was unreasonable to go there, as the good effects were gone. Some friends also said that it would be better to go there, because it was annoying just looking at it. Everyone has their own perspective, but how we understand it is one thing, but we have to figure out why. Here I will modify and add some content after greengnn's conclusion, and I hope everyone can understand and figure it out.

The first thing to correct is that Marquee has been abandoned by W3C. This sentence is actually wrong. Why? Because Marquee has never been used as an official tag by W3C. W3C has never established this label, let alone "abandoned" it. This is like asking for a divorce before you even get married. In fact, Marquee, like many other tags, was privately made by companies such as Microsoft and Netscape, and W3C has never recognized this tag. This wealthy company has the problem of being unreasonable, but this unprofitable organization just keeps talking stubbornly!

Why has W3C never recognized Marquee? To be honest, this label is considered a screwdriver in the eyes of many web designers! In the early years, we boasted about our technological strength. But now it is not recommended to use it (a digression here: many people say that W3C does not allow its use, which is wrong. W3C has no right to restrict you from using it or not being able to use it.), why? Then we need to clarify what this standard is. A standard is not a technology; it is just a specification and proposal. We are still using the original HTML4.0 tags. The standard does not add any tags to our XHTML, but it gives the recommended tags (e.g. p, div, ul, dl, span, em...) and the recommended tags (e.g. font, b, u, i...), and advocates semantics and usage standards. Of course, the standard is not just XHTML, it also includes CSS, DOM and scripting languages. Many people think that CSS was created after the standard was established. In fact, CSS has existed for a long time. The same applies to standards for CSS. It is advocated not to use some CSS developed by some browser manufacturers, such as CSS filters.

There is another very important point in the standard, which is functional separation. It is divided into three parts: structure, style, and behavior. These three parts include structure (xHTML, XML), style (CSS), and behavior (DOM, ECMAScript). Now let's go back and think about why Marquee is not recognized by W3C. I think everyone should understand. Like FONT, B and other tags, it is no longer a structural tag. They have style and behavior characteristics, and it is obviously redundant to classify them as structures.

Therefore, if you want to preserve or realize the Marquee effect, you need to pay more attention to JavaScript. The scripting language can definitely make your web page dynamic. If you want to make the place you specify move, you must pay attention to the use of ID and CLASS in the tag.

In order to make it easier for everyone to use this interesting effect, I specially asked Aoao to write a piece of JS. See the following code:

JS code:

Copy code
The code is as follows:

function getElementsByClass(searchClass,tagName) {
var classElements = new Array();
if ( tagName == null )
tagName = '*';
var els = document.getElementsByTagName(tagName);
var elsLen = els.length;
var pattern = new RegExp("(^|\s)" searchClass "(\s|$)");
for (i = 0, j = 0; i < elsLen; i ) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j ;
}
}
return classElements;
}
function ccMarquee(className){
var a=getElementsByClass(className);
for (i = 0; i < a.length; i ) {
a[i].innerHTML="<marquee>" a[i].innerHTML "</marquee>";
}
}window.onload = function () {
ccMarquee("ccMarquee");
}

XHTML Code:


Copy code
The code is as follows:

<div class="ccMarquee">
<a href="" title="">This is scrolling</a>
</div>

Please note that where you need to use the scrolling effect, just add Class="ccMarquee" to any outer tag. Pay attention to capitalization.

Appendix: Detailed explanation of <marquee> tag attributes

Please look at the following code first


Copy code
The code is as follows:

<marquee direction=up behavior=scroll loop=3 scrollamount=1 scrolldelay=10 align=top bgcolor=#ffffff height=300 width=30% hspace=20 vspace=10 onmouseover=this.stop() onmouseout=this.start()> Enter scroll content here</marquee>

Now let's analyze it in detail

◎ direction indicates the scrolling direction. The value can be left, right, up, down. The default value is left
◎ behavior indicates the scrolling mode. The value can be scroll (continuous scrolling), slide (slide once), alternate (reciprocating scrolling).
◎ loop indicates the number of loops, the value is a positive integer, the default is infinite loop ◎ scrollamount indicates the movement speed, the value is a positive integer, the default is 6
◎ scrolldelay indicates the pause time, the value is a positive integer, the default is 0, and the unit seems to be milliseconds. ◎ align indicates the vertical alignment of the element, the value can be top, middle, bottom, the default is middle
◎ bgcolor represents the background color of the motion area. The value is a hexadecimal RGB color. The default is white. ◎ height and width represent the height and width of the motion area. The values ​​are positive integers (in pixels) or percentages. The default width=100% height is the height of the element in the tag. ◎ hspace and vspace represent the horizontal and vertical distances from the element to the boundary of the area. The values ​​are positive integers in pixels.
◎ onmouseover=this.stop() onmouseout=this.start() means that scrolling stops when the mouse is over the area, and continues when the mouse is moved away.

<<:  Research on the problem of flip navigation with tilted mouse

>>:  Alpine Docker image font problem solving operations

Recommend

Detailed explanation of Linux file operation knowledge points

Related system calls for file operations create i...

Summary of basic knowledge points of Linux group

1. Basic Introduction of Linux Group In Linux, ev...

Monitor changes in MySQL table content and enable MySQL binlog

Preface binlog is a binary log file, which record...

Tutorial on how to quickly deploy clickhouse using docker-compose

ClickHouse is an open source column-oriented DBMS...

How to enter and exit the Docker container

1 Start the Docker service First you need to know...

Example of how to identify the user using a linux Bash script

It is often necessary to run commands with sudo i...

MySQL slave library Seconds_Behind_Master delay summary

Table of contents MySQL slave library Seconds_Beh...

Detailed explanation of MySql 5.7.17 free installation configuration tutorial

1. Download the mysql-5.7.17-winx64.zip installat...

MySQL query data by hour, fill in 0 if there is no data

Demand background A statistical interface, the fr...

js canvas realizes random particle effects

This article example shares the specific code of ...

The whole process record of introducing Vant framework into WeChat applet

Preface Sometimes I feel that the native UI of We...

CSS pseudo-class: empty makes me shine (example code)

Anyone who has read my articles recently knows th...