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

When mixing PHP and HTML, what is the proper indentation style to use? Do I indent so that the outputted HTML has correct indentation, or so that the PHP/HTML mix looks properly formatted (and is thus easier to read)?

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

For example, say I have a foreach loop outputting table rows. Which one below is correct?

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

PHP/HTML mix looks correct:

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>

Outputted HTML looks correct:

输出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>

I've found that when I run into this situation (quite frequently), I don't have a standard style to use. I know that there may not be a "correct" answer, but I'd love to hear thoughts from other developers.

我发现当我经常遇到这种情况时，我没有一个标准的样式可以使用。我知道可能没有“正确”的答案，但我很想听听其他开发人员的想法。

6 个解决方案

#1

The PHP and the HTML should each be indented so that they are correct with respect to themselves in source form, irrespective of each other and of outputted form:

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>

#2

I often pondered this question too, but then I realized, who cares what the HTML output looks like? Your users shouldn't be looking at your HTML anyway. It's for YOU to read, and maybe a couple other developers. Keep the source code as clean as possible and forget about what the output looks like.

我也经常思考这个问题，但后来我意识到，谁在乎HTML输出是什么样子?你的用户不应该看你的HTML。这是供您阅读的，也许还有其他几个开发人员。尽可能保持源代码的整洁，忘记输出是什么样子的。

If you need to debug the output, use Chrome Developer Tools, Firebug, or even F12 Tools.

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

#3

I generally put opening php tags at the beginning of the line, but indent whatever is inside the tags to match the html formatting. I don't do this, however, for simple echo statements since I use short-open tags. I think it makes simpler it when browsing through the file to find all the declarations.

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

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

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

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

#4

1. Direct answer to your question: If you need to read the HTML output often, it might be a good thing to output well indented HTML. But the more common case will be that you need to read your php source code, so it is more important that the source is easily readable.
2. 直接回答您的问题:如果您需要经常阅读HTML输出，输出缩进良好的HTML可能是一件好事。但是更常见的情况是您需要读取php源代码，因此更重要的是源代码要易于阅读。
3. Alternative to the two options you mentioned: See chaos' or tj111's answer.
4. 除了你提到的两个选项之外:查看chaos’或tj111的答案。
5. Better still in my opinion: Don't mix HTML and php, use a template engine instead.
6. 在我看来，更好的方法是:不要混合使用HTML和php，而是使用模板引擎。

#5

You can always use a bit of whitespace too to help readability. Building on chaos' indentation:

您也可以使用一些空白来帮助可读性。基于混沌的缩进:

<table>

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

    <tr>

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

        Something else

    <?php endif ?>

    </tr>

    <?php endforeach ?>

</table

The only downside with this is if you have a lot of mixed code it can make your document twice as long, which makes for more scrolling. Although if you have this much mixed code you may want to consider a templating engine.

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

#6

You should not be bothered about markup indentation in the production environment. Neither should you use Tidy or other HTML purifiers. There are valid use cases, e.g. when you allow HTML input (but consider using Markdown instead), though these are rare.

您不应该为生产环境中的标记缩进而烦恼。也不应该使用Tidy或其他HTML净化器。有一些有效的用例，例如，当您允许HTML输入时(但是考虑使用Markdown代替)，尽管这些用例很少。

Most often HTML beautifiers-filters are abused to hide the underlying issues with the code. Don't. Correct your markup manually.

大多数时候，HTML美化过滤器被滥用来隐藏代码的底层问题。不喜欢。纠正你手动标记。

If you need to indent your code only in the development environment, you can use either of the above. However, beware that these libraries will attempt to fix your markup (that's their primary purpose; indentation is a by-product). I've written Regular Expression based indentation tool Dindent.

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

Dindent will convert markup like this:

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>

To this:

:

<!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 will not attempt to sanitise or otherwise interfere with your code beyond adding indentation. This is to make your development/debugging easier. Not for production.

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