你如何缩进你的HTML?

时间:2012-02-29 02:24:50

标签: php html indentation

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

10 个答案:

答案 0 :(得分:13)

惊人的问题。

到目前为止,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的顺序,使开发人员在开发和调试时更加轻松。

不要听任何说“根本不需要缩进代码!”的人。他们只是业余爱好者,而不是真正的开发者。任何了解调试的人,谁很难调试他们的代码,都会告诉你正确的缩进是必不可少的。

答案 1 :(得分:3)

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

答案 2 :(得分:1)

我同意所有评论说不要打扰,但如果您确实有这样做的情况,那么您可以通过HTML Tidy(或在您的情况PHP Tidy)管道您的HTML使用indent选项。

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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

答案 5 :(得分:0)

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

答案 6 :(得分:0)

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

答案 7 :(得分:0)

答案是,使用模板

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

修改

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

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

答案 8 :(得分:0)

我也是格式良好的代码的坚持者。很多人在这里说“firebug会为你缩进你的代码”。那么,什么时候通过javascript修改传递给浏览器的标记或注入DOM?然后firebug显示当前状态,而不是从服务器加载的状态。

我也喜欢我的html在我的脚本中可见和可读。我通常做这样的事情,分别跟踪PHP和HTML缩进(它不能将光标放在开始标记或{上,只是向下滚动页面,直到找到结束标记或{ {1}}方便地与你的游标位置对齐。

}

这样输出,

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

注意看起来就像它应该的样子,就像在脚本中一样(这使我的调试变得简单)。我使用单引号和HTML,所以我不必逃避一万亿个引号(这使串联字符串更加手动,但它比所有反斜杠更少;这也妨碍了脚本中的可读性。)

再一次,这就是我的工作方式,可能不是处理格式化HTML的理想方式。我只是喜欢让我的HTML很好,即使它与PHP混合

答案 9 :(得分:0)

编辑:将代码分解成页面
此代码实际上仅适用于模板系统 哪个可以是基本的:

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

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