如何缩进HTML


How do you indent your HTML?

给定我的应用程序生成的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?

令人惊叹的问题。

到目前为止,有9个答案和3条评论,看起来没有人愿意阅读问题正文,只是重复了标题中的一个关键词引发的一些福音——这是在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的顺序,使开发人员在开发和调试时的生活更加轻松。

不要听任何人说"根本不需要缩进代码!"。他们只是业余爱好者,而不是真正的开发人员。任何知道调试是什么的人,如果他们在调试代码时遇到了困难,都会告诉你正确的缩进是必不可少的。

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

我同意所有的评论,说不用麻烦,但如果你确实有这样做的意义,那么你可以使用indent选项通过HTML Tidy(或者在你的情况下是PHP Tidy)来传输你的HTML。

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

如果它是一个更复杂的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>

您可以使用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;
?>

如果在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>

我也是一个坚持格式良好的代码的人。这里有很多人说"firebug会为你缩进代码"。那么,当传递到浏览器的标记通过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 混合在一起

答案是,使用模板

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

编辑

尽管如此,您可以非常简单地修改代码:

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

Edit:将代码分解为多个页面

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

// 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);
?>

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