W3C HTML5标准阅读笔记 – dl、dt、dd

标准原文:http://www.w3.org/TR/html5/grouping-content.html#the-dl-element

在HTML中,"描述列表"元素dl、dt、dd可用于以键值对的方式来展示名词解释列表、问答列表等内容。在HTML4中,推荐使用dl、dt和dd标签来实现对话记录,但出于语义考虑,HTML5标准不建议这么做。关于对话记录,HTML5标准建议使用p标签来实现。

它们的语义为:

  • dl (description list)。容器,用于包含描述列表。浏览器会把dl标签作为普通的div块级元素来进行处理渲染,并给它的上下方添加外边距。除script和template这两个脚本元素外,dl元素内只能使用dt和dd元素。
  • dt (description term)。某个描述所针对的对象。浏览器会把dt标签作为普通的div块级元素来进行显示。值得注意的是,在语义上,dt标签本身并不会将其内容直接当作是需要解释的名词。如果需要在语义上定义要解释的名词,建议在dt标签内使用dfn标签来实现。
  • dd (description definition)。某个描述的具体内容。浏览器会把dd标签作为普通的div块级元素来进行显示,并给它的左侧添加外边距。dd标签中可以包含多个段落用以显示描述的内容。

在dl标签内,dt和dd是并行关系而不是层级嵌套的关系。比如以下3个问答所组成的例子:

<dl>  
  <dt>What do we want?</dt>
  <dd>Our data.</dd>
  <dt>When do we want it?</dt>
  <dd>Now.</dd>
  <dt>Where is it?</dt>
  <dd>We are not sure.</dd>
</dl>  

单个键值描述对中,dt元素和dd元素的数目关系可以是:

  • 一对一。单个描述对象,单个描述内容。比如以上的代码示例就是如此。
  • 一对多。单个描述对象,多个描述内容。比如对单词的名词解释,当某个单词有多个意思的时候就会出现这种情况。
  • 多对一。多个描述对象,单个描述内容。比如对单词的名词解释,当罗列多国语言中同一个意思的不同单词时,会出现这一关系。
  • 多对多。多个描述对象,多个描述内容。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!