我在哪里可以找到规则，在标签<div>内指定标签<p>？

问题描述 投票：0回答：3

我正在做一个任务，我需要用一些内容更正给定的 HTML 文件并写下这个更正的原因。

还有一些我知道必须更正的代码行，但是我找不到任何官方文档来明确说明这种嵌套是错误的。

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

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

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

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

如您所见，它没有明确说明不允许 

<div>
嵌套在 
<p>
中。

html specifications semantic-markup
3个回答
0
投票

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

HTML 标准由 W3C 维护，可以在here 找到它们对 HTML 元素的规范。如果您需要更多规范，您还可以参考 RFC 1866 和 2854。

0
投票

WHATWG 维护的 HTML 生活标准 规范指出，<p> 元素

 的
内容模型 仅限于短语内容。

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

短语内容 是文档的文本，以及在段落内标记该文本的元素。请注意，

<div>
元素不属于归类为短语内容的元素 - 因此它们不能有效地放置在段落中。

0
投票

p
的内容模型不允许
div

HTML规范中的相关声明指出

p
元素Content model是“Phrasing content”。

“短语内容” 是定义的一组元素，not 包括

div
.

<p><div></div></p>
实际上没有“工作”

另一个揭示此类 HTML 代码缺陷的有力论点可能是指出它有效地产生了什么，而且它很可能不是任何作者真正想要的：

生成的 DOM 结构 not 生成嵌套在段落内的 

div
，但它生成段落后跟 div，然后是第二个空段落。

各种证明：

Hixie 的 DOM 查看器

Feeding

Ian Hickson 的“Live DOM Viewer” 极简文档

<!doctype html><body><p class="par"><div></div></p> 
 显示结果结构如下：




body 元素有三个直接子元素：带有类“par”的段落、div 和没有类的第二段。


验证者


或者，始终建议咨询 
W3C 标记验证器 以查找错误。在这种情况下，它会指出“流浪”结束标签：

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

本地演示


或者您可以使用 devtools DOM inspector 自行检查或使用 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”[...]


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


为令牌插入一个 HTML 元素。






2。松散地解释：
“流浪”</p>
 在 HTML 中总是产生没有属性的空段落。




标签名称为“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
 元素”指令的反向引用中找到
。
    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.