最近在学习HTML基本知识,看到b标签和strong还有em,都是表示强调目的的,那他们之间的区别是什么呢?总结如下:

  1. < b > < i > 是视觉要素(presentationl elements),分别表示无意义的加粗,无意义的斜体,表现样式为 { font-weight: bolder },仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」,此两个标签在HTML4.01中并不被推荐使用;
  2. < em > 和 < strong > 是表达要素(phrase elements)。 < em > (emphasized text)表示一般的强调文本,而 < strong > (strong emphasized text)表示比 < em > 语义更强的的强调文本。
  3. 在新的html5中,<em> 和 <strong> 仍旧是表达要素(phrase elements)。但这时的 < strong > 表示html页面上的强调(emphasized text), < em > 表示句子中的强调(即强调语义)。
    i 元素现在描述为在普通文章中突出不同意见或语气或其他的一段文本,例如:一个分类名称,一个技术术语,一个外语中的谚语,一个想法等。或者代表斜体的排版方式

    b 元素现在描述为在普通文章中仅从文体上突出的不包含任何额外的重要性的一段文本。例如:文档概要中的关键字,评论中的产品名。或者代表强调的排版方式。

  参考内容如下:

  1. stackoverflow:

    They have the same effect on normal web browser rendering engines, but there is afundamental difference between them.

    在大多数浏览器的渲染引擎上都是一个效果,但是两者的基础不同

    As the author writes in a discussion list post:

    Think of three different situations:

    有三个不同的应用场景:浏览器、盲人、移动电话

    • web browsers
    • blind people
    • mobile phones

    "Bold" is a style - when you say "bold a word", people basically know that it means to add more, let's say "ink" around the letters until they stand out more amongst the rest of the letters.

    BOLD 是一种样式,当人们说“加粗一个单词”时,大家会认为增加一些(比如叫墨水)到这些词上以便让这些词看起来比旁边的词更显眼

    That, unfortunately, means nothing to a blind person. And on mobile phones and other PDAs, text is already bold because screen resolution is very small. You can't bold a bold without screwing something up.

    但是,不幸的是,这对盲人来说毫无作用。而且对手机或者其他的手持设备来说,由于其屏幕的分辨率很小,文本已经被加过粗了,我们也无法再加粗一个已经加粗的了。

    <b> is a style - we know what "bold" is supposed to look like.

    <b> 标签是一种style,我们都知道“加粗”应该长什么样。

    <strong> however is an indication of how something should be understood. "Strong" could (and often does) mean "bold" in a browser, but it could also mean a lower tone for a speaking program like Jaws (for blind people). And strong on a Palm Pilot may be an underline (since you can't bold a bold).

    <strong>标签一种对有些事情需要被理解的暗示。“strong” 在浏览器应该(也一般会)意味着bold,但是(对于盲人来说),它就可以被像Jaws一样的语音程序理解成一种强调音。strong在手持设备上可能会是一个下划线(因为你不能在加粗了)。

    HTML was never meant to be about styles. Do some searches for "Tim Berners-Lee" and "the semantic web". <strong> is semantic - it describes the text it surrounds ("this text should be stronger than the rest of the text you've displayed") as opposed to describing how the text it surrounds should be displayed ("this text should be bold").
    HTML从来都不是只意味着样式。去搜一下tim berners-lee 和语义web。<strong>标签就是一种语义,它描述的场景是它所包含的内容应该比你显示的其他文本更strong,而不是它所包含的文本应该其他的加粗。

  2. http://www.zhihu.com/question/19551271

HTML中em与b等的区别的更多相关文章

  1. CSS中px和em属性的特点与区别

    详解px和em的特点和区别象素px是我们在定义CSS中经常用到的尺寸大小单位,而em在国外网站中经常被使用,px和em之间究竟有什么区别和特点呢?◆px像素(Pixel),相对长度单位.像素px是相对 ...

  2. CSS中em,px区别(转)

    这里向大家描述一下CSS中px和em的特点和区别,px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的,而em是相对长度单位,相对于当前对象内文本的字体尺寸,相信本文介绍一定会 ...

  3. css中字体常用单位px、em、rem和%的区别及用法总结

    一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...

  4. em与rem之间的区别以及移动设备中的rem适配方案

    em与rem之间的区别: 共同点: 它们都是像素单位 它们都是相对单位 不同点: em大小是基于父元素的字体大小 rem大小是基于根元素(html)的字体的大小 实例: <!DOCTYPE ht ...

  5. C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  6. css中em小于1时chrome字体大小和firefox字体大小不一致的问题

    css中em设置为0.8,结果页面显示,chrome字体比firefox字体大了不少. chrome有默认字体大小,默认为12px.设置的字体大小小于12px时,也是按照12px来显示. firefo ...

  7. JDBC中的Statement和PreparedStatement的区别

    JDBC中的Statement和PreparedStatement的区别  

  8. LINQ语句中的.AsEnumerable() 和 .AsQueryable()的区别

    LINQ语句中的.AsEnumerable() 和 .AsQueryable()的区别 在写LINQ语句的时候,往往会看到.AsEnumerable() 和 .AsQueryable() .例如: s ...

  9. JavaScript中const、var和let区别浅析

    在JavaScript中有三种声明变量的方式:var.let.const.下文给大家介绍js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始 ...

随机推荐

  1. [leetcode] 题型整理之cycle

    找到环的起点. 一快一慢相遇初,从头再走再相逢.

  2. Nginx - Linux下按天分割日志

    待完善. 可参考:https://www.iteblog.com/archives/1244

  3. selenium使用笔记(三)——元素定位

    selenium进行自动化测试的一个很重要的东西那就是元素定位,如果元素都没法定位就无法操作它,也就无法进行自动化测试了.网上对于元素定位有很多的介绍,很详细很详细的,但是依然有很多新手总是会遇到无法 ...

  4. 【转】TCP协议

    TCP是什么? TCP(Transmission Control Protocol 传输控制协议)是一种面向连接(连接导向)的.可靠的. 基于IP的传输层协议.TCP在IP报文的协议号是6.TCP是一 ...

  5. 丢手帕问题即约瑟夫问题的PHP解法

    问题描述:n个人排成一圈.从某个人开始,依次报数,数到m的人被杀死.下一个人重新从1开始报数,数到m的人被杀死.直到剩下最后一个人. 解决思路:从数学角度去看,每一次报数决定谁去死是一个n.m的求余数 ...

  6. java-并发-线程对象

    浏览以下内容前,请点击并阅读 声明 每个线程都和类Thread的实例相关,有两种基本的使用Thread对象来创建并发应用的方法: 直接控制线程的创建和管理,每次需要开始一个异步任务使简单地实例化Thr ...

  7. [机器学习] 深度学习之caffe1——软件配置与测试

    caffe的编译配置真的是很让人头疼啊,不知道试过多少次了~~~ 重装系统了七八次,搞得linux的一些常用命令倒是很熟悉了~~~ 我有洁癖~~~某一个点上出了错,我一定要把它搞好了,再重新来一次,我 ...

  8. 我对 Java 标识符的分类命名方法

    我对 Java 的各种标识符有一套固定的分类方法,以下分享一下我的命名方法以及进行一些说明. # 前缀: 方法 方法:f_doSomeThing().分类词是 f,采自 [f]unction 方法,也 ...

  9. View的弹性滑动

    View的弹性滑动 实现弹性滑动的思想:将一次大的滑动分成若干次小的滑动并在一个时间段内完成,具体的实现方式有很多,如通过Scroller.Handler#postDelayed以及Thread#sl ...

  10. dell笔记本三个系统,ubuntu16.04更新,boot分区容量不足解决办法

    本人自己dell物理机上安装windows 7 .centos 1704 和ubuntu1604 三个系统的,分区当时没有使用lVM,boot单独挂/dev/sda7 分区,只有200M,随着2次li ...