CSS / HTML：什么是使文本斜体的正确方法？

 

什么是使文本斜体的正确方法？ 我看到了以下四种方法： 

<i>Italic Text</i>

<em>Italic Text</em>

<span class="italic">Italic Text</span>

<span class="footnote">Italic Text</span>


<i>

这是“古老的方式”。 <i>没有语义含义和只传送使文本倾斜的表象效果。 据我所知，这显然是错误的，因为这是非语义的。


<em>

这将语义标记用于纯粹的表示目的。 它只是碰巧<em>默认以斜体呈现文本，所以它往往是由那些谁知道，使用<i>应避免，但谁都不知道它的语义。 不是所有的斜体文字都是斜体的，因为它被强调。 有时候，它可能完全相反，就像一个旁注或一个耳语。


<span class="italic">

这使用CSS类来放置演示文稿。 这经常被吹捧为正确的方式，但再一次，这对我来说似乎是错误的。 此不会出现传达任何更多语义<i> 但是，它的支持者们呼吁，如果你想大胆地改变你的所有斜体文本，那么将来会更容易。 然而，情况并非如此，因为我将留下一个名为“italic”的类，使文本变为粗体。 此外，目前尚不清楚为什么我会改变我网站上的所有斜体文字，或者至少我们可以想到这种情况并不可取或不必要。


<span class="footnote">

这为语义使用CSS类。 到目前为止，这似乎是最好的方式，但实际上有两个问题。

  • 并非所有文本都有足够的含义来保证语义标记。 例如，页面底部的斜体文字是否真的是一个脚注？ 或者它在旁边？ 或者完全是别的。 也许它没有特别的意义，只需要用斜体字来表示，从表面上将它与前面的文字分开。

  • 当语义含义不够强时，语义可能发生变化。 可以说，我只是根据页面底部的文本来进行“脚注”。 几个月后会发生什么，我想在底部添加更多文字？ 它不再是一个脚注。 我们如何选择一个不如<em>通用但避免这些问题的语义类？


    • 概要

    看起来，语义的要求似乎在许多情况下过于繁重，例如，想要制造某种意义的意图并不意味着具有语义意义。

    此外，从结构到单独的样式的欲望导致CSS被吹捧为一个更换，以<i>当有场合这实际上用处不大。 因此，这使我留下了谦虚的<i>标签，并且怀疑这种思路是否将它留在HTML5规范中？

    有没有关于这个主题的好博客文章或文章？ 也许那些参与决定保留/创建<i>标签的人呢？

    您应该针对不同的使用情况使用不同的方法：

  • 如果您想强调一个短语，请使用<em> 。
  • <i>标签在HTML5中具有新的含义，表示“以不同语音或情绪表达的一段文本”。 所以你应该使用这个标签来表达思想/旁白或惯用语。 该规范还建议船名（但不再建议书/歌曲/电影名称，而是使用<cite>代替）。
  • 如果斜体文本是更大的上下文的一部分，比如说介绍性的段落，则应该将CSS样式附加到较大的元素上，即p.intro { font-style: italic; } p.intro { font-style: italic; }

    • 没有错，因为它是非语义的。 这是错误的（通常），因为它是表象。 分离关注点意味着应该用CSS传达出示信息。

    一般来说命名可能会很棘手，而且类名也不例外，但是它是你必须做的。 如果您使用斜体来使块体脱离正文文本，那么可能需要使用“flow-distinctive”类名。 考虑重用：类名称用于分类 - 你还想在哪里做同样的事情？ 这应该有助于确定一个合适的名字。

    <i>包含在HTML5中，但它被赋予特定的语义。 如果你将某些东西标记为斜体符合规范中标识的语义之一，那么使用<i>将是适当的。 否则不是。

    我不是专家，但我会说，如果你真的想成为语义，你应该使用词汇表（RDFa）。

    这应该导致这样的事情： 

    <em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>

    em用于表示（人类将以斜体显​​示）， property和href属性链接到斜体（对于机器）的定义。

    你应该检查是否有这样的词汇，也许属性已经存在。

    有关RDFa的更多信息，请访问：http://www.alistapart.com/articles/introduction-to-rdfa/

    链接地址: http://www.djcxy.com/p/67375.html

    上一篇: CSS/HTML: What is the correct way to make text italic?

    下一篇: Showing Html in WinRT with RichTextBlock or other component