67

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

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

4

6 回答 6

53

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>
于 2009-07-20T20:33:38.257 回答
16

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

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

于 2009-07-21T05:31:56.133 回答
11

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

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

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

<?    endforeach ?>
      </tr>
<?  endforeach ?>
    </table>
于 2009-07-20T20:38:11.773 回答
4
  1. 直接回答您的问题：如果您需要经常阅读 HTML 输出，那么输出良好缩进的 HTML 可能是一件好事。但更常见的情况是您需要阅读您的 php 源代码，因此更重要的是源代码易于阅读。
  2. 替代您提到的两个选项：请参阅混乱 或tj111 的答案。
  3. 我认为更好的是：不要混合使用 HTML 和 php，而是使用模板引擎。
于 2009-07-20T20:40:14.860 回答
2

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

<table>

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

    <tr>

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

        Something else

    <?php endif ?>

    </tr>

    <?php endforeach ?>

</table

唯一的缺点是如果你有很多混合代码，它可以使你的文档的长度增加一倍，这使得滚动更多。尽管如果您有这么多混合代码，您可能需要考虑使用模板引擎。

于 2009-07-20T20:41:52.657 回答
2

您不应该为生产环境中的标记缩进而烦恼。你也不应该使用 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 不会尝试清理或以其他方式干扰您的代码。这是为了使您的开发/调试更容易。不用于生产。

于 2014-02-19T22:23:41.570 回答