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

发布于 2024-07-27 13:50:53 字数 1432 浏览 4 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

一指流沙 2024-08-03 13:50:54

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>

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:

<table>
<?php foreach ($rows as $row): ?>
    <tr>
    <?php if ($row->foo()): ?>
        <?php echo $row ?>
    <?php else: ?>
        Something else
    <?php endif ?>
    </tr>
<?php endforeach ?>
</table>
扛刀软妹 2024-08-03 13:50:54

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

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

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.

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

夏末的微笑 2024-08-03 13:50:54

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

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

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

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

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.

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

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

<?    endforeach ?>
      </tr>
<?  endforeach ?>
    </table>
遇见了你 2024-08-03 13:50:54
  1. 直接回答你的问题:如果你需要经常读取 HTML 输出,那么输出良好缩进的 HTML 可能是一件好事。 但更常见的情况是您需要阅读 php 源代码,因此源代码易于阅读更为重要。
  2. 您提到的两个选项的替代方案:请参阅 chaos'< /a> 或 tj111 的答案。
  3. 我认为更好的是:不要混合 HTML 和 php,而是使用模板引擎。
  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. Alternative to the two options you mentioned: See chaos' or tj111's answer.
  3. Better still in my opinion: Don't mix HTML and php, use a template engine instead.
狼亦尘 2024-08-03 13:50:54

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

<table>

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

    <tr>

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

        Something else

    <?php endif ?>

    </tr>

    <?php endforeach ?>

</table

唯一的缺点是,如果您有很多混合代码,它可能会使您的文档长度增加两倍,从而需要更多的滚动。 不过,如果您有这么多混合代码,您可能需要考虑模板引擎。

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.

丶视觉 2024-08-03 13:50:54

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

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.

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

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 will convert markup like 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>

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文