HTML中strong与b,em与i标签的区别
先看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p style="font-size: 36px">
这是一段普通文字<br/>
<strong>这是一段strong文字</strong> <br/>
<b>这是一段加粗文字b</b><br/>
<em>这是一段em文字</em> <br/>
<i>这是一段斜体文字i</i> </br>
</p>
</body>
</html>
W3C官方是这样解释的
HTML <em> 标签
<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说,这意味着要把这段文字用斜体来显示。
在文本中加入强调也需要有技巧。如果强调太多,有些重要的短语就会被漏掉;如果强调太少,就无法真正突出重要的部分。这与调味品一样,最好还是不要滥用强调。
尽管现在 <em> 标签修饰的内容都是用斜体字来显示,但这些内容也具有更广泛的含义,将来的某一天,浏览器也可能会使用其他的特殊效果来显示强调的文本。如果你只想使用斜体字来显示文本的话,请使用 <i> 标签。除此之外,文档中还可以包括用来改变文本显示的级联样式定义。
除强调之外,当引入新的术语或在引用特定类型的术语或概念时作为固定样式的时候,也可以考虑使用 <em> 标签。例如,W3School 经常对重要的术语使用 <em> 标签。<em> 标签可以用来把这些名称和其他斜体字区别开来。
HTML <strong> 标签
<strong> 标签和 <em> 标签一样,用于强调文本,但它强调的程度更强一些。
浏览器通常会以不同于 <em> 标签的方式来显示 <strong> 标签中的内容,通常是用加粗的字体(相对于斜体)来显示其中的内容,这样用户就可以把这两个标签区分开来了。
如果常识告诉我们应该较少使用 <em> 标签的话,那么 <strong> 标签出现的次数应该更少。如果说用 <em> 标签修饰的文本好像是在大声呼喊,那么用 <strong> 标签修饰的文本就无异于尖叫了。沉默寡言的人说出的话总是一诺千金,与此相同,限制 <strong> 的使用可以令应该更加引人注意,而且更加有效。
举一个例子,经常访问 W3school 的用户可以注意到了,许多教程页面的第一句摘要都是以粗体显示的,而实际上,我们对这一句摘要使用了 <strong> 标签。使用这个标签的理由是,我们认为教程摘要不仅概括了其所在页面的内容,而且位于页面的最重要的位置,其内容自然是非常重要的且值得强调的。
HTML <b> 标签
<i>标签,告诉浏览器将包含其中的文本以粗体(bold)显示。
提示和注释
注释:根据 HTML5 规范,在没有其他合适标签更合适时,才应该把 <b> 标签作为最后的选项。HTML5 规范声明:应该使用 <h1> - <h6> 来表示标题,使用 <em> 标签来表示强调的文本,应该使用 <strong> 标签来表示重要文本,应该使用 <mark> 标签来表示标注的/突出显示的文本。
HTML <i> 标签
告诉浏览器将包含其中的文本以斜体字(italic)或者倾斜(oblique)字体显示。
小结:
strong与em是结构化标签,而b与i是表现化标签。那么我们在网站建设中到底该怎么使用strong与b,以及使用em与i呢。
在此建议大家彻底抛弃b和i标签,而使用strong和em。这都是为了表达意义和结构,而不仅仅表示外观。
如果我们在网页中不需要强调某个词语,但是又想使用加粗或者斜体,我们可以使用CSS,以下两条分别是字体加粗和斜体的CSS规则:
{font-weight: bold;}{font-style: italic;}
<b>...</b>
- In HTML 4, set font to boldface where possible. Equivalent CSS:
{font-weight: bold}
.<strong>...</strong>
usually has the same effect in visual browsers, as well as having more semantic meaning, under HTML 4.01. - In HTML 5, however,
b
has its own meaning, distinct from that ofstrong
. It denotes "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."[28]
<i>...</i>
- In HTML 4, set font to italic where possible. Equivalent CSS:
{font-style: italic}
.<em>...</em>
usually has the same effect in visual browsers, as well as having more semantic meaning, under HTML 4.01. - In HTML 5, however,
i
has its own semantic meaning, distinct from that ofem
. It denotes "a different quality of text" or "an alternative voice or mood"—e.g., a thought, a ship name, a binary species name, a foreign-language phrase, etc.[29]
<em>...</em>
- Emphasis (conventionally displayed in italics)
EM
existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current.
<strong>...</strong>
- strong emphasis (conventionally displayed bold).
- An aural user agent may use different voices for emphasis.
STRONG
existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current.
HTML中strong与b,em与i标签的区别的更多相关文章
- <b>与<strong> <em>与<i>标签的区别
<b>与 <strong>用在网页上都能使字体加粗,二者的不同是:<b>是物理元素 ;<strong>是逻辑元素. 物理元素强调的是一种物理行为.比如说 ...
- CSS中常用的字体单位:px、em、rem和%的区别
在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: ...
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- html中<b>标签和<Strong>标签的区别
关于html标签中b和strong两个的区别,我也是今早上才注意的,以前都是混着用的,早上看书的时候才注意到这两个标签的区别. 用在网页上,默认情况下它们起的均是加粗字体的作用,二者所不同的是,< ...
- CSS中px和em属性的特点与区别
详解px和em的特点和区别象素px是我们在定义CSS中经常用到的尺寸大小单位,而em在国外网站中经常被使用,px和em之间究竟有什么区别和特点呢?◆px像素(Pixel),相对长度单位.像素px是相对 ...
- css中字体常用单位px、em、rem和%的区别及用法总结
一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...
- em与rem之间的区别以及移动设备中的rem适配方案
em与rem之间的区别: 共同点: 它们都是像素单位 它们都是相对单位 不同点: em大小是基于父元素的字体大小 rem大小是基于根元素(html)的字体的大小 实例: <!DOCTYPE ht ...
- html中内联元素和块级元素的区别
1.下表列出了内联元素和块级元素的主要区别 html中内联元素和块级元素的区别 块级元素 行内元素 独占一行,默认情况下,其宽度自动填满其父元素宽度 相邻的行内元素会排列在同一行里,直到一行排不下,才 ...
- iOS 之 Strong与Weak,_unsafe _unretained与weak区别
1. 在ARC中 strong(强引用) 相当于retain, weak(弱引用) 相当于assign.ARC下,strong告诉编译器自动插入retain.但是在ARC下,代理协议的属性依然用ass ...
随机推荐
- 关于容器为NavigationControlle时,view的起始位置的问题
在iOS 7中,苹果引入了一个新的属性“EdgesForExtendedLayout”,默认值为UIRectEdgeAll,默认的布局将从navigationbar的顶部开始,这就是为什么所有元素都往 ...
- ubuntu 下更新PHP版本 ZT
sudo add-apt-repository ppa:ondrej/php5 如果报错 add-apt-repository: command not found add-apt-repositor ...
- C#队列
队列(Queue)是插入操作限定在表的尾部而其它操作限定在表的头部进行的线性表.把进行插入操作的表尾称为队尾(Rear),把进行其它操作的头部称为队头(Front).当对列中没有数据元素时称为空对列( ...
- C# 生成条形码图片,效果不错
//首先引用 条码库BarcodeLib.dll using System; using System.Collections.Generic; using System.Linq; using Sy ...
- iOS--UIView和UIWindow用法
基础 UI(user interface)是用户界面:iOS的应用是由各种各样的UI控件组成 UIWindow就是一个窗口,学的第一个基础类,就是一个容器,可以在容器上放不同的内容,每个app都需要借 ...
- vs2013提高编译速度
最近做新的项目,很多库是之前项目积累下来的库.在windows下使用的IDE是vs2013,整体编译的时候,明显感觉编译速度较慢,文件是一个一个编的. 从编译器本身的角度,vs2013是提供了加快编译 ...
- python和nodejs的aes128加密对比
之前的机器人是用python写的,有同事想改写成nodejs版,但是验证一直通不过,于是帮忙爬了一下文档. python版的代码大概是长这样: #encoding:utf8 from Crypto.C ...
- C++中的new与delete
C++中对象数组创建时,主要注意的点有:虚函数和带参数的构造函数,当出现虚函数时,对象数组中如通过父对象指向子对象,因为需要做Slice,析构时会造成指针错误引发内存泄露.测试程序如下: class ...
- Xcode添加代码块
1.在编辑区写好代码 @property (nonatomic, assign) <#type#> <#name#> 在Xcode中实际输入完成之后显示的是下面的样子: 2.全 ...
- CSS---解决内容过多就会出文本溢出(显示在区域外面,不换行的情况)
当我们设置我的的div,或者其它文本框固定宽度之后,文本内容过多就会出文本溢出(显示在区域外面,不换行的情况). 这时我们可以使用Css中的几个属于来解.有以下的三个属于可以解决问题: 1,word- ...