mVc 世界中的 HTML 缩进 [重复]

Posted 2023-02-24

技术标签:

【中文标题】mVc 世界中的 HTML 缩进 [重复]【英文标题】：HTML Indentation in the mVc World [duplicate] 【发布时间】：2011-01-19 03:07:29 【问题描述】：

这是一个困扰我一段时间的问题，现在缩进 html 代码被认为是一种很好的做法，但我对 MVC 模式中的代码缩进有一些保留，这是一个 (傻）例子：

HTML 代码：

<!DOCTYPE html>
<html>
<head>
<title>Testing MVC Indentation</title>
</head>

<body>

<?php View('h1', 'I am a Level 1 Header'); ?>

    <table>
        <tr>
            <td>
                <?php View('h1', 'I am a Level 1 Header Inside a Table'); ?>
            </td>
        </tr>
    </table>

</body>
</html>

为了正确缩进，第一次调用h1 视图（或部分）应该返回：

\t<h1>I am a Level 1 Header</h1>

虽然对h1 视图的第二次调用应该返回：

\t\t\t\t<h1>I am a Level 1 Header Inside a Table</h1>

然而，h1 视图不知道它所在的缩进范围，那么它怎么能返回正确缩进的数据呢？此外，忽略缩进视图可能会泄露部分应用程序逻辑（请查看<div id="content"> 之后的此页面的 HTML 源代码以获取真实示例):

<body>

<h1>I am a Level 1 Header</h1>

    <table>
        <tr>
            <td>
<h1>I am a Level 1 Header Inside a Table</h1>
            </td>
        </tr>
    </table>

</body>

根本不缩进解决了所有问题，但它也使它更难阅读和维护：

<body>

<h1>I am a Level 1 Header</h1>

<table>
<tr>
<td>
<h1>I am a Level 1 Header Inside a Table</h1>
</td>
</tr>
</table>

</body>

我认为解决此问题的唯一可行解决方案是使用 Tidy 和 output buffering，但我想知道这是否值得努力，因为它会使处理和加载不必要（ ?) 慢。此外，这不会使 HTML 代码的维护变得更容易，因为它只缩进输出，而不是源代码。

对于“基本”问题，我很抱歉，但过去几年我一直专注于业务逻辑，并且与演示世界有点脱节 - 在过去的美好时光中，我的 HTML 代码都是未缩进的，但话说回来，我也使用表格来设计布局 - 现在只是想赶上。

关于这个主题的任何解决方案/见解？

相关问题：

Do you indent your HTML code? Do you generate nicely formatted HTML? How to properly indent PHP/HTML mixed code?

【问题讨论】：

@GajusKuizinas：您链接到的问题似乎与源有关，而不是与生成的（仅 HTML）输出有关。不是，它是指使用 PHP 脚本生成的 HTML。糟糕的标题，不过。 【参考方案1】：

我想说，HTML 和 Source Code 缩进是有区别的。在典型的 MVC 视图中，您使用我认为应该以可读方式缩进的源代码。

虽然实际的 HTML 输出是另一回事。当然，混乱缩进的源代码看起来有点不专业（这就是为什么我有时倾向于只删除任何缩进，但这通常涉及你所说的一些 HTML 后处理），但对于浏览器本身来说，如果根本不重要，如果我真的需要查看源代码，我将使用格式化程序或 Firebug，它以格式良好的方式显示所有 DOM 元素。

【讨论】：

+1：浏览器不在乎。 “披露部分应用程序逻辑”没有意义。什么 - 具体来说 - 被披露？有些部分没有缩进的事实？这怎么有趣？ @Daff：我很困惑。您认为 HTML 代码不应该缩进吗？如果是这样，则不需要任何 HTML 后处理（您只需首先避免使用缩进）。另外，如果您可以查看我在问题中添加的相关问题。我的意思是删除可能由带有某种 HTML 后处理器的格式化视图源代码引起的缩进。我同意***.com/questions/304055/…问题的公认答案 @S.Lott：我知道浏览器不在乎，但是在编码 HTML 时缩进会有所帮助。我从“公开部分应用程序逻辑”的意思是，如果您缩进 static HTML 代码，那么视图中的所有代码（dynamic HTML）都会很漂亮容易注意到。这不是安全漏洞或类似的东西，它只是披露您使用视图的位置。 IMO 类似于使用与数据库列同名的表单输入。源代码缩进是在你实际编写的代码中使用缩进。 HTML 缩进在浏览器接收的输出中使用缩进。这些并不总是相同，因为您可以让源代码缩进以遵循源代码的流程，但实际输出代码可能根本不遵循这一点（如您最初的问题所述）。【参考方案2】：

如前所述，源代码缩进和输出缩进是有区别的。源代码的缩进可以与输出的缩进不同，因为输出是动态构造的。在编写模板时，源代码的可读性是最重要的。你应该首先关注它！通常输出的 HTML 缩进不是问题。

话虽如此，有两种实用的方法可以消除输出中的缩进不匹配：

使用可以正确缩进输出的模板语言

第一个例子是Haml，一种用于 Ruby 的模板语言。它需要一个这样的模板：

%body
  %h1 I am a Level 1 Header
  %table
    %tr
      %td
        %h1 I am a Level 1 Header Inside a Table

输出将是与您的示例类似的格式整齐的 HTML，所有缩进都正确。

这种方法的一个明显缺点是，您并没有真正在模板中编写 HTML，而是使用具有类似 HTML 语义的不同语言编写。这可能是个问题，具体取决于谁来维护视图。

从输出中去除所有多余的空格，根本不缩进

一些模板语言可以选择删除所有多余的空格。例如，Smarty for PHP 有一个 whitespace trimming plugin 可以很好地完成这项工作。它通过故意使所有输出同样不缩进来完全解决输出美化问题。它还节省了非常少的带宽。

仅 PHP 的解决方案是使用 ob_start() 及其 $output_callback 处理程序（即 documented here）。您可以编写一个简单的回调来去除过多的空格，类似于 Smarty 插件。与在输出回调中使用 Tidy 不同，这仍然允许您在页面结束之前刷新缓冲区以加速长/慢页面。

【讨论】：

很抱歉，我没有得到源代码缩进与输出缩进点，想举个例子吗？至于 Haml，我以前听说过它，但我想坚持使用纯 HTML（以及 CSS），此外它可能会导致与 Tidy 输出处理程序相同的开销。 @Alix，我不确定您为什么认为 Haml 会产生类似于使用 Tidy 的开销。 Haml 不会解析 HTML，它只会解析模板。对于纯 HTML 解决方案，最好的办法是完全删除空格（第二个选项）。 @molf：如果我理解正确，您是在建议我缩进我的 HTML 源代码，但使用 Smarty（或类似的）从 Web 服务器输出中去除所有空格？ @Alix，完全正确；您也可以使用纯 PHP（没有 Smarty）来完成，请参阅更新的答案。正确。专注于让你的源代码正确缩进，然后如果你关心输出的 HTML，那么要么删除所有缩进，要么运行它以按照你想要的方式输出它。根据你目前所说的，接受（小）打击并通过 Tidy 运行它。【参考方案3】：

我认为可以在这里发明一些东西来跟踪缩进。

我相信，同时正确缩进 PHP 和正确缩进 HTML 是可能的，但是需要编写代码来处理这个问题，无论是作为 PHP 扩展还是作为库（这不太优雅和高效)。

我的第一个猜测是 PHP 会跟踪 HTML 的缩进，当打印一个新行时，恢复到上一个缩进级别，这是大多数 IDE 在您键入 enter 时所做的事情。 PHP 程序员可以通过这些函数来控制它（我现在只是在制作这些东西）：

tab($n) : 将缩进级别 $n 个标签向右移动（添加 $n 个标签） detab($n) : 从缩进级别删除 $n 制表符 stop() : 停止缩进。不会将选项卡添加到输出中。这对于 HTML PRE 标记很有用。 resume() : 在 stop() 之后恢复上一级的缩进。

【讨论】：

【参考方案4】：

我有时会在双引号字符串中使用 \t 来实现 HTML 的一些基本缩进。它可以帮助我调试东西。此外，我尽可能将 HTML 保留在模板中，即使这意味着我的模板中充满了 foreach 循环。在模板（MVC 中称为“视图”）中，PHP 代码缩进通常跟随在 HTML 代码之后。

我还可以为生成 HTML 的函数添加一个参数，以使它们“具有缩进意识”示例：

buildSomeHtmlList($data, $indent=0)

这导致大部分缩进HTML，这很适合我。

顺便说一句，在您的示例中，这不是应该发生的事情，AFAIk，表内的 H1 通常应该正确缩进，因为 PHP 输出从“

【讨论】：

【参考方案5】：

很抱歉添加第三个答案！已经有一段时间了，我宁愿添加一个答案，请不要为此投反对票。我只是觉得应该在这里说：

这似乎可行，也就是有 2 个不同的缩进“线程”，一个用于 PHP，一个用于 HTML：

<table>
<?foreach($list->sections as $sKey => $section)  ?>
    <tr><td><h4><?= $section->label ?></h4></td></tr>
<?  foreach($section->items as $iKey =>  $item)  ?>
    <tr><td><?= $item->label ?></td></tr>
<?   ?>
<? ?>
</table>

通过始终让 php 标记从行首开始，并在 php 块代码内缩进，生成的代码保持干净：

<table>
    <tr><td><h4>Books 1</h4></td></tr>
    <tr><td>Some Book</td></tr>
    <tr><td>Some Other Book</td></tr>
    <tr><td><h4>Books 2</h4></td></tr>
    <tr><td>Some Book in List 2</td></tr>
</table>

PHP 和 HTML 的缩进逻辑保存在源文件中，尽管它们各自独立。

【讨论】：

有趣。我不喜欢在 php-templates 中使用大括号。我通常使用foreach(): .... endforeach;

以上是关于mVc 世界中的 HTML 缩进 [重复]的主要内容，如果未能解决你的问题，请参考以下文章

PHP中的JSON缩进[重复]

我不理解 Python 中的这种缩进 [重复]

如何纠正android studio中的缩进[重复]

以下代码中的未知缩进错误[重复]

Android Studio中的缩进代码快捷方式[重复]

支持 <textarea> 中的缩进标签 [重复]