几乎完全在Google文档和CMS集线器中工作，我习惯于用点击按钮粗体，斜体和强调文本。
但是如果您的工具栏不提供您想要的确切格式选项，该怎么办？或者您不在文字处理器中工作内容管理系统？
没问题。你需要的只是一些HTML.和CSS。下面我们将讨论格式化文本的一些用例。然后，我们将介绍创建粗体、斜体、下划线、划线、下标和上标文本的过程。
笔记：我会使用的W3Schools在线代码编辑器创建下面的示例。您可以单击任何Source链接查看示例背后的完整代码片段，并尝试您自己的代码片段。
格式化HTML中的文本
格式化文本可以提供各种目的。它可以将读者的眼睛绘制到文档的特定部分。它可以强调重要信息。它可以在段落中分开某些单词，如标题，关键字，想法或另一种语言的短语。
下面的屏幕截图显示了介绍SquArespace＆WordPress之间最关键的差异．注意“Squarespace”和“WordPress”是加粗的。这有助于强调博客文章的主要主题，并将这两个关键字与未格式化的段落以及格式化的内部链接和CTA区分开来。
让我们来看看如何在HTML中粗体文本，因此您可以在您自己的博客文章中或网站上的其他地方重新创建此效果。
如何在HTML中粗体文本
HTML中有多种方式来粗体。您可以使用强标记表示文本具有很强的重要性或紧迫性。浏览器将读取此标记并以粗体呈现文本。如果要仅用于装饰的粗体文本，那么您将使用CSS字体重量属性并将此属性设置为“粗体”。
还有另一种在HTML中加粗文本的方法:标记。但这只能作为最后的手段，因为它会使内容本地化和未来的校对变得困难HTML5规范．因此，我们只能使用标记和CSS字体重量属性显示示例。
如何用强元素粗体粗体文本
如果您想定义具有强度强的文本，那么您可以将文本放在标签中。这个标签将嵌套在另一个元素中，比如段落或span元素。让我们来看看一个例子。
这是HTML：
使用HTML强元素
本段是正常的。
这个段落很重要!< /强> < / p >
结果:
如何粗体文本在HTML与CSS字体重量属性
如果您想简单地装饰粗体文本，那么您将使用CSS字体重量属性而不是HTML强元素。让我们说你想在段落中大胆。然后您将在SPAN标签中包装单词并使用aCSS选择器仅将字体重量属性应用于SPAN元素。
CSS:
跨度 {
粗细:大胆的;
}
这是HTML：
使用CSS字体重量属性
这是一个关键字所以我想用CSS加粗它
结果:
如何在HTML中斜体文本
有多种方法可以在HTML中斜体文本。您可以使用EM标记表示文本强调强调。浏览器将读取此标记并呈现斜体中的文本。如果要简单地为装饰斜体，则使用CSS字体样式属性并将此属性设置为“斜体”。
有另一种方法可以在HTML中斜体文本：标记。像标签一样，它意味着用作最后的手段。因此，我们只能使用标记和CSS字体重量属性显示示例。
如何用重点元素斜体中的文本
如果您想定义带有强调的文本，那么您可以将文本放置在标记中。这个标签将嵌套在另一个元素中，比如段落或span元素。让我们来看看一个例子。
这是HTML：
使用HTML强调元素
本段是正常的。
本段是强调的！
结果:
如何使用CSS Font-Style属性在HTML中斜体文本
如果您想简单地将文本斜体化以进行装饰，那么可以使用CSS的font-style属性而不是HTML的强调元素。按照上面粗体的例子，假设你想在段落中斜体一个单词。然后您将在SPAN标签中包装单词并使用aCSS选择器仅将字体样式属性应用于SPAN元素。
CSS:
跨度 {
字体样式:斜体;
}
这是HTML：
. font - family:宋体
上学现在！
我想让读者以不同的语气听到这个词，所以我用CSS斜体了它
结果:
如何在HTML中强调文本
要在HTML中下划线文本，请使用CSS文本装饰属性并将属性设置为“下划线”。
还有一种方法可以在HTML中给文本加下划线:元素。但是不应该为了演示的目的而对文本进行下划线。相反，元素的意思是具体用例，喜欢标记拼写错误的单词，表示中文文本中的正确名称，或表示姓氏。
下面我们来看看这两种方法。
如何使用未分类的注释元素在HTML中加下划线文本
如果希望表示未接合的文本或具有非文本注释的文本，则可以将文本放置在标记中。这个标签将嵌套在另一个元素中，比如段落或span元素。让我们来看看一个例子。
这是HTML：
使用HTML未纯注释元素
这一段没有拼写错误
< p >这一段有一个拼写< u > mistak < / u >。< / p >
结果:
如何使用CSS文本装饰属性在HTML中强调文本
如果您想强调装饰的文本，而不是表示非文本注释，那么您将使用CSS文本装饰属性。您还可以使用此属性表示类似于单词处理器的方式的拼写错误。
因为文本装饰是文本装饰线，文本装饰 - 颜色和文本装饰风格的速记性，所以你可以用红色，波浪线和一个绿色的错误引出一个拼写错误，例子。
在下面的示例中，我们将用不同的方式包装跨度标记中的单词类属性．这样，我们可以向每个人应用唯一的样式属性。我们也会使用六角彩色代码红色和绿色。
CSS:
.spelling {
文本装饰：＃FF0000波浪下划线;
}
。语法 {
文本装饰：＃008000波浪下划线;
}
这是HTML：
使用CSS文本装饰属性
本段具有拼写 mistak 。
This paragraph has a grammar mistake.
.< span
这是结果：
如何在HTML中呈现删除文本
有多种方法可以在HTML中呈现删除文本，这些文本是用水平线显示的文本。您可以使用标记来指示该文本现在不正确，不准确或无关紧要。如果要指示已删除的文本，请使用标记。
如果出于其他原因想将文本显示为划线，那么可以使用CSS text-decoration-line属性，并将该属性设置为“line-through”。
需要注意的是，这里曾经有另一个元素:HTML 元素。但这已经被弃用了，不再是渲染删除文本的可行选项。
让我们来看看当前版本的HTML中支持的三种方法的示例。
如何用strikethrough元素删除HTML中的文本
如果您想删除文本，以表明它不再是正确，准确或相关的，那么您可以将文本放在标签里面。这个标签将嵌套在另一个元素中，比如段落或span元素。让我们来看看一个例子。
这是HTML：
使用HTML划线元素
仍然有几种烤饼。
< / p > < p >卖完了
结果:
如何使用已删除的文本元素来删除HTML中的文本
如果您想删除文本以显示它已被删除，那么您可以将文本放在标记中。这个标签将嵌套在另一个元素中，比如段落或span元素。让我们来看看一个例子。
这是HTML：
使用HTML已删除的文本元素
事件开始于下午7点(美国东部时间)下午6点(美国东部时间)
结果:
如何使用CSS文本装饰线属性来删除HTML中的文本
如果您想以另一个目的删除文本，那么您将使用CSS Text-Decoration-Line属性。
在下面的示例中，我们将在某些列表项旁边包含类名。这样，我们可以将文本装饰线属性应用于这些特定行项目而不是整个列表。
CSS:
。购买{
文本装饰线：线路;
}
这是HTML：
使用CSS文本装饰线属性
< / p > < p >购物清单
< ul >
Jalapeno
袋冷冻玉米
Cotija Cheese
梅奥<李class = "购买" > < /李>
辣椒粉
香菜
Lime
< / ul >
结果:
如何在HTML中创建文本下标
下标文本通常以较小但较重的字体显示，比正常行低半字符。它可以用来写化学公式、数学方程、分数等等。
要在HTML中创建下标文本，请使用元素。以下是一个例子，其显示了用于产生碳酸的公式。
这是HTML：
使用HTML下标元素
这里的下标tag如何看起来。
2 < p > . <子> < /子> + H <子> 2子> < / O↔H <子> 2 < /子>有限公司<子> 3 < /子>
这里没有下标tag的外观。
CO2 + H2O↔H2CO3
结果:
如何在HTML中创建文本上标
通常以较小但更重的字体呈现，上标文出现在正常线上上方的一半。它也可用于编写脚注，版权，注册商标和一些化学公式。
要在HTML中创建上标文本，请使用元素。下面是一个示例，其表示用于产生碳酸氢盐离子的整个公式。
这是HTML：
使用HTML上标元素
这是它的下标和上标标签的样子
2 < p > . <子> < /子> + H <子> 2子> < / O↔H <子> 2 < /子>有限公司<子> 3 < /子>↔H <一口> + > < /晚餐+ HCO <子> 3 < /子> <一口> - < /一口> < / p >
这里没有标签的外观。
CO2 + H2O↔HCO3↔HCO3
结果:
使用HTML和CSS格式化文本
通过以上述任何方式格式化文本，您可以帮助您的读者更好地了解并保留您网站的信息。无论您是想要大胆的关键字还是包含化学公式中的下标，格式化文本只需要HTML和CSS的基本知识。
最初发布于10月2日，2020年7月7:00:00，更新了7月28日2021年
话题：
HTML.相关文章
![如何在HTML中制作复选框[+示例]](http://www.emcdepot.com/hubfs/Junior%20developer%20adding%20HTML%20checkboxes%20to%20web%20forms.jpg)
![如何使用表元素[+模板]创建HTML电子邮件](http://www.emcdepot.com/hubfs/Marketer%20crearing%20HTML%20email%20using%20table%20elements.jpg)
![什么是html选择元素？[+如何制作一个]](http://www.emcdepot.com/hubfs/Google%20Drive%20Integration/What%20is%20the%20HTML%20Select%20Element%3F%20%5B+%20How%20to%20Make%20One%5D.jpeg)