＜p＞里可以写＜div＞吗? 你可能真的不知道

我不是女神ヾ 2024-05-24 04:24 78阅读 0赞

### `<p>` 里可以写 `<div>` 吗? 你可能真的不知道 ###

在学习 `CSS` 计数器 `counters()` 函数时, 我尝试使用 `<div>` 和 `<p>` 互相嵌套组成 `HTML` 结构. 如下

页面显示元素都正常, 但是计数器就是不正常?, 于是我检查元素发现整个页面的 `HTML` 结构被浏览器悄悄地改了.

浏览器为什么要这么做呢??

![在这里插入图片描述][0b94ceead48f4137a0a31beccd1af73c.png_pic_center]

#### `content model` ####

`HTML` [规范][Link 1]中的每一个元素都有一个内容模型: **`用来描述该元素期望的内容, 就是期望什么类型的`DOM`作这个元素的子节点`**. 规范中明确了 `HTML` 元素的内容必须匹配这个元素的 `content model`.

*  `<p>` 的 `content model` 是 [phrasing content][]
    
     *  如果我们看看下图, 就大概知道 `phrasing content` 很多都是常说的 `inline` 内联元素.
     *  ![在这里插入图片描述][43c39df743374636b93da1c7edea32a2.png_pic_center]
 *  `<div>` 的 `content model` 是 [flow content][]

因此, `<p>` 不能包含 `<div>`(反过来可以), 不仅仅是 `<div>`, 任何非 `phrasing content` 的元素都不行, 包括 `<h1>`, `<ul>` 等, 甚至包含自身, 因为 `<p>` 自身类型(`Categories`)属于 `Flow content`.

#### `Categories` ####

?怎么又出现了 `Categories` 啊? [规范][Link 2]中说的很清楚, `<p>` 希望 `phrasing content` 类型的元素作为子节点, 那么哪些元素是 `phrasing content` 呢? 这就是 `Categories` 要回答的问题了.

就简单理解下面看一下 `HTML` 规范中对元素所属的 `Categories` 的划分. 下图很有意思, 几乎所有的元素都是 `Flow Content`,  
![在这里插入图片描述][c5cfe1e80bfa488180a720ba9839aeb1.png_pic_center]

#### `还没有真正回答开头的问题, 能写吗?` ####

是可以的, 只不过是通过 `js`, 不过不推荐啦~

let secondP = document.getElementById('secondP');
    let newDiv = document.createElement('div');
    newDiv.innerHTML = 'Oops';
    secondP.append(newDiv);

![在这里插入图片描述][540076ed64844ade8be8d3185902faaf.png_pic_center]

#### 参考 ####

*  [Why can’t the `<p>` tag contain a `<div>` tag inside it?][Why can_t the _p_ tag contain a _div_ tag inside it]
 *  [https://html.spec.whatwg.org/multipage/dom.html\#flow-content][https_html.spec.whatwg.org_multipage_dom.html_flow-content]
 *  [https://html.spec.whatwg.org/multipage/dom.html\#contexts-in-which-this-element-can-be-used][https_html.spec.whatwg.org_multipage_dom.html_contexts-in-which-this-element-can-be-used]
 *  [https://clearlydecoded.com/html-content-models][https_clearlydecoded.com_html-content-models]
 *  [https://html.spec.whatwg.org/multipage/dom.html\#concept-element-categories][Link 2]

[0b94ceead48f4137a0a31beccd1af73c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/64b976c237e340a59ebe8f4cfa01ddf6.png
[Link 1]: https://html.spec.whatwg.org/multipage/dom.html#concept-html-contents
[phrasing content]: https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element:phrasing-content-2
[43c39df743374636b93da1c7edea32a2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/d180b3528f91455d86301b4d1b7a6694.png
[flow content]: https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element
[Link 2]: https://html.spec.whatwg.org/multipage/dom.html#concept-element-categories
[c5cfe1e80bfa488180a720ba9839aeb1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/b0a1c175138447378696a238a9827f45.png
[540076ed64844ade8be8d3185902faaf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/de03cc2be5974b33970be6f33a0b87aa.png
[Why can_t the _p_ tag contain a _div_ tag inside it]: https://stackoverflow.com/questions/8397852/why-cant-the-p-tag-contain-a-div-tag-inside-it
[https_html.spec.whatwg.org_multipage_dom.html_flow-content]: https://html.spec.whatwg.org/multipage/dom.html#flow-content
[https_html.spec.whatwg.org_multipage_dom.html_contexts-in-which-this-element-can-be-used]: https://html.spec.whatwg.org/multipage/dom.html#contexts-in-which-this-element-can-be-used
[https_clearlydecoded.com_html-content-models]: https://clearlydecoded.com/html-content-models