当然,这个标签不正确:
<b><i>Hi</b></i>
但是,它仍然在现代浏览器中完美运行(至少在最新版本的chrome中)。
对这个错误的代码顺序有什么负面影响?
另外,看看这个:
<table><tr><td>Hi</td></table></tr>
浏览器将如何处理此代码?
现代浏览器将尝试假设您要对代码执行的操作。根据我对浏览器的谦虚理解,我注意到了这一点:
每个开始标记都有一个结束标记。每个结束标记必须有一个开始标记,如果没有,那么就不需要有结束标记。如果缺少结束标记,浏览器将为您完成代码并添加结束标记(这是棘手的部分)。
很可能结束标记将在打开新部分或新标签集合之前。
如果您的代码是:
<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在<b>
开幕之前为我关闭了<c>
,这是我的意图。
虽然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>
希望有所帮助,我希望我的理解在某种程度上是准确的。
通常,浏览器会尝试理解您的意思。
“负面影响”是不可预测性。