How should marquee tags be used in XHTML code

Time:2021-10-11

In the forum, netizen jean jean 20 mentioned how marquee can be modified to meet the standard. I read my friends’ posts and thought they were all very good. The moderator greennn pointed out that marquee did not meet the standard and had been abandoned by W3C. A friend said that he felt it was unreasonable to go. The original good effect has now disappeared. Some friends said they would go, but they were bored when they looked at it. Everyone has their own understanding angle, but how we understand it is one thing, but we should find out why. Here, I will modify and add some contents after greennn’s conclusion. I hope you can understand and figure it out.

The first thing to correct is that marquee was abandoned by the W3C. This sentence is actually wrong. Why? Because marquee has never been regarded as a formal label by the W3C. The W3C has never formulated this label, let alone “abandoned”. It’s like saying divorce before you get married. In fact, marquee, like many other labels, is privately made by companies such as Microsoft and Netscape, and W3C has never recognized this label. The rich company is unreasonable, but the unprofitable organization is hard spoken!

Why has the W3C not recognized marquee? To say that this label is a screwdriver in the eyes of the majority of web designers! In the early years, we still regarded technological power as a capital to show off. But now I don’t advocate using it (an aside: many people say that W3C is not allowed to use it, which is wrong. W3C has no right to restrict you from using it or not.) why? Then we should clarify what this standard is. Standard is not a technology, but a specification and proposal. We still use the tags in the original html4.0. The standard does not add any tags to our XHTML, but gives which are recommended (e.g. P, div, UL, DL, span, EM…) and which are not recommended (e.g. font, B, u, I…), and advocates semantics and usage specifications. Of course, the standard is not only XHTML, but also CSS, DOM and scripting language. Many people think that CSS is produced after the standard. In fact, CSS has existed for a long time. The standard is the same with CSS. They advocate not to use some CSS formulated by some browser manufacturers, such as CSS filters.

Another important point in the standard is functional separation. It is divided into three parts: structure, style and behavior. These three parts include structure (XHTML and XML), sample work (CSS) and behavior (DOM and ECMAScript). Here, let’s go back and think about why marquee is not recognized by W3C. I think everyone should understand. Like font, B and other labels, it is no longer a structural label. They have the characteristics of style and behavior, and it is obviously more than enough to classify them in the category of structure.

Therefore, if you want the effect of marquee to be preserved or implemented, you need to pay more attention to JavaScript. The scripting language will make your web page move. If you want to move the place you specify, of course, you should pay attention to the use of ID and class in the label.

In order to facilitate you to use this interesting effect, I specially asked Aoao to write a JS and look at 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>
< a href = “” title = “” > scroll here</a>
</div>

Please note that where the scrolling effect is needed, just add class = “ccmarquee” on the label on the periphery. Pay attention to case.

Attachment: < marquee > detailed explanation of tag attributes

Please look at the following code first

Copy code

The code is as follows:

< marquee direction = up behavior = scroll loop = 3 scrollmount = 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 direction of scrolling. The values can be left, right, up and down. The default is left
◎ behavior indicates the way of scrolling, and the value can be scroll (continuous scrolling), slide (sliding once) and alternate (round-trip scrolling)
◎ loop indicates the number of cycles. The value is a positive integer. The default is infinite cycle
◎ scrollmount indicates the movement speed. The value is a positive integer, and the default is 6
◎ scrolldelay indicates pause time. The value is a positive integer. The default value is 0. The unit seems to be milliseconds
◎ align indicates the vertical alignment of elements. The values can be top, middle and bottom. The default is middle
◎ bgcolor indicates the background color of the motion area. The value is hexadecimal RGB color, and the default is white
◎ height and width represent the height and width of the moving area. The values are positive integers (in pixels) or percentages. The default width = 100% height is the height of the elements in the label
◎ hspace and vSpace represent the horizontal distance and vertical distance from the element to the area boundary. The value is a positive integer and the unit is pixel.
◎ OnMouseOver = this. Stop() onmouseout = this. Start() means that the scrolling stops when the mouse is above the area, and continues when the mouse is removed.

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]