如何在 HTML 中复制 \t 制表符空间？

Posted 2023-05-07

【中文标题】如何在 HTML 中复制 \\t 制表符空间？

【英文标题】：How do I replicate a \t tab space in HTML?如何在 HTML 中复制 \t 制表符空间？

【发布时间】：2013-12-23 05:59:38

【问题描述】：

如何在 html 中使用常见的 \t 转义字符？ 有可能吗？

我需要一个与 /t 转义字符功能相同的代码

【参考方案1】：

您可以使用字符参考	 输入制表符（U+0009 CHARACTER TABULATION，通常称为TAB 或HT）。它相当于制表符本身。因此，从 HTML 的角度来看，没有必要使用字符引用来“转义”它；但你可以这样做，例如如果您的编辑程序不方便您输入字符。

另一方面，制表符在大多数情况下相当于 HTML 中的普通空格。它没有“制表”，它只是一个单词空间。

但是，制表符在pre 元素和textarea 和xmp 元素中（虽然规范中没有很好地描述）有特殊处理（在后者中，不能使用字符引用，只有制表符等）。这在 HTML 规范中有些误导性的描述，例如in HTML 4.01：“[在 pre 元素内，] 水平制表符（[ISO10646] 和 [ISO88591] 中的十进制 9）通常被视觉用户代理解释为行字符所需的最小非零空格数沿着每 8 个字符的制表位向上。我们强烈反对在预格式化文本中使用水平制表符，因为在编辑时将制表符间距设置为其他值是常见的做法，这会导致文档不对齐。”

这些警告是不必要的，除非您的创作软件中的选项卡和浏览器中的 HTML 呈现可能不匹配。避免使用水平制表符的真正原因是，与用于呈现表格材料的表格相比，它是一种粗糙且简单的工具。并且在显示计算机源程序时，最好在pre 中只使用空格，因为默认的制表符在每 8 个字符处停止，非常不适合任何正常的代码缩进样式。

此外，在 CSS 中，您可以指定 white-space: pre（或者，在浏览器支持稍有限制的情况下，white-space: pre-wrap）来制作普通的 HTML 元素，如 div 或 p，呈现为 pre , 以便保留所有空格，并且水平制表符具有“制表符”效果。

在 CSS Text Module Level 3（Last Call 工作草案，即走向成熟）中，还有tab-size 属性，可用于设置制表位之间的距离，例如tab-size: 3。大多数浏览器的最新版本是supported，但不是 IE（甚至不是 IE 11）。

【参考方案2】：

     如果您只关注间距，那将是一种解决方法。

【参考方案3】：

HTML 没有转义字符（因为它不对保留字符使用转义语义，而是使用 SGML 实体：&、<、> 和 "）。

SGML 没有制表符的命名实体，因为它存在于大多数字符集中（即 ASCII 和 UTF-8 中的 0x09），使其完全没有必要（即只需按 Tab kbd> 键盘上的键）。如果您正在使用生成 HTML 的代码（例如服务器端应用程序，例如 ASP.NET、php 或 Perl，那么您可能需要转义它，但这只是因为服务器端语言需要它 - 它什么都没有与 HTML 相关，如下所示：

echo "<pre>\t\tTABS!\t\t</pre>";

但是，您可以使用 SGML 实体以十六进制值表示任何 ISO-8859-1 字符，例如	 用于制表符。

【讨论】：

<pre> 对于某些类型的输出（例如表格数据）完美。然而，简单地将制表符包裹在<pre> 标记中以在网页上出现的其他类型的文本中产生类似制表符的空格（由于 html 的设计）是没有用的。 pre 标记中断文本流，并应用其他样式更改，例如字体和缩进。例如，看看这两行的区别：echo "<p> Wrapping <pre>\ttabs in pre\t</pre> interrupts the flow of text. </p>"; 和echo "<p style='white-space:pre'> Setting tag style to \t style='white-space:pre'\t does not. </p>";。

仅应用pre 提供的不可折叠间距选项，而不将pre 的其余设置应用于其他标签，例如<p> 或<h2>，您可以将样式 'white-space:pre' 添加到您的标签中。然后制表符、空格和换行符将根据文本规则而不是 html 规则在该标记内“工作”。这篇文章的两个答案进一步扩展：***.com/a/20423268/5411817 和 ***.com/a/45266304/5411817。

【参考方案4】：

我需要一个与 /t 转义字符功能相同的代码

你的意思是什么功能，创建一个制表符空间？

在 HTML 中没有这样的东西，你必须使用 HTML 元素。 （<table> 可能适用于表格数据，description list <dl> 可能适用于定义。）

【讨论】：

没错，我想要 Tab 一样的空间 所以只能通过使用 table 来实现？

【参考方案5】：

这个简单的公式应该有效。 为其文本将包含选项卡的元素提供以下 CSS 属性： white-space:pre。 否则，您的 html 可能根本不会呈现选项卡。然后，无论您想在文本中的哪个选项卡中输入	。

由于您没有提到 CSS，如果您想在没有 CSS 文件的情况下执行此操作，只需使用

<tag-name style="white-space:pre">text in element&#9;more text</tag-name>

在您的 HTML 中。

【讨论】：

哇！这很棒！不敢相信我以前从未遇到过这个。使用whitespace:pre 样式，允许附加选项：您可以简单地按空格键 6 次，插入 6 个空格。同样，如果您使用 PHP 输出 HTML，\t 也适用于 	（制表符），如果您的字符串在双引号内（因为在双引号中 PHP 将对 \t 应用字符串替换以创建正确的代码。）同样，PHP 会将双引号中的 \r\n 替换为换行符，这也将在 pre 中得到体现。 white-space 上的文档。

Jukka K. Korpela 还介绍了如何在 HTML 中实现这一点，并提供更多细节和选项。

【参考方案6】：

你可以用这个   或  

它适用于 Visual Studio

【讨论】：

这类似于将一堆&npsp; 串在一起。它不会像制表符那样吸收空格，但比一起输入不间断空格更方便。我没有尝试计算相同数量的空格，但是  导致的空间比  大得多，当我尝试时，两者都超过 4 个&npsp; 串在一起。

【参考方案7】：

Mediawiki 也存在同样的问题：它不提供选项卡，也不允许连续的空格。

虽然不是真正的 TAB 函数，但解决方法是添加一个名为“Tab”的模板，它将每个调用（即tab）替换为 4 个不间断的空格符号：

      

那些没有折叠，并在任何使用的地方创建一个 4 空间距离。 它不是一个真正的标签，因为它不会与固定的标签位置对齐，但我仍然发现它有很多用途。

也许有人可以为 HTML 中的 Wiki 模板（CSS 类或其他）想出类似的机制。

【讨论】：

继续您的猜想：在 html 中，您只需像输入长单词一样输入这些字符，它就会在屏幕上打印为不间断、非折叠的空格。在php中，使用字符串替换来输出文本和html，可以指定$tab = '    ';，那么比如echo "<p>some text $tab some more text</p>";写html代码。

貌似已经有官方机制了。请参阅Andrew Puglionesi's Answer 这个问题。在<pre> 中，空格是被尊重的，但它也会进行其他样式更改，使其不适合大多数 HTML 输出。但是，在 html 标记内使用 style="whitespace:pre"，将遵循标准的基于文本的空白规则到元素内的文本，不更改任何其他内容。

【参考方案8】：

你必须使用

<dd> </dd> 在 html 代码中。

<dd>A free, open source, cross-platform,graphical web browser developed by theMozilla Corporation and hundreds of volunteers.</dd>

----------------------------------
Firefox
    A free, open source, cross-platform, graphical web browser developed by the Mozilla 
    Corporation and hundreds of volunteers.

【讨论】：

我认为您的格式有问题。我不知道你想说什么。

dl, dt, dd 标签：w3schools.com/TAGS/tag_dl.asp 不幸的是，每个术语都会打印到新行。所以，dt 是术语，然后dd，定义，缩进，但在一个新的行上。这不会在同一行的项目之间放置类似制表符的间距。它有点像没有项目符号的项目符号列表。 （dl 包含一个术语/定义集列表）。