3.3 内联 语义

文本段落中的细节描述

段落列表以及块引用都是用来表示一大段文本描述的,但有时候我们需要对局部文本细节(一个或多个单词)进行修饰,就需要使用到内联语义。

重要(Strong)

对于重要描述,使用 <strong> 标签:

<p>
  <strong>重要</strong>的话讲三遍!
</p>

重要的话讲三遍!

默认情况下,<strong> 元素被显示为粗体(bold),但是记住这只是浏览器的默认行为,不要为了显示粗体而使用<strong>,而是在要赋予词句语义上更高的重要性时使用它。

强调(Emphasis)

如果要强调某个单词,可以用 <em> 标签:

<p>
  <em>Web</em> 是互联网最主要的应用。
</p>

Web 是互联网最主要的应用。

默认情况下, <em> 元素被显示为 斜体(italic),同上,不要为了显示的目的使用一个元素,而要基于语义去使用。

<strong><em>的区别在于
1.层次不同,<strong>是更强的<em>
2.<strong> 表示内容的重要性,而<code> 表示内容的着重点,<strong> 不会改变所在句子的语意,em 则会改变所在句子的语义。

HTML5草案中举了一个很妙的例子:

Cats are cute animals.

  强调主语猫,想说明是哪种动物聪明。

Cats are cute animals.

  强调是,想说明猫的确聪明。

Cats are cute animals.

  强调动物,想说明猫再聪明也是动物。

<strong><em> 都可以多重嵌套,表示更进一步的重要性或着重点。

缩写(Abbreviations)

CD 是一个缩写,使用 <abbr> 元素:

<p>
  我刚买了一个 <abbr>CD</abbr>.
</p>

你可以为缩写添加一个标题 title 属性,来提示这个缩写的含义,鼠标悬停时会显示出来:

<p>
  我刚买了一个 <abbr title="Compact Disc">CD</abbr>.
</p>

我刚买了一个 CD.

内联引用(Inline quotes)

块引用元素 <blockquote>块级(block-level) 元素。 它有一个 内联(inline) 版本: <q>:

<p>
  老师说<q>上课啦</q></p>

老师说"上课啦"。

其他内联元素

更多文本类型的内联元素可查阅在线文档: 内联语义文本元素 ,不过常用的就上面这些。

常用内联元素还有 <a> 链接,<img> 图片等,不过它们不属于文本类型。