前几天,看到这样的一个笑话:甲:“我精通前端开发”,乙:“strong和b的区别是什么?” 甲:。。。。

其实我也搞不清有什么区别,因此我整理了一下:

一、为什么会有这样一个问题

  我们在一个没有附加式样的html文件中加入如下哦的代码:

  

 <p><b>b标签</b></p>
<p><strong>strong标签</strong></p>

就会看到这样的效果:

我们发现这两个标签的式样都被加粗了,那么为什么会这样呢?

我们打开调试窗口:

原来浏览器的默认样式就是加粗,也就是说大家对这两个标签的混淆在于在使用中达到了同样的效果。但是它们两个真的是一样的吗?

二、W3C上是怎么说的

  <b> 粗体文本,<strong> 用于强调文本

  首先,从语义上来说<b>是UI层面上的‘加粗’,而<strong>是语气上的强调。所以语义控的同学,要区别使用这两种标签。

  其次,具体看看官方的解释:

    W3C上对于<b>标签有这样的一段提示:

提示和注释

注释:根据 HTML5 规范,在没有其他合适标签更合适时,才应该把 <b> 标签作为最后的选项。HTML5 规范声明:应该使用 <h1> - <h6> 来表示标题,使用 <em> 标签来表示强调的文本,应该使用 <strong> 标签来表示重要文本,应该使用 <mark> 标签来表示标注的/突出显示的文本。

提示:您也能够使用 CSS "font-weight" 属性来设置粗体文本。

    W3C上是这样来解释<strong>的:

<strong> 标签和 <em> 标签一样,用于强调文本,但它强调的程度更强一些。

  由此可以看出,<b>是W3C预设的加粗式样,如果不像特地的写类(font-weight:bold;),用<b>还是个不错的选择,如果想做语义上的强调<strong>和<em>更加的合适。但是语义上一般的强调优先使用<em>更重一些的语气应使用<strong>。应注意的是在大多数书的浏览器中将<strong>和<b>采用了相同的式样来解释但是这种式样不能保证所有浏览器的统一。因为<strong>是语气上的强调,至于浏览器是否将‘强调’和‘加粗’划等号,还是因浏览器而异。

  如果很关心式样,还是建议用css来实现。

三、论坛上怎么说

  有一种说法,是<strong>貌似在盲人用的机器上会读两遍。因为没有对应的测试条件,所以没做验证。

四、还有哪些类似的标签

  在查<b>和<strong>的时候发现了这样的两个页面 HTML <tt> <i> <b> <big> <small> 标签 和 HTML <em> <strong> <dfn> <code> <samp> <kbd><var> <cite> 标签   举例来说<i>和<em>就是这样的一对:

       

类似的应该还有很多,就不一一试了,不过语义和显示是有不同的,通过这个小笑话还是学到了一些东西。

<strong>和 <b> 的区别的更多相关文章

  1. <input type="button" /> 和<input type="submit" /> 的区别

    <input type="button" /> 这就是一个按钮.如果你不写javascript 的话,按下去什么也不会发生.<input type="s ...

  2. ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系

    ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...

  3. <button>和<input type="button"> 的区别

    <button>标签 定义和用法 <button> 标签定义一个按钮. 在 button 元素内部,您可以放置内容,比如文本或图像.这是该元素与使用 input 元素创建的按钮 ...

  4. <button>与<input type="button">的区别

    一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...

  5. 解析button和input type=”button”的区别

    一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...

  6. 【转】解析<button>和<input type="button"> 的区别

    一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...

  7. 了解HTML表单之input元素的23种type类型

    目录 传统类型 text password file radio checkbox hidden button image reset submit 新增类型 color tel email url ...

  8. HTML(七)HTML 表单(form元素介绍,input元素的常用type类型,input元素的常用属性)

    前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...

  9. HTML表单之input元素的23种type类型

    摘自:http://www.cnblogs.com/xiaohuochai/p/5179909.html 了解HTML表单之input元素的23种type类型 随着HTML5的出现,input元素新增 ...

  10. HTML中button和input button的区别

    button和input button的区别 一句话概括主题:<button>具有<input type="button" ... >相同的作用但是在可操控 ...

随机推荐

  1. TCP/IP协议<二>

    一.TCP/IP的标准化 1.TCP/IP的含义 一般来说,TCP/IP是利用IP进行通信时所必须用到的协议群的统称. 具体点,IP或ICMP.TCP或UDP.TELENT或FTP.以及HTTP等都属 ...

  2. 性能测试工具LoadRunner31-LR之链接mysql

    步骤: 1.建好mysql数据库并启动 2.下载libmysql.dll,放到保存脚本的文件夹下 3.编写脚本并运行 Action() { int rc; //定义状态变量,0表示成功,非0表示失败 ...

  3. python3.4 x86_64-linux-gnu-gcc Error

    running install    running build    running build_py    creating build    creating build/lib.linux-x ...

  4. dom4j使用

    http://www.cnblogs.com/zfc2201/archive/2011/08/16/2141441.html http://www.blogjava.net/i369/articles ...

  5. 在PHP中使用全局变量的几种方法

    简介 即使开发一个新的大型PHP程序,你也不可避免的要使用到全局数据,因为有些数据是需要用到你的代码的不同部分的.一些常见的全局数据有:程序设定类.数据库连接类.用户资料等等.有很多方法能够使这些数据 ...

  6. C++ 虚函数、纯虚函数、虚继承

    1)C++利用虚函数来实现多态. 程序执行时的多态性通过虚函数体现,实现运行时多态性的机制称爲动态绑定:与编译时的多态性(通过函数重载.运算符重载体现,称爲静态绑定)相对应. 在成员函数的声明前加上v ...

  7. jq案例中遇到的知识点总结(会飞的小鸟和三级联动)

    1.会飞的小鸟 ,按键盘的上下左右键,小鸟会上下左右的飞 知识点:1.keyCode 键盘按键对应的数字 比如 左上右下键 对应 37 38 39 40: 2.小鸟的位置:var bBird=$(&q ...

  8. 2.C#中的常用快捷键

    快速对齐代码: Ctrl+K+D:  快速对齐代码   (如果代码语法错误,就不能使用) Ctrl+Z:  撤销 Ctrl+S:保存   没事就Ctrl+S一下,防止因为电脑断电,代码全部丢失 Ctr ...

  9. 什么是NIO2

    NIO2I/O发展历史Java1.0-1.3在Java的早期版本中,没有完整的I/O支持,在开发过程中需要解决以下问题:1)没有数据缓冲区或者NIO的通道概念,需要编程人员处理底层细节.2)I/O是受 ...

  10. hibernate课程 初探一对多映射2-3 创建hibernateUtil工具类

    本节主要内容:创建hibernateUtil工具类:demo demo: HibernateUtil.java package hibernate_001; import org.hibernate. ...