今回は、i、em、b、strong 要素の使い方について詳しく説明します。 i、em、b、strong 要素を使用する際の 注意事項 は何ですか。実際のケースを見てみましょう。見て。
はじめに
semanticHTML5 用に多くの新しいタグが追加されました。その中で、i、em、b、strong という 2 つのタグのセットが最も混同されやすいため、注意深く調べないと説明するのが非常に困難です。これはフロントエンドの面接でもよく聞かれる質問です。今日はソース、つまり HTML5 ドキュメント (https://w3c.github.io/html/textlevel-semantics.html#the-em-element) から調べてみましょう!
違いを詳しく解説
まず、表示効果の観点からCSSを追加しないと、iタグとemタグで囲まれた文字は斜体で表示され、bとemタグで囲まれた文字は斜体で表示されます。強力なタグは太字で表示されます。図
に示すように、その効果は次のとおりです。
と は、最初に作成されたとき、単に太字と斜体のスタイルを表すために使用されました。セマンティック機能を目的として、これら 2 つのタグにもセマンティックが与えられます。スタイルは CSS に関するものであるため、それほど重要ではありません。ただし、上記の 2 つのタグのセットのセマンティクスには依然として独自の強調点があります。以下は仕様に従って 1 つずつ導入されます。要素は、別の音声またはムードでテキストの範囲を表すか、分類上の指定、専門用語、別の言語の慣用句、音訳、文字変換など、テキストの異なる品質を示す方法で通常の散文からオフセットされます。思想、または西洋のテキストにおける船の名前。
翻訳:
i この要素は、通常のテキストとは異なる音声や雰囲気を持つテキストの一部を表し、ある程度、異なる特性を持つテキストの一部を示します。 、分類名、専門用語、外国語の慣用句、音訳、概念、または西洋のテキストにおける船の名前など。 例:
// 分类学名称
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
// 术语
<p>The term <i>prose content</i> is defined above.</p>
// 外语习语
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
ログイン後にコピー
i タグにクラスを適用して、この要素を使用する意図を示すことができます。これにより、将来特別なスタイルを変更する必要がある場合に、全体を注意深くチェックする必要がなくなります。変更を加えるための文書。 i タグを使用する場合は、強調表示に em タグを使用し、プロジェクト インスタンスを定義するために dfn タグを使用するなど、他のタグを使用する方が適切かどうかを検討することをお勧めします。
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>
ログイン後にコピー
仕様の最後の注:
em 要素は一般的な「斜体」要素ではない場合があります。この場合、段落の残りの部分から目立つようにするため、i 要素の方が適切です。
em 要素も、その目的で重要性を伝えることを目的としたものではありません。強い要素の方が適切です。
翻訳:
em は通常の斜体のタグではありません。音声や口調が異なるため、段落の残りの部分と区別する必要があるテキストの部分には、i タグの方が適切な場合があります。 em タグは重要性を示すことを目的としたものではありません。この目的であれば、strong タグの方が適切です。
bはじめに
规范描述：
The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.
译文：
b 元素代表侧重实用目的而不带有任何额外重要性也不暗示不同语态或语气的一段文本，比如一段文本摘要中的关键词、一段审查中的产品名称、文本驱动软件中的可执行语句或者一篇文章的导语。
举例：
// 下面的 b 元素起到突出关键词的作用，但不具备强调重要性的作用
<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>
// 下面的 b 元素让被包围的词特殊化
<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</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>
ログイン後にコピー
规范建议：
The b element should be used as a last resort when no other element is more appropriate. In particular, headings should use the h1 to h6 elements, stress emphasis should use the em element, importance should be denoted with the strong element, and text marked or highlighted should use the mark element.
就是说当没有其他元素合适时，最后才考虑用b标签。特别是，标题应该使用h1到h6标签，突出对内容的强调用em标签，突出重要紧急用strong标签，文本标记使用mark标签。
strong介绍
规范描述：
The strong element represents strong importance, seriousness, or urgency for its contents.
译文：
strong 元素代表内容的强烈的重要性、严重性或者紧急性。
重要性
元素可以被用在标题（heading）、说明（caption）或者段落（paragraph）上，来显示这部分被包围的文字的重要性。
// 章节序号不重要，章节的名字才重要
<h1>Chapter 1: <strong>The Praxis</strong></h1>
ログイン後にコピー
严重性
元素可以被用来标记警告或者警示标志。
<p><strong>Warning.</strong> This dungeon is dangerous.</p>
ログイン後にコピー
紧急性
元素可以被用来表示需要被尽快看见的部分。
<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>
ログイン後にコピー
小结：
根据规范来看，em和strong的语义情景很明显，b和i的理解还是有些晦涩，个人的理解是：
1、em会对文本含义有改变作用，类似读一句话时重读某一个字或词会表达不一样的意思一样。
2、strong会突出包含文本的重要性、严重性和紧急性等。
3、i标签为了表示不同语态或特性的文本，有点像文字排版里面的那些用斜体表示的内容（技术术语、外语习语这些排版会有不同的内容）。
4、b标签主要是为了突出显示关键词、产品名称等；
b标签的语义规范也是很模糊，所以也是不太建议用。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
H5的存储方式详解
zepto实现移动端无缝向上下滚动
以上がi、em、b、strong 要素の使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
