未关闭/错误嵌套的 HTML 标记超出其父级答案

【问题标题】：Unclosed / misnested HTML tags extend past their parent未关闭/错误嵌套的 HTML 标记超出其父级
【发布时间】：2017-02-08 11:07:06
【问题描述】：

当 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> 标签，然后从 @987654331 开始插入 另一个 @ 在父级之后。

我查看了 <s> 和  规范 - 我似乎找不到任何关于浏览器如何解释和处理未闭合标签的具体内容。至少没有任何内容可以解释此功能。

我想知道这是因为我正在使用的实时降价解析器 - 用户可能无法在解析源代码之前完成他们的标签。

我想知道浏览器是如何处理这些事情的，所以我可以为那个用例编写代码。目前，浏览器以不同的方式处理关闭不同的标签（正如您在我的示例中看到的那样）。

有人知道为什么浏览器会这样做吗？或者至少知道一个行为相同的元素列表？

【问题讨论】：

你为什么要首先编码不正确的html 。您是否有任何特殊原因要这样做，或者您只是在尝试。任何浏览器都有其解析引擎，他当然必须以最好的方式显示内容。
我正在制作一个高效的实时降价解析器 - 所以我希望它在用户输入降价时尽可能准确地显示（如果他们使用 HTML，那么它可能会解析不正确的 HTML直到他们关闭标签）。
解析对我来说很难深入。可能的铅。 Error Handling / Parsing
只是为了消遣，this page has many unclosed <h3> tags，这会导致...现代浏览器中的有趣行为！

标签： html html-parsing

【解决方案1】：

感谢@Ankith Amtange，我找到了explanation 所发生的事情。我会在这里写出来供以后的读者阅读。

<s> 标记超出其父标记，因为它是一个格式化元素。  标签会自动关闭，因为浏览器希望在父元素结束之前有一个关闭  标签。

HTML 解析器以不同方式处理其堆栈中的元素，分为以下几类 (source)：

特殊元素

以下元素具有不同级别的特殊解析规则：HTML's address、applet、area、article、aside、base、basefont、@98765353 ,blockquote,body,br,button,caption,center,col,colgroup,dd,dir,dir,dir,@987654346 987654348 @，dt，embed，fieldset，figcaption，figure，footer，form，frame，frameset，h1，h2，h3 ,h4,h5,h6,head,header,hgroup,hr,html,iframe,input,input,input,@9876 987654373 @，link，listing，main，marquee，meta，nav，noembed，noframes，noscript，object，ol，p , param, plaintext, pre, script, section, select, source, style, summary, tbody, tbody, tbody, source , template, textarea, tfoot, th, thead, title, tr, track, ul, wbr, 和 @987 MathML 的 mi、mo、mn、ms、mtext 和 annotation-xml；和SVG 的foreignObject、desc 和title。

格式化元素

以下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>

这个标记的解析很简单，直到“3”。此时，DOM 看起来像这样：

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

这里，开放元素的堆栈上有五个元素：html、body、p、b 和 i。活动格式化元素列表只有两个：b 和 i。插入方式为“in body”。

在收到标签名称为“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"

【讨论】：