HTML 文本格式化

2020年12月17日2021年1月3日

HTML 使用标签 (“bold”) 与 (“italic”) 对输出的文本进行格式, 如：粗体 or 斜体。这些HTML标签被称为格式化标签。

HTML格式设置的目的是格式化文本以获得更好的显示效果。因为HTML中有许多格式标签。我们可以用这些标签将文本加粗，斜体或带下划线，我们无需使用CSS即可格式化文本。

1、HTML粗体文本

HTML 和格式标签

HTML 元素是一个物理标记，以粗体显示文本，没有任何逻辑上的重要性。如果您在 ………… 元素内编写任何内容，则会以粗体字母显示。

HTML 标签是一个逻辑标签，它以粗体显示内容并告知浏览器其逻辑重要性。与显示效果相同，区别在于语义。

<h3>《望庐山瀑布》</h3>
<p><b>日照香炉生紫烟，遥看瀑布挂前川。</b></p>
<p><strong>飞流直下三千尺，疑是银河落九天。</strong></p>

效果展示：

《望庐山瀑布》

日照香炉生紫烟，遥看瀑布挂前川。

飞流直下三千尺，疑是银河落九天。

2、HTML斜体文本

HTML 和格式标签

HTML 元素是物理元素，它以斜体字体显示了包含的内容，没有任何附加的重要性。如果您在 …….. 元素内编写任何内容，则以斜体字母显示。

HTML 标签是一个逻辑元素，它将以斜体字体显示包含的内容，并增加了语义的重要性。

<h3>《望庐山瀑布》</h3>
<p><i>日照香炉生紫烟，遥看瀑布挂前川。</i></p>
<p><em>飞流直下三千尺，疑是银河落九天。</em></p>

效果展示：

《望庐山瀑布》

日照香炉生紫烟，遥看瀑布挂前川。

飞流直下三千尺，疑是银河落九天。

3、HTML标记文本

如果要标记或突出显示文本，则应将内容写在 ……… 中。

<h3>《望庐山瀑布》</h3>
<p><mark>日照香炉生紫烟，遥看瀑布挂前川。</mark></p>
<p>飞流直下三千尺，疑是银河落九天。</p>

效果展示：

《望庐山瀑布》

日照香炉生紫烟，遥看瀑布挂前川。

飞流直下三千尺，疑是银河落九天。

4、HTML下划线文本

如果您在 ……… 元素内写了任何内容，则会在带下划线的文本中显示。

<h3>《望庐山瀑布》</h3>
<p>日照香炉生紫烟，遥看瀑布挂前川。</p>
<p><u>飞流直下三千尺，疑是银河落九天。</u></p>

效果展示：

《望庐山瀑布》

日照香炉生紫烟，遥看瀑布挂前川。

飞流直下三千尺，疑是银河落九天。

5、HTML删除线文本

<strike> ……. </ strike>元素中写入的所有内容均带有删除线。是一条横跨文字的细线。

<h3>《望庐山瀑布》</h3>
<p>日照香炉生紫烟，遥看瀑布挂前川。</p>
<p><strike>飞流直下三千尺，疑是银河落九天。</strike></p>

效果展示：

《望庐山瀑布》

日照香炉生紫烟，遥看瀑布挂前川。

~~飞流直下三千尺，疑是银河落九天。~~

6、HTML等宽文本

如果我们希望每个字母都具有相同的宽度，则应将内容写在<tt> ……… </ tt>元素内。

提示：我们知道大多数字体都称为可变宽度字体，因为不同的字母具有不同的宽度。（例如：“ w”比“ i”宽）。等宽字体在每个字母之间提供相似的空间。

<p>日照香炉生紫烟，遥看瀑布挂前川。</p>
<p><tt>飞流直下三千尺，疑是银河落九天。</tt></p><br>

<p>who are you?</p>
<p><tt>who are you?</tt></p>

效果展示：

日照香炉生紫烟，遥看瀑布挂前川。

飞流直下三千尺，疑是银河落九天。

who are you?

who are you?

7、HTML上标与下标文本

如果将内容放在 ……. 元素中，则会显示上标；表示它显示为比其他字符高半个字符。

如果将内容放在 ……. 元素内，则显示在下标；表示它显示为比其他字符低半个字符的高度。

<p>这是 <sub> 下标</sub> 和 <sup> 上标</sup></p>

效果展示：

这是 _下标和 ^上标

8、HTML删除文本与插入文本

放在<del> ….. </ del>中的所有内容都将显示为已删除的文本。

<ins> ….. </ ins>中的任何内容都将显示为插入的文本。

<h3>《望庐山瀑布》</h3>
<p>作者：<del>王之涣</del> <ins>李白</ins><p>
<p>日照香炉生紫烟，遥看瀑布挂前川。</p>
<p>飞流直下三千尺，疑是银河落九天。</p>

效果展示：

《望庐山瀑布》

~~王之涣~~李白

日照香炉生紫烟，遥看瀑布挂前川。

飞流直下三千尺，疑是银河落九天。

9、HTML较大文字与较小文字

如果要使字体大小大于文本的其余部分，则将内容放在<big> ……… </ big>之内。它会让字体变得比上面的字体大。

如果要使字体大小小于文本的其余部分，则将内容放在 ……… 标记内。它会让字体变得比上面的字体小。

<h3>《望庐山瀑布》</h3>
<p><small>日照香炉生紫烟，遥看瀑布挂前川。</small></p>
<p><big>飞流直下三千尺，疑是银河落九天。</big></p>

效果展示：

《望庐山瀑布》

日照香炉生紫烟，遥看瀑布挂前川。

飞流直下三千尺，疑是银河落九天。

亲自试试