如何在HTML中复制一个\t制表符?

34

我该如何在HTML中使用常见的\t转义字符?这是可能的吗?

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

8个回答

26
你可以使用字符引用	输入制表符(U+0009字符制表符,通常称为TAB或HT)。它等同于制表符本身。因此,从HTML的观点来看,没有必要使用字符引用“转义”它;但是如果你的编辑程序不能方便地输入该字符,则可以这样做。
另一方面,在大多数情况下,制表符在HTML中与普通空格等效。它不会“制表”,只是一个单词空格。

然而,制表符在pre元素中具有特殊处理方式,并且(虽然规范中没有很好地描述)在textareaxmp元素中也是如此(在后者中,不能使用字符引用,只能使用制表符本身)。这在HTML规范中描述得有些误导性,例如在HTML 4.01中:“[在pre元素内部,]水平制表符字符(十进制9在[ISO10646]和[ISO88591]中)通常被视觉用户代理解释为最小的非零空格数,以便将字符沿制表位对齐,每8个字符一个制表位。我们强烈反对在预格式文本中使用水平制表符,因为通常情况下,在编辑时将制表间距设置为其他值,从而导致文档错位。”

警告是不必要的,除非涉及您的创作软件中的制表符与浏览器中的HTML呈现不匹配的潜在问题。避免使用水平制表符的真正原因是它与表格相比作为呈现表格材料的工具太过粗糙和简单。在显示计算机源程序时,最好只在
标签内使用空格,因为默认制表位于每8个字符处,不适合任何常规代码缩进样式。
此外,在CSS中,您可以指定white-space: pre(或者稍微支持更有限的浏览器,white-space: pre-wrap)来使普通HTML元素(如

)呈现为pre,从而保留所有空格并具有“制表”效果。

在CSS文本模块第3级(最终草案,即朝着成熟方向推进)中,还有tab-size属性,可用于设置制表位之间的距离,例如tab-size: 3。它得到了大多数最新版本浏览器的支持,但不包括IE(甚至不包括IE 11)。

21
如果你只想得到间距,那么      可以作为一种解决方案。

7
我需要一个与/t转义字符相同功能的代码。
您是指创建制表符空格的功能吗?
在HTML中没有这样的东西,您将不得不使用HTML元素来实现此功能。(对于表格数据,<table> 标签 可能很有意义,或者对于定义,使用描述列表 <dl> 标签

2
我想要的是像空格一样的制表符,所以只能通过使用表格来实现吗? - user2443085

7

HTML没有转义字符(因为它不使用保留字符的转义语义,而是使用SGML实体:&amp;&lt;&gt;&quot;)。

由于大多数字符集中都存在制表符字符(即ASCII和UTF-8中的0x09),因此SGML没有命名实体,使其变得完全不必要(只需在键盘上按下Tab键)。如果你正在处理生成HTML的代码(例如服务器端应用程序,例如ASP.NET、PHP或Perl),那么你可能需要对其进行转义,但这仅仅是因为服务器端语言要求这样做,而与HTML无关,如下所示:

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

然而,您可以使用SGML实体通过十六进制值来表示任何ISO-8859-1字符,例如,&#09;代表制表符。


<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>"; - SherylHohman
1
要将pre提供的不可折叠空格选项应用于其他标签(如<p><h2>),而不带上pre的其余设置,您可以在标签中添加样式'white-space:pre'。然后,制表符、空格和换行符将根据文本规则而不是HTML规则“工作”。这篇文章有两个进一步的答案:https://dev59.com/fmIj5IYBdhLWcg3wTDZn#20423268 和 https://dev59.com/fmIj5IYBdhLWcg3wTDZn#45266304。 - SherylHohman

6

你可以使用这个 &emsp; 或者 &ensp;

它在Visual Studio上工作。


1
这类似于将一堆&npsp;串在一起。它不会像制表符一样吸收空格,但比输入非断空格更方便。我没有尝试计算等效的空格数量,但当我尝试时,&emsp;产生了比&ensp;更宽的空格,而且两者都比4个&npsp;串在一起更宽。 - SherylHohman

5
这个简单的公式应该有效。 给包含制表符文本的元素添加以下CSS属性:white-space:pre。否则,您的HTML可能根本无法呈现制表符。然后,在您想要在文本中使用制表符的任何位置,键入&#9;。 如果您不提及CSS,如果想不使用CSS文件实现此操作,只需使用
<tag-name style="white-space:pre">text in element&#9;more text</tag-name>

在你的HTML中。

哇!这太棒了!简直不敢相信我以前从未遇到过这个。使用 whitespace:pre 样式,可以有更多的选项:您只需按空格键 6 次即可插入 6 个空格。同样,如果您使用 PHP 输出 HTML,则 \t 将对 &#9;(制表符)起作用,但仅当您的字符串位于双引号内时才会生效(因为在双引号中,PHP 将应用字符串替换来创建正确的代码)。同样,PHP 将在双引号中将 \r\n 替换为换行符,这也将在 pre 中得到支持。关于 white-space 的文档。 - SherylHohman
Jukka K. Korpela 还评论了如何在HTML中完成此操作,提供了更详细和更多的选项。 - SherylHohman

3

对于Mediawiki也存在同样的问题:它不提供选项卡,也不允许连续的空格。

虽然这并不是真正的TAB功能,但解决方法是添加一个名为“Tab”的模板,该模板将每个调用(即{{tab}})替换为4个不间断的空格符号:

 &nbsp;&nbsp;&nbsp;&nbsp; 

那些不会折叠的元素在使用时会创建4个空格的距离。
它并不是真正的制表符,因为它不会与固定的制表符位置对齐,但我仍然发现它有许多用途。
也许有人能够想出类似的机制来创建HTML中的Wiki模板(CSS类或其他)。

跟进你的猜测:在HTML中,你只需将这些字符输入为一个长单词,它就会以不间断、不折叠的空格形式打印到屏幕上。在PHP中,使用字符串替换来输出文本和HTML,你可以赋值 $tab = '&nbsp;&nbsp;&nbsp;&nbsp;'。然后,例如,使用 echo "<p>一些文本 $tab 更多文本</p>" 来编写HTML代码。 - SherylHohman
看起来已经有了官方机制。请参见Andrew Puglionesi的答案。在<pre>标签内,空格会被保留,但它也会使其他样式发生变化,这使得它不适用于大多数HTML输出。但是,在HTML标记内使用style="whitespace:pre",将遵守元素内文本的标准基于文本的空格规则,而不改变任何其他内容 - SherylHohman

2

在 HTML 代码中,您必须使用 <dd> </dd>

<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.

enter image description here


我觉得你的格式出了问题,我无法理解你想表达什么。 - Anna Ira Hurnaus
dldtdd 标签:https://www.w3schools.com/TAGS/tag_dl.asp。不幸的是,每个术语都会打印到新行。所以,`dt` 是用于术语的,然后 dd,定义,缩进,但在新行上。这将不会在同一行上的项目之间放置类似制表符的间距。这有点像没有项目符号的项目列表。(dl 包装了一组术语/定义集)。 - SherylHohman

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接