Question

混合使用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>

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

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

Answer 2

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

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

Answer 3

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

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

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

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

Answer 4

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

Answer 5

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

<table>

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

    <tr>

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

        Something else

    <?php endif ?>

    </tr>

    <?php endforeach ?>

</table

唯一的缺点是如果你有很多混合代码，它可以使你的文档长两倍，这样可以实现更多滚动。虽然如果你有这么多混合代码，你可能想要考虑一个模板引擎。

Answer 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不会尝试消毒或以其他方式干扰您的代码。这是为了使您的开发/调试更容易。不适合生产。

如何正确缩进PHP / HTML混合代码？

6 个答案: