你如何缩进你的HTML？ [复制]答案

【问题标题】：How do you indent your HTML? [duplicate]你如何缩进你的HTML？ [复制]
【发布时间】：2012-03-18 13:30:23
【问题描述】：

鉴于我的应用程序生成的 HTML。

function pagination(){
  echo "<ul>\n";

  for($i = 1; $i <= 10; $i++)
    echo "\t<li>...</li>\n";

  echo "</ul>\n";
}
?>
<div>
  <?php pagination(); ?>
</div>

如果我添加另一个容器 DIV，这不会产生正确缩进的代码。

该函数是否有任何解决方案可以以某种方式知道要添加多少 \t 或空格，或者以某种方式自动缩进 html？

【问题讨论】：

如果这是为您的实际页面输出的，您不应该缩进它。这只是用户必须下载的更多字符。当您检查元素时，Firebug 和其他结构调试工具会自动为您执行此操作。
如果您将部分作为加载视图（如 mvc 模式），这不会太糟糕，因为视图 html 很可能在第一次缩进上。它也更喜欢使用PHP_EOL 而不是\n 或\r\n 然后新行与所有系统兼容。
@Lawrence 你的 MVC 父亲与这个问题完全无关

标签： php html indentation

【解决方案1】：

答案可能听起来很奇怪，但您不必担心生成代码的缩进。缩进是为了可读性，并且应该只关注程序员方面，而不是生成部分（用于浏览器）。

【讨论】：

我普遍同意的地方。我确实经常发现有一些漂亮的资源很好。对于窥探者来说。仍然 +1，因为这是最明智的回应。
确实如此。一般的 PHP 用户不知道他们的脚本生成的 HTML，也不在乎。
我没有，但我想 -1。它根本没有回答这个问题。 OP 想知道如何缩进生成的 HTML。相反，每个人都在回答“你不应该”或“没有意义”。好吧，有一点，这就是OP想要的。至于“格式化代码仅供开发人员使用”，客户查看那里网站的源代码怎么样，所以看到不可读的代码？不是很专业。

【解决方案2】：

如果你在 ul 前面加上 \t 你应该可以看到代码美化了

<?php
function pagination(){
  echo "\t<ul>\n";

  for($i = 1; $i <= 10; $i++)
    echo "\t\t<li>...</li>\n";

  echo "\t</ul>\n";
}
?>
<div>
<?php pagination(); ?>
</div>

【讨论】：

问题是如何添加可变个标签。

【解决方案3】：

大多数编辑器都有某种格式功能，可用于修复缩进。例如，在 Visual Studio 中，您可以按 Ctrl + K + D 来很好地格式化您的 html。

【讨论】：

【解决方案4】：

如果它是一个更复杂的 html 结构，我通常会这样做。如果你问我，这会让你更容易理解，而且你也可以正常编写你的 html，而不用担心转义引号之类的事情。

由于在处理 HTML 时您不在 PHP 块中，因此它会像您制作的那样缩进。

<?php
function pagination(){
echo "</ul>\n";
   for($i = 1; $i <= 10; $i++)
   {
?>
        <li>...</li>
<?php
   }

echo "</ul>\n";
}
?>
<div>
   <?php pagination(); ?>
</div>

【讨论】：

【解决方案5】：

您可以使用heredoc 语法

<?php
$str = <<<EOD
Example of string
spanning multiple lines
using heredoc syntax.
EOD;

/* More complex example, with variables. */
class foo
{
    var $foo;
    var $bar;

    function foo()
    {
        $this->foo = 'Foo';
        $this->bar = array('Bar1', 'Bar2', 'Bar3');
    }
}

$foo = new foo();
$name = 'MyName';

echo <<<EOT
My name is "$name". I am printing some $foo->foo.
    Now, I am printing some {$foo->bar[1]}.
    This should print a capital 'A': \x41
    Notice all of the indenting is preserved.
EOT;
?>

【讨论】：

是的，他可以。但它对这个问题有什么作用呢？
or somehow automatically indent the html? 这将是其中一种方式... s/automatically/preserve
在他自己当前的解决方案中已经保留了缩进。他正在寻找的不是保存。更不用说丑陋的heredoc没有html颜色突出显示，自动完成和这样的事情是可能的。
@Col.Shrapnel 他的问题含糊不清，我为我解释的问题贡献了最好的解决方案。

【解决方案6】：

我同意所有 cmets 的说法，但如果您确实有这样做有意义的情况，那么您可以使用 indent 选项通过 HTML Tidy（或者在您的情况下为 PHP Tidy）管道您的 HTML .

【讨论】：

【解决方案7】：

答案是，使用模板。

如果您正确地将逻辑与演示分开，这个问题就会消失。您的模板将具有您想要或需要的所有缩进或缺少缩进。

编辑

不过，您可以非常简单地修改您的代码：

<?php
function pagination($depth=0) {
  $indent = str_pad("", $depth, "\t");
  echo $indent."<ul>\n";

  for($i = 1; $i <= 10; $i++)
    echo $indent."\t<li>...</li>\n";

  echo $indent."</ul>\n";
}
?>
<div>
  <?php pagination(1); ?>
</div>
<div>
  <div>
    <?php pagination(2); ?>
  </div>
</div>

或者，您可以只传递您想要的缩进：

<?php
function pagination($indent="") {
  echo $indent."<ul>\n";

  for($i = 1; $i <= 10; $i++)
    echo $indent."\t<li>...</li>\n";

  echo $indent."</ul>\n";
}
?>
<div>
  <?php pagination("\t"); ?>
</div>
<div>
  <div>
    <?php pagination("\t\t"); ?>
  </div>
</div>

【讨论】：

问题是如何在模板中添加辅助块，保持整体缩进。听说过模板辅助函数吗？
这个问题充其量是模糊的，没有提到模板或帮助块。
开篇中的函数就是这样一个帮手。用于在不同模板中输出相同的HTML块，以免重复代码。
好吧，现在至少是问题的答案了。

【解决方案8】：

我也是格式良好的代码的忠实拥护者。这里很多人说“萤火虫会为你缩进你的代码”。那么，当传递给浏览器的标记通过 javascript 修改或注入到 DOM 时呢？然后 firebug 向您显示当前状态，而不是您从服务器加载的状态。

我还希望我的 html 在整个脚本中都是可见且可读的。我通常会做这样的事情，分别跟踪 PHP 和 HTML 缩进（不能将光标放在开始标签或 { 上，然后向下滚动页面直到找到结束标签或 }方便地与您的光标位置对齐。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <h1>Hello</h1>
    <div><?php
$thelist = array('Red', 'Green', 'Blue', 'Black');
echo '
        <ul>';
foreach ($thelist as $color) {
    echo '
            <li>' . $color . '</li>';
}
echo '
        </ul>';
?>

    </div>
</body>
</html>

这样输出，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <h1>Hello</h1>
    <div>
        <ul>
            <li>Red</li>
            <li>Green</li>
            <li>Blue</li>
            <li>Black</li>
        </ul>
    </div>
</body>
</html>

注意看起来就像它应该的那样，就像它在脚本中所做的那样（这让我的调试变得简单）。我在 HTML 中使用单引号，因此我不必转义一万亿个引号（这使得连接字符串更加手动，但它比所有那些反斜杠工作更少；这也妨碍了脚本的可读性）。

再说一次，这只是我做事的方式，可能不是处理 HTML 格式的理想方式。我只是想让我的 HTML 漂亮整洁，即使它与 PHP 混合使用也是如此

【讨论】：

这可能会产生不错的输出，但它根本是支持噩梦的非模板方法。而且，坦率地说，代码很丑。
我同意@YourCommonSense，但echo '....<li>' . $color . '</li>' . "\n"; 不会使您的代码更具可读性吗？甚至echo "....<li>$color</li>\n";

【解决方案9】：

惊人的问题。

到目前为止，9 个答案和 3 个 cmets，看起来没有人费心阅读问题正文，但只是重复了一些由标题中的关键字触发的福音——这是在 stackoverflow 的祝福网站上回答问题的最首选方式。

但问题并不是那么简单/单层。
我不得不承认，它本身就是模棱两可的。所以，我们必须把它挖出来。

1) 如何缩进 HTML？

使用模板，伙计。使用模板。唯一的答案。

2) 函数是否有任何解决方案可以以某种方式知道要添加多少 \t 或空格，或者以某种方式自动缩进 html？

当然没有。
PHP 对 HTML、缩进等一无所知。
尤其是当 HTML 还没有准备好时（！）

3) 如果我添加另一个容器 DIV，这不会产生正确缩进的代码。

问题的关键问题。
提出问题的目的。

但最难的。

答案是我完全不同意的那种，呵呵：
虽然标签的相对顺序很重要，但对于生成的大型 HTML，可以将一些块移出一行：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <h1>Hello</h1>
    <div>
<!-- news list -->
<div>
  <ul>
    <li>1..</li>
    <li>2..</li>
    <li>3..</li>
    <li>4..</li>
  </ul>
</div>
<!-- /news list -->
    </div>
    <div>
<!-- pagination -->
<ul>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
  <li>Black</li>
</ul>
<!-- /pagination -->
    </div>
</body>
</html>

它可以让你在有意义的块中有适当的缩进，同时保持主 HTML 的顺序。
作为副作用，它会将您的线条保留在屏幕上:)

为了在子模板中保持良好的缩进，我强烈建议使用基于 PHP 的模板。看在上帝的份上，不是丑陋的 HEREDOC！
以下是 PHP 模板要遵循的一条规则：
始终将 PHP 块放在左侧。 仅此而已。
为了保持 PHP 嵌套块之间的缩进，只需将它们缩进 <? ?>

例子：

<ul>
<? foreach ($thelist as $color): ?>
  <li>
<?   if ($color == $current): ?>
    <b><?=$color?></b>
<?   else ?>
    <a href="?color=<?=$color?>"><?=$color?></a>
<?   endif ?>
  </li>
<? endforeach ?>
</ul>

这将生成正确缩进的 HTML，同时保持模板中 HTML 和 PHP 的顺序，使开发人员在开发和调试时的生活更加轻松调试。

不要听任何人说“根本不需要缩进代码！”。他们只是业余爱好者，而不是真正的开发者。任何了解调试是什么的人，以及在调试代码时遇到困难的人都会告诉您，适当的缩进是必不可少的。

【讨论】：

我确实使用模板，但是在某些情况下（比如分页）使用模板有点愚蠢，因为你必须在模板中做一些复杂的事情。参见例如this class，这基本上是无用的，render.inc 完成了模板中的所有工作......
你只是把模板弄错了。模板绝对不是为了让事情变得“简单”（不复杂）。模板将数据处理与数据显示分开。它们也可能很复杂，但必须与数据处理分开。任何混合这些问题的班级都是垃圾。不过，我的帖子的重点完全不同。
“任何了解什么是调试，并且在调试代码时遇到困难的人都会告诉您，适当的缩进是必不可少的。”
@SpliFF 所有这些实现都会渲染代码。他们以这种或那种方式改变它。一些 DOM 更改，甚至尝试更正错误的标签——这些查看器的目的与调试输出不同——这就是问题所在。

【解决方案10】：

编辑：将代码分解为页面。

这段代码实际上只适用于模板系统。
这可能只是一个基本的：

// file: index.tpl.html

<html>
    <head>
    </head>
    <body>
        <div>Some header code</div>
        <div>
            {mainContent}
        </div>
        <div>Some footer code</div>
    </body>
</html>

// file: functions.php
<?php
    function pagination()
    {
        $output = "<ul>\n";

        for($i = 1; $i <= 10; $i++)
            $output = "\t<li>...</li>\n";

        $output = "</ul>\n";

        return $output;
    }

    function indent_html($html, $tag, $new_html)
    {
        // magic indenting code: finds how many spaces are used on the line above it
        $spacePos = 0;
        $find  = strpos($html, '{'.$tag.'}' );
        while( $html[ $find-$spacePos-1] == ' ' ) $spacePos++;

        // Uses the indent from the line above to indent your new html
        return str_replace("\n", "\n".str_repeat(" ", $spacePos), $new_html);
    }
?>

// file: index.php
<?php
    $html = file_get_contents("index.tpl.html");

    // magic indenting code: finds how many spaces are used on the line above it
    $spacePos = 0;
    $find  = strpos($html, '{mainContent}' );
    while( $html[ $find-$spacePos-1] == ' ' ) $spacePos++;

    // your pagination() needs to return html not output it
    $mainContent = pagination();
    $mainContent = indent_html($html, $tag, $mainContent);

    // Uses the indent from the line above to indent your new html
    $mainContent = str_replace("\n", "\n".str_repeat(" ", $spacePos), $mainContent);

    // finally insert your html
    $html = str_replace("{mainContent}", $mainContent, $html);
?>

如果您想使用制表符而不是空格，可能需要进行一些修改。
我使用空格，因为它更跨浏览器/应用程序。

【讨论】：

你说的“模板系统”是什么？
为什么投反对票？它回答了这个问题，所有生成的代码都会缩进。 @YourCommonSense 我只是展示了如何使用它，home/index.tpl.html 将包含 {mainContent}，它被生成的代码替换，并缩进到与它周围的代码相同的级别。
您的解决方案不使用模板。所以，根本不应该使用它
模板只是一个可重复使用的文件。不必从 2000 行类中调用它就可以称为“模板系统”。 html 页面中没有任何动态（在本例中为 php）代码这一事实足以将其称为模板。
您只是不知道模板是什么以及它的用途。模板中包含动态代码没有问题。（此外，避免它是不可能的！）但是要使用模板，您的 PHP 代码中也不应该有任何静态 HTML