最近在学习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. jquery的animate({})动画整理

    在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋. 什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动 ...

  2. dedecms为文档页增加动态点击

    加上 <script src="{dede:field name='phpurl'/}/count.php?view=yes&aid={dede:field name='id' ...

  3. java基础-泛型3

    浏览以下内容前,请点击并阅读 声明 8 类型擦除 为实现泛型,java编译器进行如下操作进行类型擦除: 如果类型参数有限制则替换为限制的类型,如果没有则替换为Object类,变成普通的类,接口和方法. ...

  4. R内存管理与垃圾清理

    1.内存查看 memory.limit():查看内存大小 memory.limit(n):申请内存大小 memory.size(NA):查看内存大小 memory.size(T):查看已分配的内存 m ...

  5. 【原】iOS学习之Xcode8关于控制台不打印错误信息

    前几天将我的Xcode升到了8,但是在运行程序时,会打印很多没有用的信息,如下图: Xcode8运行程序时打印的乱码 于是各种寻求答案,找到如下答案: Edit Scheme-> Run -&g ...

  6. java 通过jdbc连接MySQL数据库

    先了解下JDBC的常用接口 1.驱动程序接口Driver 每种数据库的驱动程序都应该提供一个实现java.sql.Driver接口的类,简称Driver类.通常情况下,通过java.lang.Clas ...

  7. 伪类before和after

     以你添加的元素为基础!在他的里面!也就是他的内容的前面或者后面添加东西!  如果原来的元素没有内容会出现什么情况?(伪类的宽和高和元素的相等)

  8. java 测试:iterator foreach for 三种迭代方式哪种更快?

    代码: public class main { public static void main(String[] p_args){ ArrayList<String> _l_string ...

  9. src/main/Java路径下的properties文件丢失

    在pom中加入代码: <build> <resources> <resource> <directory>src/main/java</direc ...

  10. MVC框架

    MVC (Modal View Controler)本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用 ...