什么是＆＃34;允许的父母＆＃34;音频标签？

Question

根据MDN（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio），＆＃34;允许的父母＆＃34;音频标签是＆＃34; 任何接受嵌入内容的元素＆＃34;，即：audio，canvas，[embed]，{ {1}}，iframe，img，math，object，picture，svg（https://www.w3.org/TR/html51/dom.html#embedded-content）。

因此，我无法理解video标记或audio | canvas | iframe等标记如何成为＆＃34;允许的父母＆ ＃34; img标记，但我知道它们可以是audio标记和一些（不是全部）标记＆＃34;分类为流内容＆＃34;例如body，div等标记。

MDN页面中是否有错误，或者（更有可能）我只是不明白？

＆＃13;

＆＃13;

article

＆＃13;

＆＃13;

＆＃13;

Answer 1

简短的回答是，audio元素基本上只允许在文档中的任何位置使用，除非在几乎非常直观的地方使用它是没有意义的。

因此，audio中不允许使用head，或者在以下位置使用dl：不是dt元素的直接子元素（需要dd和{{} 1}}）或不作为ul元素的直接子元素（需要li）等。

就定义规范允许audio的地方的正式要求而言，请继续阅读......

更长的解释：允许<audio>的实际规范要求

我认为MDN的措辞令人困惑，因为the corresponding requirement in the the HTML spec也令人困惑。该要求将其称为audio被允许“预期嵌入内容”，但不直接回答“允许嵌入内容在哪里？”的问题。

弄清楚它有点令人费解：你必须首先查看“categories”规范defines the audio element to belongs to，它们是：

• 流量内容。
• 短语内容。
• 嵌入内容。
• 如果元素具有控件属性：交互式内容。
• 如果元素具有控件属性：可触及内容。

其中，规范也没有直接回答“允许互动内容在哪里？”和“允许触摸内容在哪里？”的问题。

但规范确实更直接地回答了“允许流内容在哪里？”和“允许使用短语内容在哪里？”的问题 - 因为有些元素的内容模型是明确定义的允许包含措辞内容和/或流内容。

例如，如果您查看Content model section for the body element，就会看到 内容模型 ：流内容。因此body元素是audio元素的允许父元素（因为audio元素属于“流内容”类别）。

如果您查看Content model section for the p element，您会看到 内容模型 ：短语内容。因此，p元素是audio元素的允许父级（因为audio元素属于“短语内容”类别）。

等等。

如果您想要将audio元素的允许父元素的每个元素的完整列表放在一起，您可以：

1. 转到the point in the spec where the term content model is defined。
2. 点击实际的粗体字内容模型。

如果你这样做，你会看到弹出的是：



所有项目符号项都有超链接;如果您按照它们操作，则会直接转到相应元素的内容模型部分。

如何在HTML Checker中实现此要求

如果您对W3C HTML checker如何实现这一点感到好奇：它不会使用audio元素的允许父元素的每个元素的详尽列表。相反，它使用RelaxNG模式，它以与规范几乎相同的方式定义事物：它具有common.elem.flow和common.elem.phrasing个元素集，这些元素由模式中的RelaxNG元素定义引用。

例如，p元素的RelaxNG模式定义如下所示：

p.elem =
    element p { p.inner & p.attrs }
p.attrs =
    (   common.attrs
    &   common.attrs.aria?
    )
p.inner =
    ( text & common.elem.phrasing* )

common.elem.flow |= p.elem

就p内容模型而言，这非常简单：

p.inner = ( text & common.elem.phrasing* )表示p元素可以包含与文本混合的任意数量的common.elem.phrasing元素。

然后audio元素的RelaxNG模式定义如下所示：

audio.elem.flow =
    element audio { audio.inner.flow & audio.attrs }
audio.elem.phrasing =
    element audio { audio.inner.phrasing & audio.attrs }
audio.attrs =
    (   common.attrs
    &   media.attrs
    &   common.attrs.aria.landmark.application?
    )
audio.inner.flow =
    (   media.source
    ,   track.elem*
    ,   common.inner.transparent.flow
    )
audio.inner.phrasing =
    (   media.source
    ,   track.elem*
    ,   common.inner.phrasing
    )

common.elem.flow |= audio.elem.flow
common.elem.phrasing |= audio.elem.phrasing

这里我们不关心内容模型，而是关注允许audio元素的位置。最后一行是导致audio元素放置在common.elem.phrasing集合中的部分，正如我们在上面看到的那样，由p元素引用。

因此，RelaxNG模式实际上密切地模拟了HTML规范如何构建内容模型关系。我想通过相应的规范语言读取并不是更直观 - 但是使用HTML检查器的作者的观点的最终结果是，如果你试图使用{{1元素在RelaxNG模式不允许的文档中的某个位置（某处不允许audio或common.elem.flow），然后检查器知道并将给出明确的错误消息。< / p>