HTML 制表符字符

17 Mar 2025 | 4 分钟阅读

HTML 默认支持文档中的一个空格，但有时我们可能需要添加多个空格。如果我们在 HTML 文档中添加多个空格，则网页上只会显示一个空格字符。同样，如果添加一个制表符空格，则网页上会显示一个制表符空格并折叠其他空格。本文将介绍如何创建 HTML 制表符。

制表符

制表符是一种排版空格，相当于四个空格，但如果我们在 HTML 文档中添加四个空格，则只会显示一个空格并折叠其他空格。

我们可以通过多种方式创建制表符，如下所示

利用 HTML 实体
利用 <pre> 标签
利用 CSS 属性

让我们逐一详细了解它们。

利用 HTML 实体

有三个 HTML 实体有助于创建不折叠的空格。它们如下所示

 

它表示不间断空格。此字符等同于常规空格，即一个空格。

&ensp;

它表示不可断开空格。此字符等同于两个空格。

&emsp;

它表示不可断开空格，等同于四个空格。

利用 HTML 实体创建制表符空格的演示

  创建一个空格，因此我们将使用四个   字符来创建一个制表符空格。
&ensp; 创建两个空格，因此我们将使用两个 &ensp; 字符来创建一个制表符空格。
&emsp; 创建四个空格，因此我们将使用一个 &emsp; 字符来创建一个制表符空格。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Utilizing HTML entities to create tab space</title>
    <style>

    </style>
</head>
<body>
    <h2>Utilizing HTML entities for creating tab space</h2>
    <div>
        <h3>non-breaking space:</h3>
        <p>We have used four����non-breaking space (�) to create one tab space.</p>
    </div>
    <div>
        <h3>en-space:</h3>
        <p>We have used??two non-breaking space (&ensp) to create one tab space.</p>
    </div>
    <div>
        <h3>em-space:</h3>
        <p>We have used?one non-breaking space (&emsp) to create one tab space.</p>
    </div>
</body>
</html>

输出

这是我们可以看到利用 HTML 实体创建制表符空格的输出。

利用 <pre> 标签

<pre> 标签用于在 HTML 中添加制表符空格。它显示预格式化的文本，并按 HTML 文档中的写法显示空格。

利用 <pre> 标签创建制表符空格的演示

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Utilizing &lt;pre&gt; to create a tab space</title>
</head>
<body>
    <h2>Utilizing &lt;pre&gt; for making a tab space</h2>
    <div>
        <pre>This line has    one tab space.<br>This line has       two tab spaces.<br>This line has           three tab spaces.
        </pre>
    </div>
</body>
</html>

输出

这是我们可以看到借助 HTML <pre> 标签创建的制表符空格的输出。

利用 CSS 属性

我们可以使用 display、margin-left 和 text-indent CSS 属性在 HTML 文件中创建制表符空格。

display CSS 属性的语法

margin-left CSS 属性的语法

text-indent CSS 属性的语法

white-space CSS 属性的语法

利用 CSS 属性创建制表符空格的演示

演示 1

在此演示中，我们将利用 display CSS 属性和 margin-left CSS 属性创建一个制表符空格。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Utilizing display and margin-left CSS properties to create a tab space</title>
    <style>
        .tab-space {
            display: inline-block;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <h2>Utilizing display and margin-left CSS properties for creating a tab space</h2>    
    <div>
        <p>
            This line has a<span class="tab-space"></span>tab space.
        </p>
    </div>
</body>
</html>

输出

这是我们可以看到利用 display 和 margin-left CSS 属性创建制表符空格的输出。

演示 2

在此演示中，我们将利用 text-indent CSS 属性创建一个制表符空格。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Utilizing text-indent CSS property to create a tab space</title>
    <style>
        p {
            text-indent: 20px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <h2>Utilizing text-indent CSS property to create a tab space</h2>    
    <div>
        <p>
            This line has a tab space.
        </p>
    </div>
</body>
</html>

输出

这是我们可以看到利用 text-indent CSS 属性创建制表符空格的输出。

演示 3

在此演示中，我们将利用 white-space CSS 属性并将其值设置为 pre 来创建一个制表符空格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Utilizing white-space CSS property to create a tab space</title>
    <style>
        p {
            white-space: pre;
            border: 1px solid yellowgreen;
        }
    </style>
</head>
<body>
    <h2>Utilizing white-space CSS property to create a tab space</h2>    
    <div>
        <p>    This line has a tab space at the start.
        </p>
    </div>
</body>
</html>

输出

这是我们可以看到利用 white-space CSS 属性创建制表符空格的输出。

结论

在本文中，我们了解了 HTML 制表符。我们了解到可以通过多种方法创建制表符空格，例如利用 HTML 实体、<pre> 标签和 CSS 属性。

下一主题HTML Tab 标签

HTML 制表符字符

制表符

利用 HTML 实体

利用 HTML 实体创建制表符空格的演示

利用 <pre> 标签

利用 <pre> 标签创建制表符空格的演示

利用 CSS 属性

利用 CSS 属性创建制表符空格的演示

结论

联系信息

关注我们

教程

面试题

在线编译器

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 制表符字符

制表符

利用 HTML 实体

利用 HTML 实体创建制表符空格的演示

利用 <pre> 标签

利用 <pre> 标签创建制表符空格的演示

利用 CSS 属性

利用 CSS 属性创建制表符空格的演示

结论

相关帖子

HTML 是编程语言吗？

HTML 调查

如何在 HTML 中隐藏滚动条

HTML 标签由哪种括号包围

如何使用 HTML 分隔行

如何制作 HTML 按钮

HTML5 可用的 API

HTML 与 HTML5

HTML Value

带有分页、搜索和排序的 HTML 表格

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器