在我们使用HTML标签时,要清楚知道标签除了具有一定的语义外,还有默认的样式,例如<b>(加粗)、<em>(倾斜)等,通过这些标签我们无需借助 CSS 就可以为网页中的内容定义样式。在这些具有语义和默认样式的标签中,有许多是针对文本的,通过这些标签我们可以格式化文本(为文本添加样式),例如使文本加粗倾斜或者添加下划线等。


HTML 文本格式化都有哪些?

举例说明:

(1)<b>加粗文本</b>

(2)<i>斜体文本</i>

(3)<code>电脑自动输出</code>

(4)这是<sub>下</sub> 和<sup>上</sup>

上面这四个是我们经常会使用的,下面把HTML中许多用来格式化文本的标签列出来,便于大家日后寻找和记录:

标签描述
<b>...</b>加粗标签中的字体
<em>...</em>强调标签中的内容,并使标签中的字体倾斜
<i>...</i>定义标签中的字体为斜体
<small>...</small>定义标签中的字体为小号字体
<strong>...</strong>强调标签中的内容,并将字体加粗
<sub>...</sub>定义下标文本
<sup>...</sup>定义上标文本
<ins>...</ins>定义文档的其余部分之外的插入文本
<del>...</del>在文本内容上添加删除线
<code>...</code>定义一段代码
<kbd>...</kbd>用来表示文本是通过键盘输入的
<samp>...</samp>定义程序的样本
<var>...</var>定义变量
<pre>...</pre>定义预格式化的文本,被该标签包裹的文本会保留所有的空格和换行符,字体也会呈现为等宽字体
<abbr>...</abbr>用来表示标签中的内容为缩写形式
<address>...</address>用来定义文档作者的联系信息,被该标签包裹的文本通常会以斜体呈现,并在文本前面换行
<bdo>...</bdo>定义标签中的文字方向
<blockquote>...</blockquote>定义一段引用的文本,例如名人名言,文本会换行输出,并在左右两边进行缩进
<q>...</q>定义一段短的引用,浏览器会将引用的内容使用双引号包裹起来
<cite>...</cite>表示对某个文献的引用,例如书籍或杂志的名称,文本会以斜体显示
<dfn>...</dfn>用来定义一个术语,标签中的文本会以斜体呈现

按照作用的不同,可以根据文字意思和作用,将这些格式化文本的标签分为两类:

(1)物理标签:这类标签用来为设置文本的外观;

(2)逻辑标签:这类标签用来赋予文本一些逻辑或语义值。

通过上表可以看出,有些标签的呈现效果虽然相同,但语义却不同,例如<strong>和<b>标签、<em>和<i>标签,下面就来详细介绍一下。

● <strong>和<b>标签之间的区别

相同点:b和strong都是使字体加粗。

区别一:

但是strong的语义性更强烈,对于优化搜索来说更好,能让它知道你这里面的内容的语义效果,b只对视觉效果进行了强调,而语义上没有帮助。

区别二:

strong是web标准中xhtml的标签,strong的意思是“强调”;b是html的,b的意思是bold(粗体)。

为了符合现在W3C的标准,推荐使用strong标签。


● <em>和<i>标签之间的区别

主要区别:<em>是基于内容的样式,<i>一个是基于物理的样式。

< i > 是视觉要素(presentationl elements),分别表示无意义的加粗,无意义的斜体,仅仅表示样式上是粗体或斜体,而没有强调的语义,这两个标签在HTML4.01中不推荐使用,建议用CSS样式;

< em > 是表达要素(phrase elements)。< em >(emphasized text)表示一般的强调文本,这个标签具有语义。该标签中的内容在搜索引擎中更受重视,一些语音阅读器也会根据它在阅读时加强语气。

点赞(0)

C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程,并配有习题和答疑,点击了解:

一点编程也不会写的:零基础C语言学练课程

解决困扰你多年的C语言疑难杂症特性的C语言进阶课程

从零到写出一个爬虫的Python编程课程

只会语法写不出代码?手把手带你写100个编程真题的编程百练课程

信息学奥赛或C++选手的 必学C++课程

蓝桥杯ACM、信息学奥赛的必学课程:算法竞赛课入门课程

手把手讲解近五年真题的蓝桥杯辅导课程

Dotcpp在线编译      (登录可减少运行等待时间)