在哪里可以找到规则,在标记 <p> 中指定了标记 <div>?

Where I can find a rule, specified that tag <div> inside tag <p>?

提问人:codingForCode 提问时间:4/19/2023 最后编辑:codingForCode 更新时间:4/24/2023 访问量:110

问:

我正在做一项任务,我需要更正带有一些内容的给定 HTML 文件并写下此更正的原因。

我知道有些代码行必须更正,但我找不到任何官方文档,这些文档会明确指出这种嵌套是错误的。

<p class = "par">
  <div>...</div>
</p>

所以我的问题是,我在哪里可以找到官方规范或其他文件中明确说明的官方声明?

我找到了一些文章,清楚地提到了这一点,但我需要一些更“官方”的东西。我最多能找到的是:

text/html 中的标记省略: 如果 p 元素后面紧跟 address、article、aside、blockquote、details、div、dl、fieldset、figcaption、figure、footer、form、h1、h2、h3、h4、h5、h6、header、hgroup、hr、main、menu、nav、ol、p、pre、search、section、table 或 ul 元素,或者如果父元素中没有更多内容,并且父元素是不是 a 的 HTML 元素,则可以省略 p 元素的结束标记。 audio、del、ins、map、noscript 或 video 元素,或自治自定义元素。

正如你所看到的,它没有明确说明不允许嵌套在里面。<div><p>

HTML 规范 语义标记

评论

1赞 beeef 4/19/2023
你能分享一下你认为有问题的HTML行吗?
0赞 codingForCode 4/19/2023
''' <p class=“par”> <div>...</分区> </p> '''
0赞 Rojo 4/19/2023
我想你正在寻找 w3.org
1赞 Rojo 4/19/2023
编辑您的帖子以包含您的代码
1赞 Heretic Monkey 4/19/2023
所以。。。。您希望我们为您做研究吗?:)这里有一个提示:在 MDN 的 <p> 元素文档中,它说允许的内容是措辞内容。您必须回答的问题是措辞是否是内容。div

答:

0赞 mimak 4/19/2023 #1

没有用于设计页面布局的官方规范。建议根据标签的语义含义使用标签,以改善搜索结果 (SEO) 和网页的可访问性

HTML 标准由 W3C 维护,他们的 HTML 元素规范可以在这里找到。如果需要更多规范,也可以参考 RFC 18662854

1赞 Sean 4/24/2023 #2

WHATWG 维护的 HTML Living Standard 规范指出,<p> 元素的内容模型仅限于措辞内容

元素的内容模型是对哪些内容必须作为元素的子元素和后代包含的描述。

措辞内容是文档的文本,以及在段落内级别标记该文本的元素。请注意,该元素不属于归类为措辞内容的元素,因此它们不能有效地放置在段落中。<div>

1赞 myf 4/24/2023 #3

不允许的内容模型pdiv

HTML 规范中的相关声明指出,p 元素内容模型是“措辞内容”。

“措辞内容”是定义的元素集,不包括 .div

<p><div></div></p>实际上并不“工作”

另一个相当重要的论点揭示了这种HTML代码的缺陷,可能是指出它有效地产生了什么,而且它很可能不是任何作者的真正意图:

生成的 DOM 结构不会生成嵌套在段落内的 div,但它会生成段落,然后是 div,然后是第二个空段落。

各种证明:

Hixie 的 DOM 查看器

用简约的文档喂养 Ian Hickson 的“Live DOM Viewer”

<!doctype html><body><p class="par"><div></div></p>

显示结果结构如下:

Body 元素有三个直接子元素:带有类“par”的段落、div 和不带类的第二个段落。

验证者

或者,始终建议咨询 W3C 标记验证器以获取错误。在本例中,它将指出“stray”结束标记:

Error: No p element in scope but a p end tag seen.

本地演示

或者你可以用devtools DOM检查器自己检查,或者用CSS“探针”做简单的演示:

document.write(document.getElementsByTagName('p').length)
body,
p,
div {
  margin: .1em;
  padding: .2em;
  background: #0005;
}

p {
  border: outset;
}

div {
  border: double;
}

p:empty {
  border: dotted;
}

html {
  background: darkslategrey;
  color: snow;
}

code {
  font-family: monospace, monospace;
  background: black;
}
Expecting <code>body</code>: true.
<p>
 Expecting <code>body > p</code>: true.
 <div>
  Expecting <code>body > p > div</code>: false,
  actually <code>body > div</code>.
 </div>
 Expecting <code>body > p</code>: false,
 actually <code>body</code>.
 Empty paragraph follows:
</p>
Expecting <code>body</code>: true.
<hr>
Total paragraphs count:

为什么

为什么在以下两个规则的“解析 HTML 文档”中指定了这样:

1. 松散地解释:任何“块级”元素的开始标签都隐式关闭了打开的 p

开始标记,其标记名称为以下名称之一:[...]“div” [...]

如果打开的元素堆栈在按钮范围内有一个元素,则关闭一个元素。pp

插入标记的 HTML 元素。

2. 粗略地解释一下:HTML 中的“stray”</p>总是产生没有属性的空段落。

标签名称为“p”的结束标签

如果打开元素堆栈在按钮作用域中没有 p 元素,则这是一个解析错误;为没有属性的“p”开始标记插入 HTML 元素。

关闭 p 元素。

body {
  counter-reset: x;
}

p:empty::before {
  content: counter(x) '. empty paragraph';
  counter-increment: x;
}
</p>
</p>
</p>
</p>

这两个规则都可以在“关闭 p 元素”指令的反向引用中找到。