HTML5中i、em、b、strong元素的使用示例-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)HTML5中i、em、b、strong元素的使用示例的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供奇臺(tái)網(wǎng)站建設(shè)、奇臺(tái)做網(wǎng)站、奇臺(tái)網(wǎng)站設(shè)計(jì)、奇臺(tái)網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、奇臺(tái)企業(yè)網(wǎng)站模板建站服務(wù)，十余年奇臺(tái)做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

前言

為了語義化HTML5增加了不少新標(biāo)簽。其中i、em和b、strong這兩組標(biāo)簽是最容易弄混的，不好好去探究一下，還真說不清。這個(gè)也是前端面試中經(jīng)常會(huì)問的問題。今天從源頭上，也就是從HTML5的文檔（https://w3c.github.io/html/textlevel-semantics.html#the-em-element）中來一探究竟！

區(qū)別詳解

首先，單從顯示效果來看，在不額外添加css的情況下，i和em標(biāo)簽包圍的文字將會(huì)以斜體呈現(xiàn)，b和strong標(biāo)簽包圍的文字則會(huì)加粗顯示。如圖

效果如下：

<b>和<i>在創(chuàng)建之初就是簡單地表示粗體和斜體樣式，但是到了HTML5，為了語義化特性，這兩個(gè)標(biāo)簽也被賦予了語義，樣式倒不那么重要，因?yàn)槟鞘莄ss的事情。但上面兩組標(biāo)簽語義還是各有側(cè)重，下面依照規(guī)范逐一介紹：

i介紹

規(guī)范描述：

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

譯文：

i 元素代表在普通文本中具有不同語態(tài)或語氣的一段文本，某種程度上表明一段不同特性的文本，比如一個(gè)分類學(xué)名稱，一個(gè)技術(shù)術(shù)語，一個(gè)外語習(xí)語，一個(gè)音譯，一個(gè)想法，或者西方文本中的一艘船名。

舉例：

// 分類學(xué)名稱
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
// 術(shù)語
<p>The term <i>prose content</i> is defined above.</p>
// 外語習(xí)語
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

大家可以在i標(biāo)簽上應(yīng)用class來表明用這個(gè)元素的意圖，這樣該特殊樣式在以后如需修改時(shí)，不需要仔細(xì)檢查全部文檔來更改。在使用i標(biāo)簽時(shí)候時(shí)，推薦考慮是否應(yīng)用其他標(biāo)簽更為合適，如用em來突出強(qiáng)調(diào)，dfn標(biāo)簽來定義項(xiàng)目實(shí)例。

em介紹

規(guī)范描述：

The em element represents stress emphasis of its contents.

The placement of stress emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which stress is used in this way depends on the language.

譯文：

em 元素代表對其內(nèi)容的強(qiáng)調(diào)。突出強(qiáng)調(diào)的位置會(huì)改變語句本身的意義。因此，元素構(gòu)成內(nèi)容的一個(gè)部分。用這種方式表示強(qiáng)調(diào)的程度依賴于是何種語言。

舉例（類似漢語里面重讀某個(gè)詞表示不同含義）：

// 這是一句不帶任何強(qiáng)調(diào)的句子
<p>Cats are cute animals.</p>
// em 包圍 Cats，強(qiáng)調(diào)貓是種可愛的動(dòng)物，而不是狗或者其他動(dòng)物
<p><em>Cats</em> are cute animals.</p>
// em 包圍 are，代表句子所說是事實(shí)，來反駁那些說貓不可愛的人
<p>Cats <em>are</em> cute animals.</p>
// em 包圍 cute，強(qiáng)調(diào)貓是一種可愛的動(dòng)物，而不是有人說的刻薄、討厭的動(dòng)物
<p>Cats are <em>cute</em> animals.</p>
// 這里強(qiáng)調(diào)貓是動(dòng)物，而不是植物
<p>Cats are cute <em>animals</em>.</p>

規(guī)范末尾note：

The em element isn’t a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate.

The em element also isn’t intended to convey importance; for that purpose, the strong element is more appropriate.

譯文：

em不是一個(gè)普通的斜體標(biāo)簽。有時(shí)為了部分文本由于不同的語態(tài)或語氣需有別于段落的其他部分，這是i標(biāo)簽更為合適。em標(biāo)簽不是為了表明重要性，如果是出于這個(gè)目的，strong標(biāo)簽更為合適。

b介紹

規(guī)范描述：

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 元素代表側(cè)重實(shí)用目的而不帶有任何額外重要性也不暗示不同語態(tài)或語氣的一段文本，比如一段文本摘要中的關(guān)鍵詞、一段審查中的產(chǎn)品名稱、文本驅(qū)動(dòng)軟件中的可執(zhí)行語句或者一篇文章的導(dǎo)語。

舉例：

// 下面的 b 元素起到突出關(guān)鍵詞的作用，但不具備強(qiáng)調(diào)重要性的作用
<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 元素標(biāo)注了文章的導(dǎo)語
<article>
  <h3>Kittens 'adopted' by pet rabbit</h3>
  <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>

規(guī)范建議：

The b element should be used as a last resort when no other element is more appropriate. In particular, headings should use the h2 to h7 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.

就是說當(dāng)沒有其他元素合適時(shí)，最后才考慮用b標(biāo)簽。特別是，標(biāo)題應(yīng)該使用h2到h7標(biāo)簽，突出對內(nèi)容的強(qiáng)調(diào)用em標(biāo)簽，突出重要緊急用strong標(biāo)簽，文本標(biāo)記使用mark標(biāo)簽。

strong介紹

規(guī)范描述：

The strong element represents strong importance, seriousness, or urgency for its contents.

譯文：

strong 元素代表內(nèi)容的強(qiáng)烈的重要性、嚴(yán)重性或者緊急性。

重要性

<strong> 元素可以被用在標(biāo)題（heading）、說明（caption）或者段落（paragraph）上，來顯示這部分被包圍的文字的重要性。

// 章節(jié)序號(hào)不重要，章節(jié)的名字才重要
<h2>Chapter 1: <strong>The Praxis</strong></h2>

嚴(yán)重性

<strong> 元素可以被用來標(biāo)記警告或者警示標(biāo)志。

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

小結(jié)：

根據(jù)規(guī)范來看，em和strong的語義情景很明顯，b和i的理解還是有些晦澀，個(gè)人的理解是：

1、em會(huì)對文本含義有改變作用，類似讀一句話時(shí)重讀某一個(gè)字或詞會(huì)表達(dá)不一樣的意思一樣。

2、strong會(huì)突出包含文本的重要性、嚴(yán)重性和緊急性等。

3、i標(biāo)簽為了表示不同語態(tài)或特性的文本，有點(diǎn)像文字排版里面的那些用斜體表示的內(nèi)容（技術(shù)術(shù)語、外語習(xí)語這些排版會(huì)有不同的內(nèi)容）。

4、b標(biāo)簽主要是為了突出顯示關(guān)鍵詞、產(chǎn)品名稱等；

b標(biāo)簽的語義規(guī)范也是很模糊，所以也是不太建議用。

感謝各位的閱讀！關(guān)于“HTML5中i、em、b、strong元素的使用示例”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站標(biāo)題：HTML5中i、em、b、strong元素的使用示例-創(chuàng)新互聯(lián)
本文來源：http://muchs.cn/article42/dsppec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)公司、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)