HTML踩坑记录

错误嵌套问题

HTML是非常严谨的语言，如果错误地嵌套标签就会导致解析异常。

最常见的是a标签嵌套a标签和p标签嵌套块级标签的问题。

p标签不能嵌套块元素

最常见的错误是p标签内嵌套div，这会导致解析异常。

<p><div>123</div></p>
// 该html会被解析为
<p></p>
<div>123</div>
<p></p>

a标签不能嵌套a标签

根据规范，a标签内不能嵌套a标签。

<a><a>123</a></a>
// 这会被解析为
<a></a>
<a>123</a>

容易出错的地方在于使用组件时，例如嵌套使用Nextjs/Link组件，由于Link组件会被解析为a标签，因此就会出现a标签嵌套。

因为a标签可以嵌套块级元素，有时a标签已经包裹了一个块级元素，但是我们又想在其内部再添加某个元素来跳转到另一个页面，这就可能会使用嵌套a标签。

<a>
		123
    <div>
        <a>
            <span> 123 </span>
        </a>
    </div>
		123
</a>

这会导致HTML解析异常，正确的做法是在内部span标签监听click事件，然后用相关API进行跳转，例如window.location = '/' 。

其他

除此之外，还有以下几种情况需要注意：

1. button标签不能嵌套button标签：button标签代表按钮，如果嵌套button标签也会导致结构错误。

2. form标签不能嵌套form标签：form标签代表表单，在一个表单内部，不应该再包含另一个表单。

3. h1-h6标签不能嵌套h1-h6标签：h1-h6标签代表标题，如果出现嵌套会导致文档结构混乱。

4. select标签不能嵌套select标签：select标签代表选择框，如果嵌套select标签则会导致页面错误。

5. table标签不能嵌套table标签：table标签代表表格，不应该再将整个表格作为一个单元格嵌套到另一个表格中。