HTML/PHP - 错误的结束标签顺序

Question

当然，这个标签是不正确的：

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

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

这种错误的代码顺序有什么负面影响？

另外，看看这个：

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

浏览器将如何处理此代码？

Answer 1

现代浏览器会尝试假设您正在尝试对您的代码执行什么操作。 根据我对浏览器的谦虚理解，我注意到了这一点：

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

结束标签很可能会在打开新部分或新标签集合之前出现。

如果您的代码是：

<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）会以不同的方式处理它。它不会知道您的意图是什么以及哪个元素是另一个元素的父元素。

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

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

Firefox 和 Chrome 按我的意图将 <b> 和 <c> 视为同级并显示所有项目，但在 IE7 中它只显示一个项目，因为它假定 <c> 是 <b> 的子级。

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

虽然 IE 将 <b> 打开后的所有内容都包含为 <b> 的子项，但它本身使得所有后续元素都属于 <b> 并仅显示一个列表项。

Firefox 和 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>

希望对您有所帮助，我希望我的理解在某种程度上是准确的。

Answer 2

一般来说，浏览器会尝试理解您的意思。

“负面影响”是不可预测性。