音频标签的“允许父母”是什么？

Question

根据 MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)，音频标签的“允许的父级”是“任何接受嵌入内容的元素”，即：audio、canvas、[@987654326 @]、iframe、img、math、object、picture、svg、video (https://www.w3.org/TR/html51/dom.html#embedded-content)。

所以，我不明白audio 标签或canvas|iframe|img 等标签如何成为audio 标签的“准许父母”，但我' d 理解它们可以是body 标签和一些（不是全部）元素“归类为流内容”，例如div、article 等标签。

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

<audio src="http://soundbible.com/grab.php?id=2083&type=mp3" controls>
  <audio src="http://soundbible.com/grab.php?id=2083&type=mp3" controls>
    Your browser does not support the audio tag.
  </audio>
  Your browser does not support the audio tag.
</audio>

<canvas  width="200" height="100" style="border:1px solid black;">
 <audio src="http://soundbible.com/grab.php?id=2083&type=mp3" controls>
    Your browser does not support the audio tag.
  </audio>
 Your browser does not support the canvas tag.
</canvas>

Answer 1

简短的回答是，audio 元素基本上可以在文档中的任何位置使用，除非在很明显直观地无法使用它的地方。

因此，audio 不允许出现在 head 中，或者在以下位置：不作为 dl 元素的直接子元素（需要 dt 和 dd）或不作为直接子元素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 检查器中实现此要求

如果您对 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 检查器的作者的角度来看，最终结果是，如果您尝试使用 audio元素在文档中的某个位置，其中 RelaxNG 架构不允许它（common.elem.flow 或 common.elem.phrasing 不允许），然后检查器知道并会给您一个明确的错误消息。