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視頻、
主站蜘蛛池模板: 冷却塔改造厂家_不锈钢冷却塔_玻璃钢冷却塔改造维修-广东特菱节能空调设备有限公司 | LED灯杆屏_LED广告机_户外LED广告机_智慧灯杆_智慧路灯-太龙智显科技(深圳)有限公司 | 包装机传感器-搅拌站传感器-山东称重传感器厂家-济南泰钦电气 | 背压阀|减压器|不锈钢减压器|减压阀|卫生级背压阀|单向阀|背压阀厂家-上海沃原自控阀门有限公司 本安接线盒-本安电路用接线盒-本安分线盒-矿用电话接线盒-JHH生产厂家-宁波龙亿电子科技有限公司 | 气体检测仪-氢气检测仪-可燃气体传感器-恶臭电子鼻-深国安电子 | 湖北省煤炭供应链综合服务平台| 紫外线老化试验箱_uv紫外线老化试验箱价格|型号|厂家-正航仪器设备 | 温泉机设备|温泉小镇规划设计|碳酸泉设备 - 大连连邦温泉科技 | 沈阳庭院景观设计_私家花园_别墅庭院设计_阳台楼顶花园设计施工公司-【沈阳现代时园艺景观工程有限公司】 | 软文世界-软文推广-软文营销-新闻稿发布-一站式软文自助发稿平台 | 开云(中国)Kaiyun·官方网站 - 登录入口 | 杭州成人高考_浙江省成人高考网上报名| 高低温试验箱-模拟高低温试验箱订制-北京普桑达仪器科技有限公司【官网】 | 400电话_400电话申请_866元/年_【400电话官方业务办理】-俏号网 3dmax渲染-效果图渲染-影视动画渲染-北京快渲科技有限公司 | 东莞市超赞电子科技有限公司 全系列直插/贴片铝电解电容,电解电容,电容器 | 鄂泉泵业官网|(杭州、上海、全国畅销)大流量防汛排涝泵-LW立式排污泵 | 压力变送器-上海武锐自动化设备有限公司| 烟气在线监测系统_烟气在线监测仪_扬尘检测仪_空气质量监测站「山东风途物联网」 | 美缝剂_美缝剂厂家_美缝剂加盟-地老板高端瓷砖美缝剂 | NBA直播_NBA直播免费观看直播在线_NBA直播免费高清无插件在线观看-24直播网 | 发电机组|柴油发电机组-批发,上柴,玉柴,潍柴,康明斯柴油发电机厂家直销 | 热缩管切管机-超声波切带机-织带切带机-无纺布切布机-深圳市宸兴业科技有限公司 | 拖鞋定制厂家-品牌拖鞋代加工厂-振扬实业中国高端拖鞋大型制造商 | 丽陂特官网_手机信号屏蔽器_Wifi信号干扰器厂家_学校考场工厂会议室屏蔽仪 | 长江船运_国内海运_内贸船运_大件海运|运输_船舶运输价格_钢材船运_内河运输_风电甲板船_游艇运输_航运货代电话_上海交航船运 | 南京雕塑制作厂家-不锈钢雕塑制作-玻璃钢雕塑制作-先登雕塑厂 | 石家庄小程序开发_小程序开发公司_APP开发_网站制作-石家庄乘航网络科技有限公司 | 北京网络营销推广_百度SEO搜索引擎优化公司_网站排名优化_谷歌SEO - 北京卓立海创信息技术有限公司 | 混合反应量热仪-高温高压量热仪-微机差热分析仪DTA|凯璞百科 | 视频直播 -摄影摄像-视频拍摄-直播分发 | 橡胶电子拉力机-塑料-微电脑电子拉力试验机厂家-江苏天源 | 广州展台特装搭建商|特装展位设计搭建|展会特装搭建|特装展台制作设计|展览特装公司 | 沙盘模型公司_沙盘模型制作公司_建筑模型公司_工业机械模型制作厂家 | 通风气楼_通风天窗_屋顶风机-山东美创通风设备有限公司 | UV-1800紫外光度计-紫外可见光度计厂家-翱艺仪器(上海)有限公司 | 地磅-地秤-江阴/无锡地磅-江阴天亿计量设备有限公司_ | 广西资质代办_建筑资质代办_南宁资质代办理_新办、增项、升级-正明集团 | 杭州实验室尾气处理_实验台_实验室家具_杭州秋叶实验设备有限公司 | 无线讲解器-导游讲解器-自助讲解器-分区讲解系统 品牌生产厂家[鹰米讲解-合肥市徽马信息科技有限公司] | 钢绞线万能材料试验机-全自动恒应力两用机-混凝土恒应力压力试验机-北京科达京威科技发展有限公司 | 定量包装秤,吨袋包装称,伸缩溜管,全自动包装秤,码垛机器人,无锡市邦尧机械工程有限公司 |