pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

通過HTML5規范搞定i、em、b、strong元素的區別

這篇文章通過HTML5規范給大家介紹了i、em、b與strong元素的區別,文中介紹的非常詳細,需要的朋友可以參考借鑒,下面來一起看看吧。

前言

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

區別詳解 

首先,單從顯示效果來看,在不額外添加css的情況下,i和em標簽包圍的文字將會以斜體呈現,b和strong標簽包圍的文字則會加粗顯示。如圖

效果如下:

<b>和<i>在創建之初就是簡單地表示粗體和斜體樣式,但是到了HTML5,為了語義化特性,這兩個標簽也被賦予了語義,樣式倒不那么重要,因為那是css的事情。但上面兩組標簽語義還是各有側重,下面依照規范逐一介紹:

i介紹

規范描述:

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 元素代表在普通文本中具有不同語態或語氣的一段文本,某種程度上表明一段不同特性的文本,比如一個分類學名稱,一個技術術語,一個外語習語,一個音譯,一個想法,或者西方文本中的一艘船名。

舉例:

// 分類學名稱
<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標簽上應用class來表明用這個元素的意圖,這樣該特殊樣式在以后如需修改時,不需要仔細檢查全部文檔來更改。在使用i標簽時候時,推薦考慮是否應用其他標簽更為合適,如用em來突出強調,dfn標簽來定義項目實例。

em介紹

規范描述:

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 元素代表對其內容的強調。突出強調的位置會改變語句本身的意義。因此,元素構成內容的一個部分。用這種方式表示強調的程度依賴于是何種語言。

舉例(類似漢語里面重讀某個詞表示不同含義):

// 這是一句不帶任何強調的句子
<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>

規范末尾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不是一個普通的斜體標簽。有時為了部分文本由于不同的語態或語氣需有別于段落的其他部分,這是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.

譯文:

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

歷時三年 W3C宣布HTML5規范正式定稿HTML5中文學習網,是中國最大的HTML5中文門戶,為廣大HTML5愛好者提供各種HTML5資料,包括HTML5網站、HTML5資訊、HTML5應用、HTML5游戲、HTML5教程、HTML5視頻、
主站蜘蛛池模板: PSI渗透压仪,TPS酸度计,美国CHAI PCR仪,渗透压仪厂家_价格,微生物快速检测仪-华泰和合(北京)商贸有限公司 | 北京燃气公司 用户服务中心 | 土壤检测仪器_行星式球磨仪_土壤团粒分析仪厂家_山东莱恩德智能科技有限公司 | 贴片电感_贴片功率电感_贴片绕线电感_深圳市百斯特电子有限公司 贴片电容代理-三星电容-村田电容-风华电容-国巨电容-深圳市昂洋科技有限公司 | 2025第九届世界无人机大会 | 酒精检测棒,数显温湿度计,酒安酒精测试仪,酒精检测仪,呼气式酒精检测仪-郑州欧诺仪器有限公司 | 申江储气罐厂家,储气罐批发价格,储气罐规格-上海申江压力容器有限公司(厂) | 合肥网络推广_合肥SEO网站优化-安徽沃龙First | 吲哚菁绿衍生物-酶底物法大肠菌群检测试剂-北京和信同通科技发展有限公司 | 广东风淋室_广东风淋室厂家_广东风淋室价格_广州开源_传递窗_FFU-广州开源净化科技有限公司 | 脉冲布袋除尘器_除尘布袋-泊头市净化除尘设备生产厂家 | 高速混合机_锂电混合机_VC高效混合机-无锡鑫海干燥粉体设备有限公司 | 高效节能电机_伺服主轴电机_铜转子电机_交流感应伺服电机_图片_型号_江苏智马科技有限公司 | 楼承板设备-楼承板成型机-免浇筑楼承板机器厂家-捡来 | 温州食堂承包 - 温州市尚膳餐饮管理有限公司 | 碳化硅,氮化硅,冰晶石,绢云母,氟化铝,白刚玉,棕刚玉,石墨,铝粉,铁粉,金属硅粉,金属铝粉,氧化铝粉,硅微粉,蓝晶石,红柱石,莫来石,粉煤灰,三聚磷酸钠,六偏磷酸钠,硫酸镁-皓泉新材料 | 地磅-地秤-江阴/无锡地磅-江阴天亿计量设备有限公司_ | 杭州月嫂技术培训服务公司-催乳师培训中心报名费用-产后康复师培训机构-杭州优贝姆健康管理有限公司 | 五轴加工中心_数控加工中心_铝型材加工中心-罗威斯 | 数控走心机-双主轴走心机厂家-南京建克 | 楼承板-开闭口楼承板-无锡海逵楼承板| 精密五金冲压件_深圳五金冲压厂_钣金加工厂_五金模具加工-诚瑞丰科技股份有限公司 | 油冷式_微型_TDY电动滚筒_外装_外置式电动滚筒厂家-淄博秉泓机械有限公司 | 南京蜂窝纸箱_南京木托盘_南京纸托盘-南京博恒包装有限公司 | 清水混凝土修复_混凝土色差修复剂_混凝土色差调整剂_清水混凝土色差修复_河南天工 | 大通天成企业资质代办_承装修试电力设施许可证_增值电信业务经营许可证_无人机运营合格证_广播电视节目制作许可证 | 扬尘监测_扬尘监测系统_带证扬尘监测设备 - 郑州港迪科技有限公司 | 爆炸冲击传感器-无线遥测传感器-航天星百科| 不干胶标签,不干胶标签纸_厂家-山东同力胶粘制品 | [品牌官网]贵州遵义双宁口腔连锁_贵州遵义牙科医院哪家好_种植牙_牙齿矫正_原华美口腔 | 充气膜专家-气膜馆-PTFE膜结构-ETFE膜结构-商业街膜结构-奥克金鼎 | 液氮罐_液氮容器_自增压液氮罐-北京君方科仪科技发展有限公司 | 洗石机-移动滚筒式,振动,螺旋,洗矿机-青州冠诚重工机械有限公司 | 线粒体膜电位荧光探针-细胞膜-标记二抗-上海复申生物科技有限公司 | 粉末冶金注射成型厂家|MIM厂家|粉末冶金齿轮|MIM零件-深圳市新泰兴精密科技 | 河北凯普威医疗器材有限公司,高档轮椅系列,推车系列,座厕椅系列,协步椅系列,拐扙系列,卫浴系列 | 美名宝起名网-在线宝宝、公司、起名平台 | 真空搅拌机-行星搅拌机-双行星动力混合机-广州市番禺区源创化工设备厂 | 安平县鑫川金属丝网制品有限公司,防风抑尘网,单峰防风抑尘,不锈钢防风抑尘网,铝板防风抑尘网,镀铝锌防风抑尘网 | 泰州物流公司_泰州货运公司_泰州物流专线-东鑫物流公司 | 中央空调维修、中央空调保养、螺杆压缩机维修-苏州东菱空调 |