HTML / PHP-错误的结束标记顺序 [英] HTML/PHP - Wrong closing tag order

问题描述

当然，此标记是不正确的：

Of course, this tag is NOT correct :

<b><i>Hi</b></i>

但是，它仍然可以在现代浏览器中完美运行（至少在最新版本的chrome中）。

However, it still runs perfectly in modern browsers (at least in newest version of chrome).

此错误代码顺序的负面影响是什么？

What is the negative effect for this wrong order of code?

也请看一下：

<table><tr><td>Hi</td></table></tr>

浏览器如何处理此代码？

How will the browsers treat THIS code?

推荐答案

现代浏览器将尝试假设您要对代码执行的操作。
从我对浏览器的拙见中，我注意到了这一点：

Modern browsers will try to assume what you are trying to do with your code. From my humble understanding about browsers this is what I noticed:

每个开始标签都会有一个结束标签。
每个结束标签都必须有一个开始标签，如果没有，则不需要该结束标签。
如果缺少结束标记，浏览器将为您完成代码并添加结束标记（这是棘手的部分）。

Every opening tag will have a closing tag. Every closing tag must have an opening tag, if not, then there's no need to have that closing tag. If a closing tag is missing, the browser will complete your code for you and add a closing tag (this is the tricky part).

最有可能在打开新部分或新标签集合之前关闭标签。

Most likely the closing tag will be before opening a new section or new tags collection.

如果您的代码是：

<table> 
  <tr> 
    <td> 
       Hi
    </td> 
  </table> 
</tr>

然后将其解释为：

<table>//opening OK
  <tr>//opening OK
    <td>//opening OK
       Hi
    </td>//closing an opened tag - OK
  </table>//closing table, we still have <tr> opened, close <tr> first by adding </tr> before this tag /*now '<tr>' has been closed already and then </table> is closed*/     
</tr>//this closing tag doesn't have an opening, remove it. 

语法自动更正会导致：

<table> 
  <tr> 
    <td> 
       Hi
    </td> 
  </tr>
</table> 

某些浏览器，但是，像IE7一样。它不会知道您的意图是什么，哪个元素是另一个元素的父元素。

Some browsers, however, like IE7 will treat that differently. It won't know what your intention is and which element is the parent of another.

在以下示例中，假设我们忘记关闭标签< b> 。现在，< c> 应该是< b> 的孩子还是同级兄弟？

In the following example, assume we forgot to close tag <b>. Now, should <c> be a child of <b> or a sibling?

<a>
 <b> // doesn't have a closing
  <c>
  </c>
</a>

Firefox和Chrome处理< b> 和< c> 如我所愿，并显示了所有项目，但是在IE7中，它仅显示一项，因为它假定< c> 是< b> 的子级。

Firefox and Chrome treated <b> and <c> as sibling as I intended and displayed all items, but in IE7 it only displayed one item because it assumed <c> is a child of <b>.

因此，我假设Firefox和chrome在打开<$ c $之前为我关闭了< b> c>< c> 这是我的意图。

Therefore I assumed that firefox and chrome closed <b> for me before the opening of <c> which was my intention.

虽然IE将< b> 开放后的所有内容都作为< ; b> 本身，使所有后续元素都位于< b> 之下，并且仅显示一个列表项。

While IE included everything after the opening of <b> as children of <b> itself making all the subsequent element fall under <b> and displayed only one list item.

Firefox和Chrome：

Firefox and Chrome:

<a>
 <b>
 </b> // auto close here as expected
 <c>
 </c>
</a>

IE：

<a>
 <b>
  <c>
  </c>
 </b>//auto close, they closed <b> just before closing the parent <a> logical but somehow falsy!
</a>

希望能有所帮助，我希望我的理解是准确的。

Hope that helps, and I hope that my understanding is somehow accurate.

这篇关于HTML / PHP-错误的结束标记顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！