Those of you who are used to writing RN will notice that all labels in RN can close themselves, whether container or non-container tags

<View />
<Image />
Copy the code

With that in mind, when you’re writing HTML, you might write code like this

<html>
    <body>
        <div style="height: 300px; background-color: green;">
            <div style="height: 100%; background-color: yellow;" />
            <div style="height: 70px; background-color: black;" />
        </div>
    </body>
</html>
Copy the code

But when you render it, it’s not quite what you expect

<html><head></head><body>
    <div style="height: 300px; background-color: green;">
        <div style="height: 100%; background-color: yellow;">
        <div style="height: 70px; background-color: black;">
    </div>

</div></div></body></html>
Copy the code

Well, it turns out that only part of the tags in HTML are self-closing. Common ones are the following

<input>: Defines an input box<meta>: Provides meta information about the page<link>: Defines the relationship between documents and external resources, usually used to link stylesheets<br>: used to wrap a line<hr>: Define a horizontal line<img>: Defines an image in an HTML pageCopy the code

Such as

are illegal, so the question is, how will browsers treat this logic error, by exploring…. Well, search, find the following links below this passage stackoverflow.com/questions/1…

Because the

is erroneously treated by browsers as a not yet closed

tag. So everything that goes after it is considered to be inside of it. Since the tag is never finished in the rest of the document, the document itself is malformed and results in rendering discrepancies.

will include everything that comes after it as a child element 

<html>
    <body>
        <div style="height: 300px; background-color: green;">
            <span style="height: 100%; background-color: yellow;" />
            <span style="height: 70px; background-color: black;" />
            <button>234234</button>
        </div>
        <button>121212</button>
    </body>
</html>
Copy the code

The renderings

<html>
<head></head>
 <body>
        <div style="height: 300px; background-color: green;">
            <span style="height: 100%; background-color: yellow;">
                <span style="height: 70px; background-color: black;">
                    <button>234234</button>
                </span>
            </span>
        </div>
        <button>121212</button>
    
</body></html>
Copy the code

As you can see, only elements at the same level are affected

conclusion

  • In pure HTML, only some tags can be self-closing, otherwise the tag will be closedbehindtheBrother nodesContains children of its own
  • In React, without these restrictions, all tags are self-closing

So if RN goes to the Web and the front end is still react, I’m going to write it the same way.