如何正确缩进 PHP/HTML 混合代码？ [关闭]答案

【问题标题】：How to properly indent PHP/HTML mixed code? [closed]如何正确缩进 PHP/HTML 混合代码？ [关闭]
【发布时间】：2010-11-12 10:49:43
【问题描述】：

混合使用 PHP 和 HTML 时，应该使用什么缩进样式？我是否缩进以使输出的 HTML 具有正确的缩进，或者使 PHP/HTML 组合看起来格式正确（因此更易于阅读）？

例如，假设我有一个 foreach 循环输出表行。下面哪个是正确的？

PHP/HTML 混合看起来正确：

<table>
  <?php foreach ($rows as $row): ?>
    <tr>
      <?php if ($row->foo()): ?>
        <?php echo $row ?>
      <?php else: ?>
        Something else
      <?php endif ?>
    </tr>
  <?php endforeach ?>
</table>

输出的 HTML 看起来正确：

<table>
<?php foreach ($rows as $row): ?>
  <tr>
  <?php if ($row->foo()): ?>
    <?php echo $row ?>
  <?php else: ?>
    Something else
  <?php endif ?>
  </tr>
<?php endforeach ?>
</table>

我发现当我遇到这种情况时（非常频繁），我没有标准的风格可以使用。我知道可能没有“正确”的答案，但我很想听听其他开发者的想法。

【问题讨论】：

标签： php html indentation

【解决方案1】：

PHP 和 HTML 都应该缩进，这样它们在源代码形式中是正确的，无论彼此和输出形式如何：

<table>
<?php foreach ($rows as $row): ?>
    <tr>
    <?php if ($row->foo()): ?>
        <?php echo $row ?>
    <?php else: ?>
        Something else
    <?php endif ?>
    </tr>
<?php endforeach ?>
</table>

【讨论】：

如果你想得到一个包含表格的字符串而不是回显它，你会怎么做？
@Dane411：如果您使用 heredoc 语法构建字符串，请将其缩进为 HTML。如果您是用小的内联字符串构建它，请忘记 HTML 缩进，因为 HTML 内容的视觉可理解性已经被洗掉了，用更尴尬的约定来描述这种情况不会有任何帮助。
是否有普遍接受的风格指南提倡这种方法？
php 和 html 混合时可以参考替代控制结构here

【解决方案2】：

我通常将 opening php 标签放在行首，但缩进标签内的任何内容以匹配 html 格式。但是，对于简单的 echo 语句，我不会这样做，因为我使用的是短开标签。我认为在浏览文件以查找所有声明时会更简单。

    <table>
<?  foreach ($foo as $bar): ?>
      <tr>
<?    foreach ($bar as $baz): ?>

         <td><?=$baz?></td>

<?    endforeach ?>
      </tr>
<?  endforeach ?>
    </table>

【讨论】：

+1：这就是我实际编写的方式（好吧，除了我使用大括号，而不是冒号/结尾形式，每个缩进级别有四个空格）；为了方便起见，我只是调整了 OP 的约定。
您不应该使用短的开始标签。连接到 php 设置 short_open_tag 的代码可能会遇到各种问题。
@markus：正如我的维基百科用户页面上所说，当你从我冰冷、死气沉沉的手中撬开它们时，你可以得到我的短标签。说真的，我认为我有能力处理 XML 版本标签的事情。
如果您希望遵循 PSR-2，您只能将短标签与 echo 速记语法结合使用（其他地方的长标签）。
我喜欢这种放置“”的约定在该行的开头是 PHP 更具可读性（在视觉上不会被“

【解决方案3】：

直接回答您的问题：如果您需要经常阅读 HTML 输出，最好输出缩进良好的 HTML。但更常见的情况是您需要阅读您的 php 源代码，因此更重要的是源代码易于阅读。
您提到的两个选项的替代方案：请参阅 chaos' 或 tj111's 答案。
在我看来更好：不要混合使用 HTML 和 php，而是使用模板引擎。

【讨论】：

感谢 cmets Treb。即使我使用了模板引擎，问题仍然存在：如何正确缩进 HTML/模板引擎标签。
PHP 是一个模板引擎。 :)
@chaos：我知道答案会来......也许是这样，但我在这里的示例代码中看到的不是模板引擎的正确使用，而是代码和设计。

【解决方案4】：

您也可以随时使用一些空格来提高可读性。建立在混乱的缩进上：

<table>

<?php foreach ($rows as $row): ?>

    <tr>

    <?php if ($row->foo()): ?>
        <?php echo $row ?>
    <?php else: ?>

        Something else

    <?php endif ?>

    </tr>

    <?php endforeach ?>

</table

唯一的缺点是，如果您有很多混合代码，它会使您的文档长度增加一倍，从而增加滚动次数。虽然如果您有这么多混合代码，您可能需要考虑使用模板引擎。

【讨论】：

您只是添加了一些换行符......这并没有真正增加恕我直言的清晰度。获得一个像样的 IDE，它应该会为你很好地着色。
这确实是一个完全主观的问题，所以当然对某些人来说可能是助手的东西不会对其他人有用。 :)

【解决方案5】：

我也经常思考这个问题，但后来我意识到，谁在乎 HTML 输出的样子？无论如何，您的用户不应该查看您的 HTML。 YOU 可以阅读，也许还有其他开发人员。保持源代码尽可能干净，忘记输出的样子。

如果您需要调试输出，请使用 Chrome 开发者工具、Firebug 甚至 F12 工具。

【讨论】：

【解决方案6】：

您不应该为生产环境中的标记缩进而烦恼。你也不应该使用 Tidy 或其他 HTML 净化器。有有效的用例，例如当您允许 HTML 输入时（但请考虑改用 Markdown），尽管这种情况很少见。

大多数情况下，HTML 美化过滤器被滥用来隐藏代码的潜在问题。别。手动更正您的标记。

如果您只需要在开发环境中缩进您的代码，您可以使用上述任何一种。但是，请注意这些库会尝试修复您的标记（这是它们的主要目的；缩进是副产品）。我写了基于正则表达式的缩进工具Dindent。

Dindent 会像这样转换标记：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <script>
    console.log('te> <st');
    function () {
        test; <!-- <a> -->
    }
    </script>
    <div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <div><table border="1" style="background-color: red;"><tr><td>A cell    test!</td>
<td colspan="2" rowspan="2"><table border="1" style="background-color: green;"><tr> <td>Cell</td><td colspan="2" rowspan="2"></td></tr><tr>
        <td><input><input><input></td></tr><tr><td>Cell</td><td>Cell</td><td>Ce
            ll</td></tr></table></td></tr><tr><td>Test <span>Ce       ll</span></td></tr><tr><td>Cell</td><td>Cell</td><td>Cell</td></tr></table></div></div>
</body>
</html>

到这里：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script>
    console.log('te> <st');
    function () {
        test; <!-- <a> -->
    }
    </script>
        <div>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <div>
                <table border="1" style="background-color: red;">
                    <tr>
                        <td>A cell test!</td>
                        <td colspan="2" rowspan="2">
                            <table border="1" style="background-color: green;">
                                <tr>
                                    <td>Cell</td>
                                    <td colspan="2" rowspan="2"></td>
                                </tr>
                                <tr>
                                    <td>
                                        <input>
                                        <input>
                                        <input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                    <td>Ce ll</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>Test <span>Ce ll</span></td>
                    </tr>
                    <tr>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>

除了添加缩进之外，Dindent 不会尝试清理或以其他方式干扰您的代码。这是为了使您的开发/调试更容易。不适用于生产。

【讨论】：