HTML中strong与b,em与i标签的区别

时间:2022-09-17 09:40:59

先看效果

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 of strong. 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 of em. 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标签的区别的更多相关文章

  1. &lt&semi;b&gt&semi;与&lt&semi;strong&gt&semi; &lt&semi;em&gt&semi;与&lt&semi;i&gt&semi;标签的区别

    <b>与 <strong>用在网页上都能使字体加粗,二者的不同是:<b>是物理元素 ;<strong>是逻辑元素. 物理元素强调的是一种物理行为.比如说 ...

  2. CSS中常用的字体单位:px、em、rem和&percnt;的区别

    在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: ...

  3. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  4. html中&lt&semi;b&gt&semi;标签和&lt&semi;Strong&gt&semi;标签的区别

    关于html标签中b和strong两个的区别,我也是今早上才注意的,以前都是混着用的,早上看书的时候才注意到这两个标签的区别. 用在网页上,默认情况下它们起的均是加粗字体的作用,二者所不同的是,&lt ...

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

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

  6. css中字体常用单位px、em、rem和&percnt;的区别及用法总结

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

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

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

  8. html中内联元素和块级元素的区别

    1.下表列出了内联元素和块级元素的主要区别 html中内联元素和块级元素的区别 块级元素 行内元素 独占一行,默认情况下,其宽度自动填满其父元素宽度 相邻的行内元素会排列在同一行里,直到一行排不下,才 ...

  9. iOS 之 Strong与Weak,&lowbar;unsafe &lowbar;unretained与weak区别

    1. 在ARC中 strong(强引用) 相当于retain, weak(弱引用) 相当于assign.ARC下,strong告诉编译器自动插入retain.但是在ARC下,代理协议的属性依然用ass ...

随机推荐

  1. xamarin&period;ios 跳转页面

    一:用Segue跳转页面 按住Ctrl连线,选择show,后台覆写 ShouldPerformSegue方法,返回True跳转,False取消跳转.   二:通过代码跳转至StoryBoard页面 U ...

  2. checkbox选中与取消选择

    先上代码 <form> 你爱好的运动是?<br/> <input type="checkbox" name="items" val ...

  3. Android 自定义View 三板斧之一——继承现有控件

    通常情况下,Android实现自定义控件无非三种方式. Ⅰ.继承现有控件,对其控件的功能进行拓展. Ⅱ.将现有控件进行组合,实现功能更加强大控件. Ⅲ.重写View实现全新的控件 本文重点讨论继承现有 ...

  4. TYVJ P1047 乘积最大 Label:dp

    背景 NOIP 2000 普及组 第三道 描述 今年是国际数学联盟确定的“2000——世界数学年”,又恰逢我国著名数学家华罗庚先生诞辰90周年.在华罗庚先生的家乡江苏金坛,组织了一场别开生面的数学智力 ...

  5. MemSQL Start&lbrack;c&rsqb;UP 2&period;0 - Round 2 - Online Round

    搞到凌晨4点一个没出,要gg了. A. Golden System http://codeforces.com/contest/458/problem/A #include<cstdio> ...

  6. ASP&period;NET Boilerplate 工作单元

    从上往下说起,框架使用castle拦截器,拦截实现了IApplication.IRepository接口的所有方法,和使用了UnitOfWork 特性的方法,代码如下 internal class U ...

  7. C&num; winform调用东软动态库的问题

    在C# winform程序中调用东软的动态库ESActiveX.ocx 如果是引用ESActiveX.ocx,然后在代码中设置示例,调用就会报"灾难性错误" 如果在工具箱中点击右键 ...

  8. Spark2&period;3 HA集群的分布式安装

    一.下载Spark安装包 1.从官网下载 http://spark.apache.org/downloads.html 2.从微软的镜像站下载 http://mirrors.hust.edu.cn/a ...

  9. Eclipse workspace 被占用问题

    eclipse 使用一段时间后,有时会因为一些故障自己就莫名奇妙的关闭了,再打开时有时没有问题,有时会提示错误 Workspace Unavailable: Workspace in use or c ...

  10. 高密度WIFI部署要点

    1. 划分AP组,分组带宽控制 根据区域的人数密集程度划分不同的AP组,并进行优化策略调整,分组分权限进行带宽控制,以确保单用户的2.4G带宽不低于1M,5G用户不低于2M2. 相邻AP错开信道 超高 ...