Question

我正在尝试在dt中显示或隐藏某些dd / dl个群组。这是有效的HTML吗？浏览器应该抱怨这个还是合法的？我查看了dl规范，但找不到任何说明dl可以包含dt和dd个孩子以外的内容的内容。我需要这样做，因为我正在使用angularJS，这提供了添加或删除DOM

中元素的简洁方法

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>

  <span ng-if="true">
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
  </span>
</dl>

Answer 1

div中的dl分组现在对WHATWG HTML有效，请参阅 https://html.spec.whatwg.org/multipage/semantics.html#the-dl-element

dl元素

内容模型：

：零个或多个组，每个组由一个或多个dt元素组成，后跟一个或多个dd元素，可选地与支持脚本的元素混合。

或者：一个或多个div元素，可选地与支持脚本的元素混合。

<dl>
 <div>
  <dt> Last modified time </dt>
  <dd> 2004-12-23T23:33Z </dd>
 </div>
 <div>
  <dt> Recommended update interval </dt>
  <dd> 60s </dd>
 </div>
 <div>
  <dt> Authors </dt>
  <dt> Editors </dt>
  <dd> Robert Rothman </dd>
  <dd> Daniel Jackson </dd>
 </div>
</dl>

Answer 2

这可能适用于大多数浏览器，但它不是有效的HTML。它也可能打破一些CSS。您可能只需要使用2 ng-if指令

<dt ng-if="true">Term 2</dt>
<dd ng-if="true">Definition 2</dd>

请注意，如果您需要执行诸如迭代项目列表之类的操作，则可以使用角度ng-repeat-start和ng-repeat-end。

<dt ng-repeat-start="item in list">Term 2</dt>
<dd ng-repeat-end>Definition 2</dd>

Answer 3

这不是有效的HTML5，因为dl元素的内容模型是

零个或多个组，每个组由一个或多个dt元素组成后跟一个或多个dd元素，可选择混合使用 script-supporting elements

因此dl无法包含span，但大多数浏览器都会正确呈现它。

我建议使用di元素，而不是span。它们也是无效的HTML5，但在XHTML2中有效。

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
  <di ng-if="true">
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
  </di>
</dl>

然而，缺点是旧IE无法识别di，因此除非您在加载文档时使用document.createElement('di')，否则它不会将CSS样式应用于它们。 / p>

在`dl`下的`span`中分组`dt`和`dd`

3 个答案:

dl元素

内容模型：