How to use JavaScript and CSS correctly in XHTML documents

In more and more websites, the use of XHTML is replacing HTML4 at a fast pace. However, some mainstream browsers do not support XHTML very well. In addition, some web page creators do not understand the differences between XHTML and HTML4 well, which makes the progress of XHTML in the development of the WEB slow.

XHTML is XML not HTML

Currently, one of the main misconceptions about XHTML is that it is just another version of HTML. This misunderstanding is caused by the fact that Microsoft Internet Explorer only supports XHTML in the MIME format text/html and not the recommended application/xhtml+xml format.

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

Correctly formatted XHTML is an XML program and must follow strict rules when written:

1. The characters < and & are not allowed to appear in the content of an XHTML document unless they are contained in a CDATA tag (<![CDATA[...]]>)

2. Comment tags () cannot contain two consecutive hyphens (--)

3. Content contained in comment tags () will be ignored

Problems with style and script content

The content within the style and script tags will cause some differences when XHTML is parsed as XML format (rather than HTML format).

JavaScript contains characters that cannot exist in XHTML

Some special characters of JavaScript cannot exist outside of the CDATA tag of XHTML.

<script type="text/javascript">
var i = 0;
while(++i < 10){
//...
}
</script>

Note: The sample code above is not well-formed XHTML because it uses the tag " < " which is not allowed in XHTML or XML.

Using comments in style and script content

Authors familiar with HTML usually understand that putting the content of style and script tags in comment tags will hide these contents in the browser, but some browsers cannot understand them.

<style type="text/css">

</style>
<script type="text/javascript">

</script>

The above example shows how to ignore the content within the comment tag in the browser. At the same time, this example also shows the difference between the browser in processing the content of text/xml format and application/xhtml+xml format.

Mozilla 1.1+ / Opera 7
No CSS is applied, no JavaScript is executed

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

Internet Explorer 5.5+
The document is not displayed. (See: https://developer.mozilla.org/Ta ... _in_XHTML_Documents )

Style and javascript contain two consecutive dashes (--)

Another problem that arises when using comment tags in JavaScript in XHTML pages is that there will be two consecutive hyphens (--) in the JavaScript:

<script type="text/javascript">

</script>

Use CDATA instead of comments

Putting the contents of the script tag into a CDATA block can handle the problem of two consecutive dashes in the comment, but this will make some lower-version browsers not support it because they cannot understand XML. Fortunately, we can achieve compatibility by using the comment symbol in JavaScript to comment the CDATA block.

<script type="text/javascript">
//<![CDATA[
var i = 0;

while (++i < 10)
{
// ...
}
//]]>
</script>

Recommended xhtml and html compatibility processing methods

Don't write style and script directly in the XHTML page. A good alternative is to use external files to write CSS and JavaScript, and then import them in XHTML.

This recommendation seems to be a good one. In any case, it will ensure that there will be no problems in the process of converting pages from text/html to application/xhtml+xml, at least in the next few years.

<<: How to improve Idea startup speed and solve Tomcat log garbled characters

>>: Detailed explanation of the simple use of MySQL query cache

How to use JavaScript and CSS correctly in XHTML documents

Three ways to refresh iframe

A simple example of using js to get the time of the last week, month and three months

WeChat applet implements the Record function

JS array loop method and efficiency analysis comparison

Inspiring Design Examples of Glossy and Shiny Website Design

Navicat for MySQL 15 Registration and Activation Detailed Tutorial

Two ways to implement square div using CSS

Solution to forget password when installing MySQL on Linux/Mac

Two ways to add a mask effect to the background image using background-color through CSS

Detailed explanation and practical exercises of Mysql tuning Explain tool (recommended)

Recommend

Summary of HTML Hack Tags in IE Browser

Summary of Nginx load balancing methods

SMS verification code login function based on antd pro (process analysis)

Vant+postcss-pxtorem implements browser adaptation function

Linux method example to view all information of the process

Introduction to Sublime Text 2, a web front-end tool

HTML exceeds the text line interception implementation principle and code

Vue data responsiveness summary

An example of the execution order between the href jump and onclick of the html hyperlink a tag

How to get the maximum or minimum value of a row in sql

Optimizing the performance of paging query for MySQL with tens of millions of data

Do you know how to use vue-cropper to crop pictures in vue?

MySQL data backup and restore sample code

JavaScript to add and delete messages on the message board

How to create users and manage permissions in MySQL