未公开/错误的HTML标记扩展到其父级之外

Aᴄʜ*_*ᴀɪʟ 16 html html5 html-parsing

当HTML标签没有关闭时,我遇到了一些有趣的功能.有时浏览器会插入额外的开始和结束标记以进行补偿,有时它只会插入结束标记.最好通过示例解释:

随着<sup>标签:

first text node
<div> This is a parent div <sup>superscript tag starts IN parent</div> text OUTSIDE node of parent
Run Code Online (Sandbox Code Playgroud)

随着<s>标签:

first text node
<div> This is a parent div <s>strikethrough tag starts IN parent</div> text OUTSIDE node of parent
Run Code Online (Sandbox Code Playgroud)

正如您在第一个示例中所看到的,浏览器会<sup>在其父关闭之前自动关闭标记.然而,在第二个例子中的浏览器似乎关闭<s>其父结束前标记,然后插入 另一 起点<s>父后.

我已经查看<s><sup>规范 - 我似乎无法找到任何特定于浏览器如何解释和处理未闭合标签的内容.至少没有任何解释此功能的内容.

我想知道这个的原因是我正在使用的实时降价解析器 - 用户可能无法在解析其源代码之前完成其标记.

我想知道浏览器如何处理这些事情,所以我可以为这个用例编写代码.目前,浏览器以不同的方式处理关闭不同的标签(正如您的示例所示).

有谁知道为什么浏览器会这样做?或者至少知道一系列相同的元素?

Aᴄʜ*_*ᴀɪʟ 7

感谢@Ankith Amtange,我找到了发生的事情的解释.我会在这里为未来的读者写出来.

<s>标签延伸过其母公司,因为它是一个格式元素.的<sup>,因为浏览器预期关闭标签自动关闭</sup>父元素结束前标签.

HTML解析器不同对待元件在其堆栈中,落入以下类别():

特殊元素

  • 下列元素有不同的特殊分析规则层次:HTMLaddress,applet,area,article,aside,base,basefont,bgsound,blockquote,body,br,button,caption,center,col,colgroup,dd,details,dir,div,dl,dt,embed,fieldset,figcaption,figure,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,iframe,img,input,isindex,li,link,listing,main,marquee,meta,nav,noembed,noframes,noscript,object,ol,p,param,plaintext,pre,script,section,select,source,style,summary,table,tbody,td,template,textarea,tfoot,th,thead,title,tr,track,ul,wbr,和xmp; MathMLmi,mo,mn,ms,mtext,和annotation-xml; 和SVGforeignObject,desctitle.

格式化元素

  • 以下HTML元件是那些在有源格式元素列表结束:a,b,big,code,em,font,i,nobr,s,small,strike,strong,tt,和u.

普通元素

  • 解析HTML文档时找到的所有其他元素.

解释(来自链接规范):

最经常讨论的错误标记示例如下:

<p>1<b>2<i>3</b>4</i>5</p>
Run Code Online (Sandbox Code Playgroud)

解析此标记直到"3".此时,DOM看起来像这样:

?html
 ???head
 ???body
    ???p
       ???"1"
       ???b
          ???"2"
          ???i
             ???"3"
Run Code Online (Sandbox Code Playgroud)

在这里,开放元素的堆栈上有五个要素:html,body,p,b,和i.活动格式元素列表只有两个:bi.插入模式是"在体内".

在接收到具有标签名称" b" 的结束标签令牌时,调用"采用代理算法".这是一个简单的例子,格式化元素是b元素,并且没有最远的块.因此,开放元素的堆栈最终只有三个要素:html,bodyp,而主动格式元素的列表只有一个:i.此时DOM树未经修改.

下一个标记是一个字符("4"),触发重建活动格式化元素,在这种情况下只是i元素.i因此为"4"Text节点创建了一个新元素.在i收到" " 的结束标记标记并且插入"5"文本节点之后,DOM外观如下:

?html
 ???head
 ???body
    ???p
       ???"1"
       ???b
       ?  ???"2"
       ?  ???i
       ?     ???"3"
       ???i
       ?  ???"4"
       ???"5"
Run Code Online (Sandbox Code Playgroud)