Paragraph p in html

以前我一直以为 html 里的 tags 除了默认样式不同意外，其它都是一样，之所以要定义很多并给予不同的名字，主要是为了区分上下文，语义上的区别。当然啦，还有一些功能上的不同，比如，input，table 之类的。

但是从未想过会改变指定的 DOM 结构，比如你写的是：

<p>
    demo
    <section>foo</section>
</p>

当浏览器渲染时会改为：

<p>demo</p>
<section>foo</section>

我之所以会发现这个问题是在 Fun.Blazor 里，我定义的是

p {
    "demo"
    section { "foo" }
}

我一直以为是我写的弄个 bug, 或者是 blazor 里有一些特殊处理，然而直到现在读到 mdn 的定义时，才发现，

Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing p tag. See "Tag omission" below.

涨知识啦 🤷‍♂️