剖析html对标准标签和自定义标签闭合与不闭合渲染问题

昨天在修改去年写的系统的时候无意中看到了当时写的一个利用标准标签未闭合在单元格内把整个单元格颜色渲染成红色的效果，如下：


当时的问题是从后台返回来的是个int整数而%是写在页面上的如图


这 时候就出现怎么把后面的%也渲染成红色的问题，当时我用的是标签label未闭合跟了一个只有闭合的自定义标签来实现的，看到这个我突然有些疑惑浏览器对 标签的闭合渲染到底是怎么的处理方式，为啥这个错误的闭合方式却没有引起布局的错乱，于是我做了一个研究实验来剖析下浏览器对标准标签和自定义标签闭合与 不闭合渲染的问题。为了使条理更清晰我整理了一下实验顺序，一步步来剖析下出现的几个问题。

第一：浏览器以什么样的方式来渲染标签

div之后span之前 紧跟span
div之外span之前span之后

代码如下：

<div style='color:green;'>div之后span之前
<span style='color:red;'>紧跟span
</div>
div之外span之前</span>span之后

差异对比效果代码如下(不好意思这里编辑器老是改变我的代码只能截图了)：

IE10.



IE9.



 

 

<span style='color:blue;'>span之后div之前
<div style='color:green;'>div之后span之前
<span style='color:red;'>紧跟span
</span>
span闭合1之外闭合2之前</span>
span之外闭合div之前
</div>
div之外

从上面的对比可以看出浏览器应该是从外到内以开始标签为起点依次查找成对的标签做渲染， 有点绕人，可以这么理解浏览器从上到下先把标签入组，然后从最外的起始标签开始查找他的闭合标签渲染，依次执行，页面显示的总是最后渲染出来的所有最内的 总是最后渲染的最后显示的(这里ie9没有找到闭合的就放弃了渲染)。明白这个我们接下来做第二个实验.

实验二：标准标签闭合与不闭合渲染

3

label标准标签闭合里标准标签之外

分隔区分的单元格啥也没有

标准标签span之后label结束之前标准标签label结束之后，后面啥也没有了span没有闭合

代码如下：

<table style='width:100%;border:1px solid black;'>
<tr>
<td>3</td>
<td>
<label style="color: red;">label标准标签闭合里</label>标准标签之外</td>
<td>分隔区分的单元格啥也没有</td>
<td><span style="color: red;">标准标签span之后label结束之前</label>标准标签label结束之后，后面啥也没有了span没有闭合</td>
</tr>
</table>

本实验还和实验一说明的是一个问题，这里主要是和下面几个做对比的但被我现在拆开了结束会给出总体对比效果与代码。

实验三：自定义标签标签之内闭合



代码如下：

<table style='width:100%;border:1px solid black;'>
<tr>
<td>2</td>
<td>
<label style="color: red;">label标准标签带闭合之内</label>标准标签闭合之外</td>
<td>分隔区分的单元格啥也没有</td>
<td>
<la style="color: red;">自定义标签la之内</la>
</td>
</tr>
</table>

由上可以看出自定义标签闭合浏览器像标准标签一样渲染

 

实验三：不同的自定义标签开始和结束组合以及不同浏览器的渲染方式

IE10效果如下



IE9和谷歌火狐效果如下



为啥没有提到ie78因为他们对自定义的不渲染忽略他们不做研究，代码如下：

<table style='width:100%;border:1px solid black;'>
<tr>
<td>4</td>
<td>
<label style="color: red;">标准标签label闭合之内</label>闭合之外</td>
<td>分隔区分的单元格啥也没有</td>
<td>
<la style="color: red;">
自定义标签la开始之后自定义标签lab结束之前</lab>lab之后没有了la没有结束fff注意这里分别在ie火狐谷歌中看效果</td>
</tr>
<tr>
<td>5</td>
<td>
<label style="color: red;">标准标签label闭合了</label>标准标签闭合之外</td>
<td>分隔区分的单元格啥也没有</td>
<td>
<la style="color: red;">自定义标签la开始之后自定义标签lab没有开始lab结束之前</lab>lab结束之后la结束之前</la>
fff注意这里分别在ie火狐谷歌中看效果</td>
</tr>
</table>

由此看出：1.IE9和谷歌和火狐浏览器对非标准标签渲染是查找对称性，如<la></la>和<la></lab></la>这是一组相同的渲染

2.IE10查找自定义标签两两成对不要求对称（这里没有提到里面插入标准标签在自定义标签里面下面实验将涉及）

实验四：自定义标签和标准标签组合

IE10效果如下：



IE9和谷歌火狐效果如下：



 

代码如下：

<table style='width:100%;border:1px solid black;'>
<tr>
<td>1</td>
<td>
<label style="color: red;">label标准标签带闭合里</label>标准标签之外</td>
<td>分隔区分的单元格啥也没有</td>
<td>
<la style="color: red;">la自定义标签la和标准标签label结束之前</label>标准标签结束之后自定义标签lab之前</lab>自定义标签lab之后最后自定义标签la闭合</la>
fff注意这里分别在ie火狐谷歌中看效果</td>
</tr>
</table>

结合上一个实验看出浏览器对自定义标签和标准标签渲染方式：1.IE9和谷歌和火狐浏览器对非标准标签渲染是查找对称性，如<la></la>和<la></lab></la>这是一组相同的渲染

2.ie10对标准标签和非标准标签是分开渲染，非标准标签渲染方式是查找不认识的对子进行渲染，如：<la></la> 和<la></lab>和<la></label></lab>这三个就是相同的一组渲染

 

总效果图：

IE10如下：



IE9效果如下：



谷歌火狐效果如下：



 

总结：

1.浏览器从外到内以开始标签为起点依次查找成对的标签做渲染

2.IE9和谷歌和火狐浏览器对非标准标签渲染是查找对称性，如<la></la>和<la></lab></la>这是一组相同的渲染

3.ie10对标准标签和非标准标签是分开渲染，非标准标签渲染方式是查找不认识的对子进行渲染，如：<la></la> 和<la></lab>和<la></label></lab>这三个就是相同的一组渲染

 

以上纯属个人拙见，如有错误欢迎指正，谢谢。