Things to note when writing self-closing XHTML tags

The img tag in XHTML should be written like this: <img alt="" src="" />. This writing method is also called self-closing, which is completely legal in XML. If you are familiar with XML-related development, you may be accustomed to this way of writing, thinking that any element in XML that does not have child nodes can be written in this way, and then any tag with no content in XHTML can also be written in this way. In theory, XHTML allows any tag to be written in a self-closing manner, but browser compatibility has brought a new problem, that is, IE cannot correctly recognize the self-closing writing method of certain tags. String 8
Please try to enter the following XHTML code and browse it in IE: <p>hello <script type="text/javascript" /> world</p>. You will find that you can only see the hello at the beginning but not the world at the end. This is really inexplicable. Many of you may have encountered this problem before and spent hours on it without finding a reasonable explanation. String 4
The explanation comes from another similar code: <p>hello <textarea /> world</p>. Can you get a reasonable explanation by looking at its display effect in IE? We can see that the hello in the front is displayed normally, while the world in the back is displayed in the textarea. This proves that IE does not correctly recognize that the textarea tag has been closed by itself, but treats it as not closed and recognizes the following content as the content inside the textarea.
Now we understand why the previous code cannot see the world behind it, because it is recognized as part of the script. This shows that when we use XHTML, we cannot use self-closing writing style as arbitrarily as XML. Only a few tags that do not need to be closed can be written in a self-closing way. For other tags, it is best to use paired closing writing style even if they do not have any content.
Finally, I need to remind everyone that in fact, stupid parsers are not only found in IE. Problems caused by imprecise parsers may occur in many places. Therefore, when writing XHTML, we still have to accommodate some habits inherited from old HTML. We cannot just write it casually as if we think it meets the standards like real XML. Don't believe it? Let’s try another one: <p>hello <br></br> world</p>, and notice how it looks in IE and Opera.
Some relevant specifications of XHTML:
1. All tags must have a corresponding end tag
2. The names of all tag elements and attributes must be lowercase
3. All XML tags must be properly nested
4. All attributes must be enclosed in quotation marks ""
5. Encode all < and & special symbols
6. Assign a value to all attributes
7. Don’t use “--” in comments

<<: Perfect solution to the problem of not being able to access the port of the docker container under Windows 10

>>: Some common mistakes with MySQL null

Steps and pitfalls of upgrading linux mysql5.5 to mysql5.7

The content of the commonly used input text box is automatically vertically centered and the default prompt text is empty when clicked

Blog

A brief discussion on the datetime format when exporting table data from MySQL to Excel

Blog

HTML table tag tutorial (12): border style attribute FRAME

Blog

Things to note when writing self-closing XHTML tags

Steps and pitfalls of upgrading linux mysql5.5 to mysql5.7

Summary of React's way of creating components

Solution to nginx not jumping to the upstream address

How to use JS to implement waterfall layout of web pages

How to prevent event bubbling in JavaScript

Detailed explanation of the use of the MySQL parameter sql_safe_updates in the production environment

Ajax solves cross-domain problem by setting CORS response header to achieve cross-domain case study

The content of the commonly used input text box is automatically vertically centered and the default prompt text is empty when clicked

A brief discussion on the datetime format when exporting table data from MySQL to Excel

HTML table tag tutorial (12): border style attribute FRAME

Recommend

Summary of two methods to implement vue printing function

Vue implements tree table

centos 7 modify sshd | prohibit root login and sshd port script definition

Flex layout allows subitems to maintain their own height

Sliding menu implemented with CSS3

Detailed explanation of cocoscreater prefab

js dynamically implements table addition and deletion operations

Discussion on the way to open website hyperlinks

Summary of accurate calculations of various distances/scroll distances in a window

Nginx rush purchase current limiting configuration implementation analysis

How to configure ssh/sftp and set permissions under Linux operating system

MySQL 8.0.20 compressed version installation tutorial with pictures and text

HTML text escape tips

Solution to garbled display of Linux SecureCRT

Linux configuration without password login stand-alone and full distribution detailed tutorial