在我们使用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)表示一般的强调文本,这个标签具有语义。该标签中的内容在搜索引擎中更受重视,一些语音阅读器也会根据它在阅读时加强语气。
C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程,并配有习题和答疑,点击了解:
一点编程也不会写的:零基础C语言学练课程
解决困扰你多年的C语言疑难杂症特性的C语言进阶课程
从零到写出一个爬虫的Python编程课程
只会语法写不出代码?手把手带你写100个编程真题的编程百练课程
信息学奥赛或C++选手的 必学C++课程
蓝桥杯ACM、信息学奥赛的必学课程:算法竞赛课入门课程
手把手讲解近五年真题的蓝桥杯辅导课程