一篇文章带你了解HTML格式化元素

220 阅读2分钟

一、为什么要格式化元素?

HTML定义了具有特殊意义的特殊元素定义的文本,比如,使用元素来格式化输出,如粗体或斜体文本。

格式化元素被设计用来显示特殊类型的文本。

二、标签

1. b 标签和 strong 标签

常规显示

![](https://upload-images.jianshu.io/upload_images/9337488-9a718026cf98711d?imageMogr2/auto-orient/strip|imageView2/2/w/678/format/webp)

HTML 元素定义粗体文本,没有任何额外的重要性,例如:

<b>加粗文本内容.</b>
![](https://upload-images.jianshu.io/upload_images/9337488-d2720dd1c5f88bff.png?imageMogr2/auto-orient/strip|imageView2/2/w/1036/format/webp)

HTML 元素定义粗文本,增加语义的强调。

例如:

<strong>加粗文本.</strong>
![](https://upload-images.jianshu.io/upload_images/9337488-685e0ab71a9b74d8.png?imageMogr2/auto-orient/strip|imageView2/2/w/1036/format/webp)

2. i标签 和em标签

HTML

斜体文本.

元素定义斜体文本,没有任何额外的重要性。

例如:

<i>斜体文本.</i>
![](https://upload-images.jianshu.io/upload_images/9337488-09f0d19cd8883359?imageMogr2/auto-orient/strip|imageView2/2/w/919/format/webp)

HTML 元素定义强调文本,增加语义重要性,例如:

<em>强调文本.</em>

注意:

浏览器显示 相同, 相同 。然而,有些标签的含义是有区别的: 粗体和斜体文本, 但是 意味着文本是“重要的”。

3. small 标签

HTML 元素定义了小文字。

例如:

<h2>HTML <small>Small</small> 格式</h2>
![](https://upload-images.jianshu.io/upload_images/9337488-e2968b34e3eb82d7?imageMogr2/auto-orient/strip|imageView2/2/w/872/format/webp)

4. mark标签

HTML 元素定义标记或突出文本。

例如:

<h2>HTML <mark>标记</mark> 格式</h2>
![](https://upload-images.jianshu.io/upload_images/9337488-f6099b17395ebe40.png?imageMogr2/auto-orient/strip|imageView2/2/w/1059/format/webp)

5. del标签

HTML 元素定义了删除(移除)文字。

例如:

<p>我喜欢的颜色是 <del>蓝色</del> 红色.</p>
![](https://upload-images.jianshu.io/upload_images/9337488-4036f4a59b1e25bc.png?imageMogr2/auto-orient/strip|imageView2/2/w/928/format/webp)

6. ins标签

HTML 元素定义了插入文本(添加)。

例如:

<p>我喜欢的 <ins>颜色</ins> 是红色.</p>
![](https://upload-images.jianshu.io/upload_images/9337488-69151ac320bab601?imageMogr2/auto-orient/strip|imageView2/2/w/777/format/webp)

7. sub标签

HTML 元素定义下标文本。

例如:

<p>这是一个 <sub>下标</sub> 文本.</p>
![](https://upload-images.jianshu.io/upload_images/9337488-b0b3925d42df6f15?imageMogr2/auto-orient/strip|imageView2/2/w/932/format/webp)

8. sup标签

HTML 元素定义上标文本。

例如:

<p>这是一个 <sup>上标</sup> 文本.</p>
![](https://upload-images.jianshu.io/upload_images/9337488-1fe8d94fc57c0265?imageMogr2/auto-orient/strip|imageView2/2/w/690/format/webp)

三、总结

本文对特殊类型的文本的HTML的标签进行了详细的介绍。对遇到的问题进行详细的解答。代码演示效果图能够更好的理解。代码很简单,希望对你有所启发。希望对大家的学习有帮助。