<strong>和 <b> 的区别
前几天,看到这样的一个笑话:甲:“我精通前端开发”,乙:“strong和b的区别是什么?” 甲:。。。。
其实我也搞不清有什么区别,因此我整理了一下:
一、为什么会有这样一个问题
我们在一个没有附加式样的html文件中加入如下哦的代码:
<p><b>b标签</b></p>
<p><strong>strong标签</strong></p>
就会看到这样的效果:

我们发现这两个标签的式样都被加粗了,那么为什么会这样呢?
我们打开调试窗口:

原来浏览器的默认样式就是加粗,也就是说大家对这两个标签的混淆在于在使用中达到了同样的效果。但是它们两个真的是一样的吗?
二、W3C上是怎么说的
首先,从语义上来说<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> 的区别的更多相关文章
- <input type="button" /> 和<input type="submit" /> 的区别
<input type="button" /> 这就是一个按钮.如果你不写javascript 的话,按下去什么也不会发生.<input type="s ...
- ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系
ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...
- <button>和<input type="button"> 的区别
<button>标签 定义和用法 <button> 标签定义一个按钮. 在 button 元素内部,您可以放置内容,比如文本或图像.这是该元素与使用 input 元素创建的按钮 ...
- <button>与<input type="button">的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- 解析button和input type=”button”的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- 【转】解析<button>和<input type="button"> 的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- 了解HTML表单之input元素的23种type类型
目录 传统类型 text password file radio checkbox hidden button image reset submit 新增类型 color tel email url ...
- HTML(七)HTML 表单(form元素介绍,input元素的常用type类型,input元素的常用属性)
前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...
- HTML表单之input元素的23种type类型
摘自:http://www.cnblogs.com/xiaohuochai/p/5179909.html 了解HTML表单之input元素的23种type类型 随着HTML5的出现,input元素新增 ...
- HTML中button和input button的区别
button和input button的区别 一句话概括主题:<button>具有<input type="button" ... >相同的作用但是在可操控 ...
随机推荐
- vue2.X+elementUI表单自定义验证
<template> <div class="taxi-appointment-dairen"> <el-form :model="rule ...
- Unity Animation动画倒播
- 夜神模拟器连不上adb的解决办法
解决办法: 1.任务管理器里看下,adb.exe以及nox_adb.exe这2个进程有没有在运行?有的话就结束掉 2.找到开发环境的SDK的目录和夜神模拟器的目录,将SDK\platform-tool ...
- HDU 4342——History repeat itself——————【数学规律】
History repeat itself Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. O ...
- linux 下库的深入调研
linux操作系统中,linux库文件路径还是比较常用的,于是我研究了一下linux库文件路径,在这里拿出来和大家分享一下,希望对大家有用. 库文件在连接(静态库和共享库)和运行(仅限于使用共享库的程 ...
- 微信小程序里使用 Redux 状态管理
微信小程序里使用 Redux 状态管理 前言 前阵子一直在做小程序开发,采用的是官方给的框架 wepy , 如果还不了解的同学可以去他的官网查阅相关资料学习:不得不说的是,这个框架确相比于传统小程序开 ...
- springmvc+spring+mybatis+sqlserver----查询sqlserver----有返回参数
<resultMap type="java.util.HashMap" id="resultMap"> <result column=&quo ...
- 3.HTML DOM
介绍 DOM(Document Object Model)文档对象模型,定义了访问 HTML 和 XML 文档的标准,它允许程序和脚本动态地访问和更新文档的内容.结构和样式. 那显然,HTML DOM ...
- SpringBoot常用应用程序属性
参考地址: https://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.h ...
- Azure进阶攻略 | 数据库上云:零停机、自动化
小明最近挺忙,刚刚在外地找了个新工作,正在忙着搬家.多年积攒的家当很多,根本不能潇洒地「说走就走」,于是他联系了搬家公司.专业的就是不一样,不费什么事,就把所有东西打包.运输.拆包到位了.抵达新城市的 ...