HTML dfn和abbr标签及title属性的正确使用

Question

我正在尝试找出使用dfn标签以及title属性和abbr标签的正确方法我不确定我做得是否正确，希望有人能告诉我下面的示例是否正确或错误，如果是，那么哪个(S)示例是错误的，为什么?这样我就可以更好地理解我在做什么，并纠正我的错误(S)谢谢？

示例1

<p><dfn>CSS</dfn> is a simple mechanism for adding style to Web documents.</p>

示例2

<p><dfn title="Cascading Style Sheets">CSS</dfn> is a simple mechanism for adding style to Web documents.</p>

示例3

<p><dfn title="A style sheet language used for describing the look and formatting of a document written in a markup language.">CSS</dfn> is a simple mechanism for adding style to Web documents.</p>

示例4

<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> is a simple mechanism for adding style to Web documents.</p>

示例5

<p><dfn title="CSS"><abbr title="Cascading Style Sheets">CSS</abbr></dfn> is a simple mechanism for adding style to Web documents.</p>

Answer 1

我认为应该是：

<p>
  <dfn>
    <abbr title="Cascading Style Sheets">CSS</abbr>
  </dfn>
  is a simple mechanism for adding style to Web documents.
</p>

否则，如果它只包含一个带有

属性的abbr元素，那么这个术语就是该属性的值。

MDN

Answer 2

它们都是“正确的”，因为它们与HTML规范和草案中abbr和dfn的松散定义相匹配。这里的声明根本不是一个真正的定义(它说的是CSS的一些东西，而不是指定它与其他实体区分开来所需的基本功能)，“CSS”不是真正的缩写，而是名称，尽管名义上是一些单词的缩写。但是规范非常模糊，甚至问题中的标记都可能被解释为与这些元素的“语义”相匹配。

这个问题是一个相当学术的问题，因为abbr和dfn对默认呈现的某些特性几乎没有影响，你可以而且应该使用确认或覆盖这种样式的CSS规则，然后你几乎可以使用span。

Answer 3

TL;DR:虽然这些示例中有两个在语义上是正确的，但最具语义的方式是 example 4.

<p><dfn>CSS</dfn> is a simple mechanism for adding style to Web documents.</p>

正确。根据Mozilla的说法，因为您没有使用title属性，所以"CSS“被认为是p中的句子定义的术语。

<p><dfn title="Cascading Style Sheets">CSS</dfn> is a simple mechanism for adding style to Web documents.</p>

不正确。根据Mozilla的说法，title属性的含义是“该术语的另一种形式”，但仅当所定义的术语不是缩写时。当术语是缩写时，应该在dfn元素中使用abbr。

<p><dfn title="A style sheet language used for describing the look and formatting of a document written in a markup language.">CSS</dfn> is a simple mechanism for adding style to Web documents.</p>

不正确。title属性的含义是“术语的另一种形式”，而不是它的定义。

<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> is a simple mechanism for adding style to Web documents.</p>

正确。根据Mozilla的说法，这是推荐的用法。

<p><dfn title="CSS"><abbr title="Cascading Style Sheets">CSS</abbr></dfn> is a simple mechanism for adding style to Web documents.</p>

不正确。根据Mozilla的说法，如果dfn元素只包含一个子元素，并且没有自己的任何文本内容，并且子元素是一个本身具有title属性的abbr元素，那么abbr元素的title属性的确切值就是所定义的术语。因此，语义系统(A.I.、lurkers、accessibility等)不应该考虑dfn元素的标题属性。

注:我的答案主要是利用Mozilla上dfn article的“同时使用缩写和定义”和“指定要定义的术语”部分得出的。