Analysis of html-based rendering of standard and custom tags

When I modified the system I wrote last year, I accidentally saw the effect of rendering the entire cell color into red using a standard tag that was not closed in the cell, as shown below:

At that time, the problem was that an int integer was returned from the background and % was written on the page.

At this time, the question of how to render the following % in red also emerged. At that time, I used a tag label that was not closed and followed by a closed custom tag, seeing this, I suddenly wondered how the browser handles the closed rendering of tags. Why is this incorrect closure method not causing layout disorder, so I did a research experiment to analyze the browser's problems of standard tag and custom tag closure and non-closed rendering. To make the experiment clearer, I sorted out the experiment sequence and analyzed several problems step by step.

First: How does the browser render tags?

Before span after div

After span outside div

The Code is as follows:

After span

The difference comparison result code is as follows (Sorry, the editor always changes my code here ):

IE10.

IE9.

 

 

From the comparison above, we can see that the browser should search for the paired labels from the external to the internal starting point for rendering, which is a bit confusing, in this way, the browser first groups tags from top to bottom, and then searches for their closed tag rendering starting from the outermost starting tag, page display is always the final rendering of all the newest is always the final display of the final rendering (here ie9 does not find the closed, it gives up rendering ). To understand this, let's start the second experiment.

Experiment 2: Standard tag closure and non-closed Rendering

3

Outside of standard labels

No cells are separated.

The Code is as follows:

3. In label Standard tag closure, cells separated by standard tags do not have standard tag span. After label ends, the standard tag label ends, and span is not closed.

This experiment also illustrates a problem with experiment 1. Here we mainly compare it with the following ones, but after I split it, we will show the overall comparison effect and code.

Experiment 3: close a custom tag

The Code is as follows:

2 label standard label with closed standard label closed separated by a standard label other than closed cells nothing within the custom label la

From the above we can see that the custom tag closed browser is rendered like a standard tag

 

Experiment 3: different custom tag start and end combinations and different browser rendering Methods

The effect of IE10 is as follows:

The effects of IE9 and Google Firefox are as follows:

I didn't mention ie78 because they didn't study custom rendering and ignore it. The Code is as follows:

4. The standard label is closed, and the cells separated by the label are closed. If there is no lab, then la is not finished. fff is not finished. Note that the standard label is closed in ie Firefox Google. close, separate, and distinguish cells. No custom label. After la is started, the custom label. Before lab ends, the lab ends, and before la ends.

From this we can see that: 1. IE9 and Google and Firefox use symmetric search for non-standard tag rendering, such as <la> </la> and <la> </lab> </la>.

2. In IE10, finding custom tags in pairs does not require symmetry (it is not mentioned that inserting standard tags in a custom tag is involved in the following experiment)

Experiment 4: custom tag and standard tag combination

The effect of IE10 is as follows:

The effects of IE9 and Google Firefox are as follows:

 

The Code is as follows:

1 label the standard label contains cells separated from the standard label in the closed section. No la custom label. No standard label. then the custom tag la is closed.

Based on the previous experiment, we can see that the rendering method of the browser's custom and standard labels is as follows: 1. IE9 and Google and Firefox use symmetric search for non-standard tag rendering, such as <la> </la> and <la> </lab> </la>.

2. ie10 renders standard labels and non-standard labels separately, while non-standard labels are rendered by looking for unknown pairs, such: <la> </la> and <la> </lab> and <la> </label> </lab> are the same rendering group.

 

Total:

IE10 is as follows:

The effect of IE9 is as follows:

Google Firefox has the following effects:

 

Summary:

1. the browser starts from the external to the inner to search for pairs of labels for rendering.

2. IE9 and Google and Firefox use symmetric search for non-standard tag rendering, such as <la> </la> and <la> </lab> </la>.

3. ie10 renders standard labels and non-standard labels separately, while non-standard labels are rendered by looking for unknown pairs, such: <la> </la> and <la> </lab> and <la> </label> </lab> are the same rendering group.

 

The above are purely personal opinions. If you have any mistakes, please correct them. Thank you.