HTML dfn和abbr标记以及title属性的正确用法

我正在试图找出使用

dfn

标记以及

title

属性和

abbr

标记的正确方法。我不确定我是否正确，希望有人能告诉我下面的示例中是否有正确或错误的示例，如果有，请告诉我哪些示例是错误的，为什么这样我才能更好地理解我在做什么，并纠正我的错误谢谢

例1

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

CSS是一种向Web文档添加样式的简单机制

例2

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

CSS是一种向Web文档添加样式的简单机制

例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>

CSS是一种向Web文档添加样式的简单机制

例4

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

CSS是一种向Web文档添加样式的简单机制

例5

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

CSS是一种向Web文档添加样式的简单机制

我认为应该是：

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

它们都是“正确的”，因为它们与HTML规范和草稿中
abbr
和
dfn
的松散定义相匹配。这里的语句根本不是一个定义（它说的是CSS，而不是指定它与其他实体区别所需的基本特性，以及“CSS”）它不是一个缩写，而是一个名称，虽然名义上是一些单词的缩写。但是规范非常模糊，甚至问题中的标记也可能被解释为与这些元素的“语义”匹配

这个问题相当学术化，因为
abbr
和
dfn
对默认渲染的某些功能几乎没有任何影响，您可以也应该使用CSS规则来确认或覆盖这种样式，然后您几乎可以使用
span
TL；DR：尽管其中两个示例语义正确，最具语义的方式是示例4。

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

不正确。根据，
title
属性表示“术语的另一种形式”，但仅当定义的术语不是删节时。当术语是删节时，
abbr
应在
dfn
元素中使用

正确。根据，这是建议的用法

，如果
dfn
元素包含单个子元素，并且没有自己的任何文本内容，并且子元素是本身具有title属性的
abbr
元素，那么
abbr
元素的
title
属性的确切值就是所定义的术语。因此，title属性语义系统不应考虑
dfn
元素的属性（即潜伏者、可访问性等）


注意：我的回答主要是利用“同时使用缩写和定义”和“指定所定义的术语”关于Mozilla的章节
好吧，我只想说他们没有遵循建议。我们可以使用
V Vegan gf麸质Free
。非常感谢。这总是取决于你在语义上试图实现什么。我只是做了一些猜测，但我相信
标记在语义上不属于此上下文lowing是正确的：
V gf
在你的例子中，你完全省略了“纯素”或“无麸质”我需要在内容中添加“纯素”或“无麸质”，即沿着
V
或
gf
显示，这就是我为什么使用
，你会怎么做。这些要求很有帮助！；-）因为它没有定义“素食主义者”和“无麸质”这两个词，只包含缩写和完整的词，我认为最具语义的方式是：
V Vegan-gf-麸质免费
你可以在造型上加上两个
span
，但它们没有语义含义。
<p><dfn title="Cascading Style Sheets">CSS</dfn> is a simple mechanism for adding style to Web documents.</p>

<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>

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

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