How to correctly use JavaScript and CSS in XHTML documents

In more and more websites, the use of XHTML is quickly replacing html4. However, some mainstream browsers do not yet provide good support for XHTML, in addition, some web creators do not fully understand the differences between XHTML and html4, which slows down the web development process.

XHTML is XML rather than HTML

Currently, the main misunderstanding of XHTML is that it is another version of HTML. One cause of this misunderstanding is that Microsoft Internet Explorer only supports the MIME format text/html XHTML, rather than the recommended application/XHTML + XML format.

When an XHTML page is parsed in text/html MIME format, it is no different from the HTML page, when it is parsed in text/XML or application/XHTML + xml mime format, it will follow strict XML writing and display rules.

The correct XHTML format is an XMLProgramIn addition, you must follow the following strict rules when writing:

1. characters <and & are not allowed to appear in the XHTML document unless they are included in the CDATA tag (<! [CDATA [...]>)

2. Comment the tag (<! --... -->) Cannot contain two consecutive bars (--)

3. Included in the comment tag (<! --... -->) Will be ignored.

Style and script content

The content in the style and script labels may be different when XHTML is parsed in XML format rather than HTML format.

Javascript contains characters that cannot exist in XHTML.

Some special characters in JavaScript are non-existent characters outside the CDATA tag of XHTML.

<SCRIPT type = "text/JavaScript">
VaR I = 0;
While (++ I <10 ){
//...
}
</SCRIPT>

Note: The above exampleCodeIt is not in good XHTML format, because it uses a tag that is not allowed in XHTML or XML "<"

Use annotations in style and script content

The authors familiar with HTML generally know that placing style and script TAG content in the comment tag will hide the content in the browser, but some browsers cannot understand them.

<Style type = "text/CSS">
<! --
Body {background-color: Blue; color: yellow ;}
-->
</Style>
<SCRIPT type = "text/JavaScript">
<! --
VaR I = 0;
VaR sum = 0;

For (I = 0; I <10; ++ I)
{
Sum + = I;
}
Alert ('sum = '+ sum );
// -->
</SCRIPT>

The preceding example shows how to ignore the content in the annotation label in the browser, this example also shows the difference between the browser processing text/XML format and application/XHTML + XML format content.

Mozilla 1.1 +/opera 7
Do not apply CSS or execute JavaScript

Netscape 7.0x/Mozilla 1.0.x
Do not apply CSS, but execute JavaScript

Internet Explorer 5.5 +
This document is not displayed. (See: https://developer.mozilla.org/Talk:en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents)

Style and JavaScript contain two consecutive horizontal bars (--)

Another problem that occurs when the annotation label is used in JavaScript on the XHTML page for processing is that there are two consecutive horizontal bars (--) in javascript:

<SCRIPT type = "text/JavaScript">
<! --
VaR I;
VaR sum = 0;

For (I = 10; I> 0; -- I)
{
Sum + = I;
}
// -->
</SCRIPT>

Use CDATA instead of comment

Placing the content in the script label in the CDATA block can handle two consecutive horizontal bars in the comment, but this will make some earlier browsers not support it, because they cannot understand XML. Fortunately, we can use the annotator in JavaScript to annotate the CDATA block for compatibility purposes.

<SCRIPT type = "text/JavaScript">
// <! [CDATA [
VaR I = 0;

While (++ I <10)
{
//...
}
//]>
</SCRIPT>

Recommended XHTML and HTML compatible Processing Methods

Do not directly write style and script on the XHTML page. A good alternative is to use external files to write CSS and JavaScript, and then introduce them in XHTML.

This recommended solution looks very good. In any case, it makes the page transform from text/html to application/XHTML + XML, at least for the next few years.

Detailed source reference: http://www.jb51.net/web/16170.html