HTML 空格

我们发现并使用的几乎每个网站的结构都是使用 HTML 创建的，HTML 是一种用于对文本文件进行分类的标准化系统。换行符、段落、粗体字、斜体字和其他功能都是使用 HTML 添加的。通过使用标签，HTML 有助于创建这种结构，这些标签指示浏览器如何处理内容。

例如，我们会将一个词放在 strong>粗体/strong> 标签之间，使其显示为粗体。起始标签 (/) 表示粗体的开始位置，而第一个标签 (/) 表示粗体的结束位置。它充当大多数网页的基础。因此，如果你正在学习编码，这就是开始的地方。

如何在 HTML 中添加空格

除了单词之间的单个空格之外，我们为了在浏览器中显示而输入的 HTML 文本中的所有空白区域都将被忽略。因此，我们必须在文档中编程所需的空白区域。任何一行文本都可以在 HTML 中添加空格。例如，我们可以使用 HTML 对象 &nbsp 在表格和段落内容中插入空白区域。由于 HTML 缺少空白区域的键盘字母，我们必须输入实体   来添加每个空格。

这看起来可能很简单，但向 HTML 添加空格可能具有挑战性。至少有五种不同的方法可以解决这个问题。

在本次培训中，我们将看到许多实例。它还将演示如何使用更复杂的空格形式。

所有这些都可以在纯 HTML 中实现，无需使用 CSS。但请注意，通过 CSS 向 HTML 添加空格是最好的做法。

ASCII 空格是什么样子？

空格由 ASCII 符号 20 表示。但这只是公认的做法。

HTML 中有五种不同类型的空格可以使用。它们在未经训练的眼睛看来是相同的，但它们的功能略有不同。

另一个选项是制表符，它模拟按下键盘上的 Tab 键。回车符是另一个例子，它模拟按下键盘上的 Enter 键。

不间断空格： &nbsp

半角空格：  

全角空格：  

窄空格：  

标准空格 

新行（回车） 

制表符 	

左侧表示字符，右侧表示HTML 代码。

空格中的字符宽度是多少？

对于空格字符，有四种标准宽度

• 标准宽度空格： 因为它不会导致换行（也称为回车），所以它也称为“不换行空格”。
• 全角空格： 之所以命名为“全角”，是因为无论你使用何种字体，它的宽度都与字母 M 相同。（如果我们听说过“破折号”这个词，那么我们就知道我们在说什么。）
• 半角空格： 之所以命名为“半角”，是因为它的宽度与你的字体中的字母 n 相同。
• 窄空格： 最窄的所有空格是“窄空格”，这是最后一个选项。

HTML 中的空格符号是什么意思？

 是最常用的 HTML 实体。

要使此文本填充空格，请尝试将其抛出。

例如，假设我们希望在一个短语后添加两个空格，但网站渲染引擎自行删除了其中一个空格。要添加两个空格，我们可以输入 

空白：它是什么？

不可见的字符称为空白。它们包括

1. 空格、
2. 制表符和
3. 换行符（回车、换行或两者），

为什么这很重要？

例如，这些字母在文字处理器中不可见，但它们确实会影响文本的空格和格式。浏览器将许多空白字符压缩成 HTML 中的一个空格，这与其他标记语言不同。

此 HTML 中的单词之间有多个空格，每行都以 CRLF（回车、换行）字符结尾。所有空白字符都将被浏览器折叠。

示例

输出

插入空格

1. 使用文本的不间断空格符号 (&nbsp) 来提供更多间距。
2. 在不同情况下，可以使用 CSS padding 属性来增加元素内部的空格。
3. CSS margin 属性允许在元素周围添加额外的空格。

尽管不间断空格很有用，但不应过度使用它们，因为这样做可能会干扰内容在浏览器中的显示方式。此外，避免将不间断空格用于样式目的，例如在网页上缩进或居中元素；样式需求应通过 CSS 处理。

除了   实体之外，HTML 还支持以下用于多个相邻空白区域的额外实体

 

字符实体   用于表示空格。En 是一个测量单位，相当于 8 像素，或一个 em（16 像素）宽度的一半。

内容之间的半角空格语法是   下面是一个如何使用 HTML &ensp 实体的示例

输出

上面示例中使用了   实体来向 HTML 添加空格，其宽度为 8 像素。它们也可以用于多个相邻位置。

保持格式和间距

如果你希望保留已指定的格式和间距，有两种选择

1. 添加 HTML 格式和空格
2. 使用 <pre> 标签。

使用“pre”标签

用 <pre> 标签替换 <p> 标签会产生以下结果

示例

输出

是的，<pre> 标签保留了原始格式，但它也切换到等宽字体。所有这些都可以修复；但是，使用 <pre> 标签并不总是最佳选择。HTML 间距是一种更流行的方法。

添加 HTML 格式和空格

作为替代方案，我们可以包含以下 HTML 元素和符号

输出

<br /> 元素需要换行符。

不间断空格： &nbsp;

浏览器不会折叠使用不间断空格字符 () 添加的空格。

此外，顾名思义，它阻止浏览器在此处分隔两个单词。

输出

在此模型中，文本开头添加了 10 个 &nbsp; 空格。另一个 &nbsp; 放在“takes”之间，当句子由于空间限制而换行时，它不会被隔离。

填充属性

元素的内部空间通过 CSS padding 属性增加。

它接受 1 到 4 的值，从顶部、右侧、底部和右侧开始。

“div” 元素的所有侧面都有 20 像素的填充。

输出

边距属性

1. 使用 CSS margin 属性，在元素周围添加额外的空间。
2. 它接受 1 到 4 的值，从顶部、右侧、底部和右侧开始。

“div” 元素的所有侧面都有 40 像素的边距。

输出

填充与边距

1. 填充和边距都增加了元素的空间。
2. 填充会留下一个被视为元素组成部分的空白。
3. 边距创建的空间被视为存在于元素边界之外。
4. 点击区域、背景颜色和网站的其他属性都受到这种变化的影响。

人们可能会认为在 HTML 中添加空格就像连续敲击空格键一样简单。但事情并非如此。像在文本文档中那样多次按下空格键不会添加更多相邻的空白区域。如果我们这样做，浏览器会将所有相邻的空白区域合并为一个。为了演示在 HTML 中使用多个空格时会发生什么，让我们看一个示例

输出

通过在 HTML 中重复敲击空格键，如上面的示例所示，我们试图在网页中插入多个连续的空白区域。但是，浏览器将多个相邻的空白区域渲染为单个空格，并忽略元素之前、之后和外部的空格。这种现象称为空白折叠。尽管空白折叠有时会令人恼火，但有几种技术可以在 HTML 和 CSS（层叠样式表）中添加更多间距。

&emsp

字符实体 &emsp; 用于表示全角空格。全角空格的宽度为 16 像素，相当于一个 emsp。

文本中全角空格的语法是 &emsp; 下面是一个如何使用 HTML &emsp 实体的示例

输出

上面示例中使用了 &emsp; 实体来向 HTML 添加空格，其宽度为 16 像素。它们也可以用于多个相邻空格。

&thinsp

字符实体 &thinsp; 用于表示窄空格，通常称为窄间距。&amp;&thinsp; 的宽度是 em 的六分之一。

窄空格在语法中写为 &amp;thinsp; 在内容之间。下面是一个如何使用 HTML 实体 "&thinsp;" 的示例

输出

上面示例中使用了 &thinsp; 实体来向 HTML 添加窄空格，其宽度是 em 的六分之一。它们也用于多个相邻空格。

输出

利用空白的优点

• 扩展内容可理解性： 当客户在我们的网站上时，他们应该能够看到他们正在继续做什么，并获得继续阅读的动力。信不信由你，段落之间以及文本和图片块周围的空白有助于人们理解他们正在阅读的内容，并有助于整体提升客户体验。
• 更多协作： 让我们面对现实吧，访客在浏览网站时总是匆匆忙忙，拥有大量空白会通过防止减慢访客速度的干扰来增加互动。即使是对象周围的轻微填充也会引起我们对网站特定区域的注意。根据 Human Elements Worldwide 进行的研究，空白使认知度提高了近 20%。
• 突出号召性用语 (CTA) 的能力： 有时，最明显的方法是使事物更大。我们可以使图片更大或按钮更大。然而，用空白包围事物同样有效。
• 一个干净的网站等同于一个令人难忘的网站： 我们网站的第一印象非常重要。许多出色的图形、各种各样的颜色方案——所有这些元素都构成了网站给人的印象；然而，空白尤为重要，因为它显示了技巧和独创性。空白不会使您的网站显得空荡荡或平庸。只要空白使用得当，它就会为您的网站增添一种优雅和卓越的感觉。
• 创造平衡： 过少的空白会导致混乱、无序和不稳定——这些特质您不希望与您网站的品牌相关联。另一方面，过多的空白可能会突出内容不足和客户指导不足。关键是平衡您的设计，让空白充当一个强大的工具，将大量内容分隔开来，以便于访问和改善客户体验。
• 充当分隔符： 空白将设计中不相关的元素分隔开来。它可以用于将图片或图形彼此分隔开来，并改善您的整体视觉布局。合理使用空白可以使思想传达更清晰，设计更有效。

为什么空白很重要？

作为一名设计师，我认为空白是良好设计的基本组成部分。设计师在使用“空白”一词时，指的是负空间，或构图中各个部分之间的空间。它是页面上图形、边距和装订线之间的空白区域，未标记任何内容。列、文本行和图形之间的空间为眼睛提供了视觉上的喘息空间。

空白是设计中一个关键组成部分的原因很有说服力。如果运用得当，它可以彻底改变我们网站的设计，并为其带来多种好处。我们必须制作和创建美观的布局，并鼓励读者继续阅读。在为网络设计时，持续牢记向客户提供出色产品是我们的首要任务至关重要。

空白可用于引导读者从一个元素到另一个元素，创造和谐与平衡，并帮助品牌化设计。我们的主要目标是使网站看起来简单明了，并提供用户喜欢和重视的内容。空白不仅仅是“空白”空间；它是一个设计特征，使页面上的项目能够存在。该区域达到了平衡，并不断提醒人们存在精美的设计。为了传达清晰的信息，我们不需要制作一个文本和图形过载的布局。