首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >描述列表:分组<dt>and它的“子”<dd>?

描述列表:分组<dt>and它的“子”<dd>?
EN

Stack Overflow用户
提问于 2014-10-20 05:19:39
回答 2查看 320关注 0票数 0

HTML5有很好的描述标记。w3.org给出下面的示例

代码语言:javascript
运行
复制
<dl>
 <dt><dfn>happiness</dfn></dt>
 <dd class="pronunciation">/'hæ p. nes/</dd>
 <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd>
 <dd>The state of being happy.</dd>
 <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd>
 <dt><dfn>rejoice</dfn></dt>
 <dd class="pronunciation">/ri jois'/</dd>
 <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd>
 <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd>
</dl>

描述<dd>元素可以用作“dtdl元素中的dd元素之后”的上下文。

这让我(一个完全的初学者)觉得很奇怪:这些dd元素是不是应该属于他们所描述的dt呢?因为<dt>happiness</dt><dd> The state of being happy</dd>绝对是相互关联的,它们互相描述吗?使用不带结构的dtdd对齐,判断特定dd描述什么的唯一方法是找到最后一个dt。我会觉得更安全的东西,如(di对每一项)

代码语言:javascript
运行
复制
<dl>
  <di>
    <dt><dfn>hapiness</dfn></dt>
    <dd class="pronunciation">/'hæ p. nes/</dd>
    <dd>The state of being happy</dd>
  </di>
</dl>

虽然我很想问“我担心这件事对吗?”,但我的问题是:

  • dl中使用html5时,有哪些约定?他们是以某种方式对<dt><dd>进行分组,还是仅仅是好呢?
  • 如果我要对它们进行分组(如上面所述,但使用标准标记),那么是否有任何标记可以在语义上使用?
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-10-20 06:26:05

据我所知,<dd>是它前面的<dt>的定义。从技术上讲,每个<dt>不会有一个以上的<dt>。做这样的事:

代码语言:javascript
运行
复制
<dl>
  <dt>happiness</dt>
  <dd>
    <span class="pronunciation">/'hæ p. nes/</span>
    <span class="definition">The state of being happy</span>
  </dd>
</dl>

然后按照不同的方式设计跨度。

编辑:

我很抱歉,正如大卫·托马斯( David )所指出的那样,每个<dt> (<dt>http://html5doctor.com/the-dl-element)拥有一个以上的http://html5doctor.com/the-dl-element是可以的。我认为我在这里的主要想法是,我仍然认为如果<dd>像上面那样被分成几个部分的话,它会更整洁,更容易风格。

票数 -1
EN

Stack Overflow用户

发布于 2014-10-20 11:20:04

dl元素从早期(从HTML2.0正式开始)就一直是HTML的一部分,而且定义一直很模糊。名义上被称为“定义列表”,通常被解释为“描述列表”或实际上只是“关联列表”。它将dt元素中的“名称”与它之后的dd元素的内容关联起来,直到下一个dt。如果有几个连续的dt元素,它们都与下面的dd元素相关联。

关联(分组)是在dl中定义的,但它是“纯语义的”;它本身没有任何含义,甚至不能使用某些中间标记使其显式化,因为dl语法只允许作为子级的dtdd (和script,但这没有帮助)。

结论取决于你所期望的关联将被用于什么。如果您确实需要一个组的容器,只需使用其他一些标记就可以将所需的标记放入其中。如果您希望关联与辅助软件相关,可以考虑使用ARIA属性,如ARIA上的MDN页面:上的下面示例所建议的那样

代码语言:javascript
运行
复制
<dl>
    <dt id="anathema">anthema</dt>
    <dd role="definition" aria-labelledby="anathema">a ban or curse solemnly pronounced
                                                     by ecclesiastical authority
                                                     and accompanied by excommunication</dd>
    <dd role="definition" aria-labelledby="anathema">a vigorous denunciation : cursor</dd>

    <dt id="homily">homily</dt>
    <dd role="definition" aria-labelledby="homily">a usually short sermon</dd>
    <dd role="definition" aria-labelledby="homily">a lecture or discourse on or of a moral theme</dd>
</dl>

然而,这种添加标记的实际用途很小。大多数软件都忽略了它。此外,如果列表写得很好,“名称”和“值”之间的关联在没有这种标记的情况下就足够明显了。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/26458958

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档