> For the complete documentation index, see [llms.txt](https://1425816423.gitbook.io/my-knowledge-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1425816423.gitbook.io/my-knowledge-base/jing-yan-ji-lu/cai-keng-ji-lu/html-cai-keng-ji-lu.md).

# HTML踩坑记录

## 错误嵌套问题

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

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

### p标签不能嵌套块元素

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

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

### a标签不能嵌套a标签

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

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

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

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

```tsx
<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标签代表表格，不应该再将整个表格作为一个单元格嵌套到另一个表格中。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://1425816423.gitbook.io/my-knowledge-base/jing-yan-ji-lu/cai-keng-ji-lu/html-cai-keng-ji-lu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.