当HTML标签未关闭时,我遇到了一些有趣的功能。有时浏览器会插入额外的开始和结束标记以进行补偿,有时它只会插入结束标记。最好通过示例解释这一点:
使用<sup>
标记:
first text node
<div> This is a parent div <sup>superscript tag starts IN parent</div> text OUTSIDE node of parent
使用<s>
标记:
first text node
<div> This is a parent div <s>strikethrough tag starts IN parent</div> text OUTSIDE node of parent
正如您在第一个示例中所看到的,浏览器会在其父关闭之前自动关闭<sup>
标记。但是,在第二个示例中,浏览器似乎在其父结束之前关闭<s>
标记,然后插入 另一个 在父母之后<s>
。
我查看了<s>
和<sup>
规范 - 我似乎无法找到任何特定于浏览器如何解释和处理未关闭标签的内容。至少没有任何内容可以解释此功能
我想知道这个的原因是我正在使用的实时降价解析器 - 用户可能无法在解析其源代码之前完成其标记。
我想知道浏览器如何处理这些事情,所以我可以为该用例编写代码。目前,浏览器以不同的方式处理关闭不同的标签(正如您的示例所示)。
有没有人知道为什么浏览器会这样做?或者至少知道一系列相同的元素?
答案 0 :(得分:7)
感谢 @Ankith Amtange ,我发现了explanation发生了什么。我会在这里为未来的读者写出来。
<s>
标记超出其父级,因为它是格式化元素。 <sup>
标记会自动关闭,因为浏览器需要在父元素结束之前关闭</sup>
标记。
HTML
解析器在其堆栈中对元素的处理方式不同,它们属于以下类别(source):
特殊元素
- 以下元素具有不同级别的特殊解析规则:
HTML
&#39; saddress
,applet
,area
,article
,{{ 1}},aside
,base
,basefont
,bgsound
,blockquote
,body
,br
,{{1} },button
,caption
,center
,col
,colgroup
,dd
,details
,dir
,div
,dl
,dt
,embed
,fieldset
,figcaption
,figure
,footer
,{{ 1}},form
,frame
,frameset
,h1
,h2
,h3
,h4
,{{1} },h5
,h6
,head
,header
,hgroup
,hr
,html
,iframe
,img
,input
,isindex
,li
,link
,listing
,main
,marquee
,{{ 1}},meta
,nav
,noembed
,noframes
,noscript
,object
,ol
,{{1} },p
,param
,plaintext
,pre
,script
,section
,select
,source
,style
,summary
,table
,tbody
,td
,template
,textarea
,tfoot
,{{ 1}}和th
;thead
&#39;title
,tr
,track
,ul
,wbr
和xmp
;和MathML
&#39;mi
,mo
和mn
。格式化元素
- 以下
ms
元素是最终位于有效格式元素列表中的元素:mtext
,annotation-xml
,SVG
,foreignObject
,{{ 1}},desc
,title
,HTML
,a
,b
,big
,code
,{{1} }和em
。普通元素
- 解析
font
文档时找到的所有其他元素。
最经常讨论的错误标记示例如下:
i
这个标记的解析直到&#34; 3&#34;。此时,DOM看起来像这样:
nobr
此处,开放元素的堆栈上有五个元素:s
,small
,strike
,strong
和tt
。活动格式元素列表只有两个:u
和HTML
。插入模式是&#34;在体内&#34;。
收到带有标记名称&#34; <p>1<b>2<i>3</b>4</i>5</p>
&#34;的结束标记令牌后,&#34;采用代理算法&#34;被调用。这是一个简单的例子,格式元素是─html
├──head
└──body
└──p
├──"1"
└──b
├──"2"
└──i
└──"3"
元素,而 没有最远的块 。因此,开放元素的堆栈最终只有三个元素:html
,body
和p
,而活动格式元素列表只有一个:b
。此时i
树未经修改。
下一个标记是一个字符(&#34; 4&#34;),触发重建活动格式化元素,在本例中只是b
元素。因此为&#34; 4&#34;创建了新的i
元素。文本节点。在&#34; b
&#34;的结束标记令牌之后也收到了,&#34; 5&#34;插入文本节点,b
如下所示:
html