HTML 中的制表符空格

17 Mar 2025 | 5 分钟阅读

在 HTML 中，空格是网页上不可见字符。制表符（tab space）是一个字符，在 HTML 中占用 4 个空格的宽度，这意味着一个制表符代表四个空格。

当你在 **HTML** 代码中输入多个空格或制表符时，网页只会显示一个空格。让我们通过一个例子来更好地理解它。

示例

我们在 **<title>** 元素、**<h1>** 元素和 **<p>** 元素中的单词之间添加了额外的空格和制表符。我们还添加了标签之间的行间距。我们将看到网页浏览器如何响应以下代码。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Whitespace Example
    </title>
</head>
<body>
    
    <h1>    White    space    example   </h1>

    <p> It is the
        paragraph about
        white space in HTML.
    </p>

</body>
</html>

输出

我们可以看到 HTML 代码中的额外空格不会影响网页，因为单词和标签之间的空格数只有一个。

如果你想在 HTML 中添加制表符间距，你不必担心，因为有很多方法可以在 HTML 中添加制表符间距。

1. <pre> 标签

我们可以借助 <pre> 标签在 HTML 代码中添加制表符间距。它会按照 HTML 代码中添加的方式显示空格或制表符。

<pre> 标签的语法

**<pre>** 是开始标签，**</pre>** 是结束标签，如上面语法所示。带有制表符间距的文本可以写在开始和结束标签之间。

示例

在此示例中，我们将添加制表符间距到单词之间。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of providing tab spaces using &lt;/pre&gt; tag</title>
</head>
<body>
    <h1>Example of providing tab spaces using &lt;/pre&gt; tag</h1>
    <pre>
    <p>This    sentence    has    a    gap    of    one    tab    space    between    the    words.</p>
    </pre>
</body>
</html>

输出

我们可以看到输出中的段落单词之间有一个制表符间距。

2. CSS 类

我们可以使用 CSS 类在浏览器中显示制表符间距。

**.class** 是用于选择 HTML 元素的 CSS 选择器。句点字符（.）后面跟着类名来指定 CSS 类。类名应该与我们想要的样式相关。由于我们将显示制表符间距，我们将使用类名 **".tab-space"**。

我们可以使用 margin 或 padding 属性并为它们提供值来显示制表符间距，并将 display 属性设置为 inline-block，这确保了 HTML 元素之后没有换行。**display** 属性带有 **inline-block** 值主要是在文本之后提供空间。

CSS 类的语法

.tab-space {
		display: inline-block:
		margin-left: 40px;
}

上面语法中的类名是 **.tab-space**。CSS 属性是 **display** 和 **margin-left**。CSS 的 padding 属性也可以用来代替 margin-left 属性。

示例

在此示例中，我们将使用 CSS 类选择器来演示制表符间距。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Illustration for demonstrating tab spaces using CSS class</title>
    <style>
        .tab-space {
            display: inline-block;
            margin-left: 32px;
        }
    </style>
</head>
<body>
    <h1>Illustration for demonstrating tab spaces using CSS class</h1>
    <p>There<span class="tab-space"></span>is<span class="tab-space"></span>a<span class="tab-space"></span>tab<span class="tab-space"></span>space<span class="tab-space"></span>between<span class="tab-space"></span>each<span class="tab-space"></span>word<span class="tab-space"></span>of<span class="tab-space"></span>this<span class="tab-space"></span>sentence.</p>
</body>
</html>

输出

在输出中，我们可以看到每个段落单词之间有一个制表符间距。

3. white-space CSS 属性

white-space 是我们可以用来在网页上显示制表符间距的 CSS 属性。此 CSS 属性将按照 HTML 代码中的书写方式显示制表符间距。

white-space CSS 属性的语法

**white-space** 是 CSS 属性，在提供的语法中，它的值被赋为 **pre-wrap**。

示例

我们将通过示例演示 **white-space** 属性以查看单词之间的制表符间距。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title> Illustration for demonstrating tab spaces using white-space CSS property</title>
    <style>
        .tab-space {
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <h1> Illustration for demonstrating tab spaces using white-space CSS property</h1>
    <p class="tab-space">This    sentence    has    a    gap    of    one    tab    space    between    the    words.</p>
</body>
</html>

输出

我们可以看到段落中每个单词之间有一个制表符间距。

4. HTML 实体 -  

  是 HTML 实体，我们可以用它来表示普通的空格或 1 个空格的间距，以在浏览器中使用   HTML 实体显示制表符间距。

语法

  是 non-breaking space（不换行空格）的缩写，它可以防止换行，并可以使用上述语法显示制表符间距。

示例

在这个例子中，我们将使用 4 个 &nbsp 来在浏览器中表示一个制表符间距。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example for demonstrating tab spaces using nbsp HTML property</title>
</head>
<body>
    <h1>Example for demonstrating tab spaces using non-breaking space (nbsp) HTML entity</h1>
    <p>We have used non-breaking space (nbsp) HTML entity&nbsp&nbsp&nbsp&nbsp&nbspfor displaying one tab space in this sentence.</p>
</body>
</html>

输出

在输出中的段落里，“entity”一词后面可以看到一个制表符间距。

5. HTML 实体 - &ensp;

&ensp; 是用于表示两个空格间距的 HTML 实体，以在浏览器中显示制表符间距，使用 &ensp; HTML 实体。

语法

&ensp; 是 en 宽度的空格，可以使用上述语法显示制表符间距。

示例

在这个例子中，我们将使用 2 个 &ensp 来在浏览器中表示两个制表符间距。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of displaying tab spaces using en space HTML entity</title>
</head>
<body>
    <h1>Example of displaying tab spaces using en space HTML entity</h1>
    <p>Using en space HTML entity for displaying&ensp;&ensp;one tab space in this paragraph.</p>
</body>
</html>

输出

6. HTML 实体 - &emsp;

&emsp; 是 HTML 实体，我们用它来表示 4 个空格的间距，所以我们可以使用 &emsp; HTML 实体在浏览器中显示制表符间距。

语法

&emsp; 是 em 宽度的空格，可以使用上述语法在网页上显示制表符间距。

示例

在这个例子中，我们将演示浏览器中的制表符间距。我们可以使用一个 &emsp; 来显示一个制表符间距，使用两个 &emsp; 来显示两个制表符间距。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example for demonstrating tab spaces using em space HTML property</title>
</head>
<body>
    <h1>Example for demonstrating tab spaces using em space HTML entity</h1>
    <p> Using em space HTML entity for displaying one tab?space??in this paragraph.</p>
</body>
</html>

输出

在输出的段落中，我们可以看到单词 "tab" 后面有一个制表符间距，单词 "space" 后面有两个制表符间距。

结论

我们在上面的文章中已经理解了 **HTML 中的制表符间距**。有很多方法可以在网页上显示制表符间距：

**<pre> HTML 标签:** 此标签按照 <pre> 标签内写入的方式显示制表符字符。
**CSS 类:** 在 .class CSS 选择器中定义 CSS 的 display 和 margin-left 属性来显示制表符间距。
**White-space:** CSS 属性被赋为 pre-wrap 值，允许用户指示制表符间距。
**不换行空格 HTML 实体:** 它表示普通空格，即一个空格。
**en HTML 实体:** 它代表两个空格。
**em HTML 实体:** 它表示四个空格。

下一个主题HTML 超链接

← 上一个下一个 →

HTML 中的制表符空格

示例

1. <pre> 标签

2. CSS 类

3. white-space CSS 属性

4. HTML 实体 -

5. HTML 实体 - &ensp;

6. HTML 实体 - &emsp;

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 中的制表符空格

示例

1. <pre> 标签

2. CSS 类

3. white-space CSS 属性

4. HTML 实体 - &nbsp;

5. HTML 实体 - &ensp;

6. HTML 实体 - &emsp;

结论

相关帖子

HTML 代表什么

HTML 是编程语言吗？

如何将 Google 翻译按钮添加到您的网页

HTML 居中对齐

将 HTML 转换为 PDF

HTML 转 JPG

HTML 文本框

HTML 字体颜色

HTML 占位符

HTML 图片链接

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器

4. HTML 实体 -