HTML 语义元素 - 文本级语义

163 阅读2分钟

所有元素

em、strong、i、b、small、s、u、cite、q、abbr、dfn、time、code, samp, kbd、mark、ruby, rt, rp、span

em 元素

  • 强调位置的不同通常会带来整个句子含义的变化
  • 强调级别由 em 的嵌套个数决定
  • em 的位置不同,文本本身含义不同
  • 斜体
这是一句不带任何强调的句子
<p>Cats are cute animals.</p>

em 包围 Cats,强调猫是种可爱的动物,而不是狗或者其他动物
<p><em>Cats</em> are cute animals.</p>

em 包围 are,代表句子所说是事实,来反驳那些说猫不可爱的人
<p>Cats <em>are</em> cute animals.</p>

em 包围 cute,强调猫是一种可爱的动物,而不是有人说的刻薄、讨厌的动物
<p>Cats are <em>cute</em> animals.</p>

这里强调猫是动物,而不是植物
<p>Cats are cute <em>animals</em>.</p>

strong 元素

  • 重要性 用在标题(heading)、说明(caption)或者段落(paragraph)上,来显示这部分被包围的文字的重要性
  • 严重性 元素可以被用来标记警告或者警示标志。
  • 紧急性 元素可以被用来表示需要被尽快看见的部分。
  • 重要程度由 strong 的嵌套个数决定
  • 粗体
重要性

strong 元素可以被用在标题(heading)、说明(caption)或者段落(paragraph)上,来显示这部分被包围的文字的重要性。

章节序号不重要,章节的名字才重要
<h1>Chapter 1: <strong>The Praxis</strong></h1>

严重性
strong 元素可以被用来标记警告或者警示标志。
<p><strong>Warning.</strong> This dungeon is dangerous.</p>

紧急性
strong 元素可以被用来表示需要被尽快看见的部分。
<p>Welcome to Remy, the reminder system.</p>
<p>Your tasks for today:</p>
<ul>
  <li>
    <p><strong>Turn off the oven.</strong></p>
  </li>
  <li><p>Put out the trash.</p></li>
  <li><p>Do the laundry.</p></li>
</ul>

i 元素

  • 不再只是「斜体」
  • 表示另一种叙述方式
  • 画外音 / 分类学名词 / 外来语片段 / 舞台指示 / 船名 / 技术术语 / 一个想法 ...
  • 建议与 class / lang 属性搭配使用
分类学名称
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
<p><i class="taxonomy">猫科动物</i></p>

术语
<p>The term <i>prose content</i> is defined above.</p>
<p><i>散文内容</i></p>

外语习语
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
<p><i lang="fr">法语</i></p>

b 元素

  • 侧重实用目的而不带有任何额外重要性也不暗示不同语态或语气的一段文本
  • 摘要中的关键词 / 评介中的产品名称 / 文章的开篇内容 ...
  • 建议与 class 属性搭配使用
下面的 b 元素起到突出关键词的作用,但不具备强调重要性的作用

<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>
<p><b>愣头青</b><b>杠精</b></p>

下面的 b 元素让被包围的词特殊化
<p>
  You enter a small room. Your <b>sword</b> glows brighter. A
  <b>rat</b> scurries past the corner wall.
</p>
<p>
  <b></b>
  <b>老鼠</b>
</p>

下面的 b 元素标注了文章的导语
<article>
  <h2>Kittens 'adopted' by pet rabbit</h2>
  <p>
    <b class="lede"
      >Six abandoned kittens have found an unexpected new mother figure — a
      pet rabbit.</b
    >
  </p>
  <p>
    Veterinary nurse Melanie Humble took the three-week-old kittens to her
    Aberdeen home.
  </p>
</article>