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

前端之家收集整理的这篇文章主要介绍了未关闭/被错误的HTML标签延伸超过其父级前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当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>规范 – 我似乎找不到任何具体的浏览器如何解释和处理未封闭的标签。至少没有什么可以解释这个功能

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

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

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

解决方法

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

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

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"
原文链接:https://www.f2er.com/html/232838.html

猜你在找的HTML相关文章