未关闭/被错误的HTML标签延伸超过其父级

发布时间：2020-12-14 21:33:07 所属栏目：资源来源：网络整理

导读：当HTML标签未关闭时，我遇到了一些有趣的功能。有时，浏览器会插入额外的打开和关闭标签以进行补偿，其他时候只会插入一个结束标签。这最好通过例子来解释：使用 sup标签： first text nodediv This is a parent div supsuperscript tag starts IN parent/d

当HTML标签未关闭时，我遇到了一些有趣的功能。有时，浏览器会插入额外的打开和关闭标签以进行补偿，其他时候只会插入一个结束标签。这最好通过例子来解释：

使用标签：

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

正如你在第一个例子中看到的，浏览器会自动关闭父母关闭之前的标签。但是，在第二个示例中，浏览器似乎关闭了< s>标记在其父级结尾之前，然后插入另一个起始< s>在父母之后。

我浏览了<s>和规范 – 我似乎找不到任何具体的浏览器如何解释和处理未封闭的标签。至少没有什么可以解释这个功能。

我想知道这一点的原因是我正在使用的实时标记解析器 – 用户可能在解析源之前不能完成标签。

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

有谁知道浏览器为什么这样做？或者至少知道一个行为一致的元素列表？

解决方法

感谢@Ankith Amtange我发现了 explanation发生了什么。我会在这里写下来给未来的读者。

< s>标签由于是一个格式化元素而延伸超过其父项。 标签会自动关闭，因为浏览器期待关闭标签在父元素结束之前。

HTML解析器在其堆栈中对待元素不同，它们分为以下类别(source)：

Special elements

The following elements have varying levels of special parsing rules: HTML‘s address,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,and xmp; MathML‘s mi,mo,mn,ms,mtext,and annotation-xml; and SVG‘s foreignObject,desc,and title.

Formatting elements

The following HTML elements are those that end up in the list of active formatting elements: a,b,big,code,em,font,i,nobr,s,small,strike,strong,tt,and u.

Ordinary elements

All other elements found while parsing an HTML document.

说明(来自链接规范)：

最常被讨论的错误标记示例如下：

<p>1<b>2<i>3</b>4</i>5</p>

这个标记的解析直到“3”。在这一点上，DOM看起来像这样：

─html
 ├──head
 └──body
    └──p
       ├──"1"
       └──b
          ├──"2"
          └──i
             └──"3"

这里，开放元素的堆栈有五个元素：html，body，p，b和i。活动格式元素的列表只有两个：b和i。插入模式是“体内”。

在收到标签名称为“b”的结束标签令牌后，调用“采用代理算法”。这是一个简单的情况，因为格式化元素是b元素，并且没有最远的块。因此，开放元素的堆栈最终只有三个元素：html，body和p，而活动格式化元素的列表只有一个：i。此时DOM树未修改。

下一个令牌是一个字符(“4”)，触发了活动格式化元素的重建，在这种情况下只是i元素。因此，为“4”文本节点创建一个新的i元素。在接收到“i”的结束标记令牌之后，插入“5”文本节点，DOM看起来如下：

─html
 ├──head
 └──body
    └──p
       ├──"1"
       ├──b
       │  ├──"2"
       │  └──i
       │     └──"3"
       ├──i
       │  └──"4"
       └──"5"

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!