PHP - html 缩进块

发布于 2024-10-31 21:53:18 字数 1518 浏览 2 评论 0原文

假设我有以下代码：

<?php
echo "<div id=\"root\">";
echo "<div id=\"child_of_root\">";
echo "<img src=\"picture1.png\">";
echo "<img src=\"picture2.png\">";
echo "<img src=\"picture3.png\">";
echo "<img src=\"picture4.png\">";
echo "<img src=\"picture5.png\">";
echo "</div>";
echo "</div>";
?>

如果我运行以下代码，则以下 HTML 将全部内联渲染，没有任何换行符：

<div id="root"><div id="child_of_root"><img src="picture1.png"><img src="picture2.png"><img src="picture3.png"><img src="picture4.png"><img src="picture5.png"></div></div>

如果我运行以下代码：

<?php
echo "<div id=\"root\">\n";
echo "\t"."<div id=\"child_of_root\">\n";
echo "\t\t"."<img src=\"picture1.png\">"."\n";
echo "\t\t"."<img src=\"picture2.png\">"."\n";
echo "\t\t"."<img src=\"picture3.png\">"."\n";
echo "\t\t"."<img src=\"picture4.png\">"."\n";
echo "\t\t"."<img src=\"picture5.png\">"."\n";
echo "\t"."</div>"."\n";
echo "</div>";
?>

它会渲染以下漂亮的 HTML：

<div id="root">
  <div id="child_of_root">
    <img src="picture1.png">
    <img src="picture2.png">
    <img src="picture3.png">
    <img src="picture4.png">
    <img src="picture5.png">
  </div>
</div>

有没有办法实现这些漂亮的缩进不必在我想要缩进的每一行之前放置 \t 。我的意思是这样我可以缩进一个块而不是一行。

原文

Let's say I have the following code:

<?php
echo "<div id=\"root\">";
echo "<div id=\"child_of_root\">";
echo "<img src=\"picture1.png\">";
echo "<img src=\"picture2.png\">";
echo "<img src=\"picture3.png\">";
echo "<img src=\"picture4.png\">";
echo "<img src=\"picture5.png\">";
echo "</div>";
echo "</div>";
?>

If I ran this the following HTML would be rendered all inline without any line breaks:

<div id="root"><div id="child_of_root"><img src="picture1.png"><img src="picture2.png"><img src="picture3.png"><img src="picture4.png"><img src="picture5.png"></div></div>

If I ran the following code:

<?php
echo "<div id=\"root\">\n";
echo "\t"."<div id=\"child_of_root\">\n";
echo "\t\t"."<img src=\"picture1.png\">"."\n";
echo "\t\t"."<img src=\"picture2.png\">"."\n";
echo "\t\t"."<img src=\"picture3.png\">"."\n";
echo "\t\t"."<img src=\"picture4.png\">"."\n";
echo "\t\t"."<img src=\"picture5.png\">"."\n";
echo "\t"."</div>"."\n";
echo "</div>";
?>

It wound render the following beautiful HTML:

<div id="root">
  <div id="child_of_root">
    <img src="picture1.png">
    <img src="picture2.png">
    <img src="picture3.png">
    <img src="picture4.png">
    <img src="picture5.png">
  </div>
</div>

Is there a way I could achieve these beautiful indents without having to put \t before every line I want to indent. I mean so that I can indent a block instead of one line.

分享到QQ

分享到微博

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

发布评论

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

雨的味道风的声音 2024-11-07 21:53:18

一方面，它是 HTML 标记，因此无论其格式如何，浏览器都会以相同的方式呈现它。使用 Firebug 这样的工具可以为您提供更好的方法来浏览网页中的 HTML。

另一方面，您不必不断使用 echo 命令来输出 HTML。 PHP 本身或多或少是一种模板语言，因此您可以退出 PHP，以您自己的格式输出 HTML，然后重新进入 PHP。

例如：

<?php // ... your code before this ... ?>
<div id="root">
    <div id="child_of_root">
        <img src="picture1.png">
        <img src="picture2.png">
        <img src="picture3.png">
        <img src="picture4.png">
        <img src="picture5.png">
    </div>
</div>
<?php // ... your code after this ... ?>

如果您的输出需要一定程度的活力，您始终可以使用 PHP 添加循环等。

<?php // ... your code before this ... ?>
<div id="root">
    <div id="child_of_root">
        <?php for ($x = 1; $x <= 5; $x++): ?>
            <img src="picture<?php echo $x; ?>.png">
        <?php endfor; ?>
    </div>
</div>
<?php // ... your code after this ... ?>

如果您仍然需要格式化的 HTML，也许是为了显示代码示例或其他内容，您要么必须继续手动使用 \n 和 \t，要么您可以查看PHP Tidy 扩展，它是为格式化 HTML 而构建的。

For one thing, it's HTML markup, so it doesn't matter how it's formatted, the browser renders it all the same. Using a tool like Firebug can give you a much better way of navigating HTML in your web-pages.

On another note, you don't have to continually use echo commands to output HTML. PHP is more-or-less a templating language in itself, so you could just exit PHP, output your HTML in your own format, and then re-enter PHP.

For example:

<?php // ... your code before this ... ?>
<div id="root">
    <div id="child_of_root">
        <img src="picture1.png">
        <img src="picture2.png">
        <img src="picture3.png">
        <img src="picture4.png">
        <img src="picture5.png">
    </div>
</div>
<?php // ... your code after this ... ?>

If your output needs some level of dynamism to it, you can always use PHP to add in loops and whatnot.

<?php // ... your code before this ... ?>
<div id="root">
    <div id="child_of_root">
        <?php for ($x = 1; $x <= 5; $x++): ?>
            <img src="picture<?php echo $x; ?>.png">
        <?php endfor; ?>
    </div>
</div>
<?php // ... your code after this ... ?>

If you still need formatted HTML, maybe for displaying code samples or something, you'll either have to continue manually using \n and \t, or you could check out the PHP Tidy extension, which is built for formatting HTML.

回复收藏 0 原文

-柠檬树下少年和吉他 2024-11-07 21:53:18

首先用：

echo '<img src="picture1.png">';

代替

echo "<img src=\"picture1.png\">";

Code就清晰多了。

如果你想在 PHP 中返回 HTML 代码，没有其他方法可以进行缩进。

但是为什么要在 PHP 中打印 HTML 代码呢？你不能直接退出 PHP 块吗？

<?php
// do something and exit PHP block
?>
<div id="root">
  <div id="child_of_root">
    <img src="picture1.png">
    <img src="picture2.png">
    <img src="picture3.png">
    <img src="picture4.png">
    <img src="picture5.png">
  </div>
</div>
<?php
// do again something in PHP
?>

First of all use:

echo '<img src="picture1.png">';

instead of

echo "<img src=\"picture1.png\">";

Code is much more clear.

If you want to return HTML code in PHP, there is no other way to do indents.

However why you want to print HTML code in PHP ? Can't you just exit PHP block here ?

<?php
// do something and exit PHP block
?>
<div id="root">
  <div id="child_of_root">
    <img src="picture1.png">
    <img src="picture2.png">
    <img src="picture3.png">
    <img src="picture4.png">
    <img src="picture5.png">
  </div>
</div>
<?php
// do again something in PHP
?>

回复收藏 0 原文

夏至、离别 2024-11-07 21:53:18

我建议使用 HEREDOC

//Note that I used spaces and not tabs, but that's only due to the post editor.
echo <<<HTML
<div id="root">
     <div id="child_of_root">
          <img src="picture1.png">
          <img src="picture2.png">
          <img src="picture3.png">
          <img src="picture4.png">
          <img src="picture5.png">
     </div>
</div>
HTML;

您还可以执行

$variable = <<<OPENINGTAG
text
    text
text
OPENINGTAG;

echo $variable;

变量也将在 HEREDOC 字符串内进行解析的操作。只是要小心结尾标签，它非常有气质。该行之前或之后没有空格。我什至不知道是否允许评论。

这里使用带有循环的 Dominic Barnes 示例：

<?php
echo <<<HTML
<div id="root">
    <div id="child_of_root">
HTML;

for ($x = 1; $x <= 5; $x++)
{
echo <<<HTML
            <img src="picture$x.png">
HTML;
}

echo <<<HTML
    </div>
</div>
HTML;
?>

也可以这样做：

<?php
$output = <<<HTML
<div id="root">
    <div id="child_of_root">
HTML;

for ($x = 1; $x <= 5; $x++)
{
$output .= <<<HTML
            <img src="picture$x.png">
HTML;
}

$output .= <<<HTML
    </div>
</div>
HTML;

echo $output;
?>

NOWDOC 在 5.3+ 中也可用，它充当单引号字符串，没有变量解析。

HEREDOC 和NOWDOC 字符串可以按照与普通字符串相同的方式连接。

I would suggest using HEREDOC for this. It's best for holding large blocks of HTML and Text that you wish to retain formatting:

//Note that I used spaces and not tabs, but that's only due to the post editor.
echo <<<HTML
<div id="root">
     <div id="child_of_root">
          <img src="picture1.png">
          <img src="picture2.png">
          <img src="picture3.png">
          <img src="picture4.png">
          <img src="picture5.png">
     </div>
</div>
HTML;

You can also do

$variable = <<<OPENINGTAG
text
    text
text
OPENINGTAG;

echo $variable;

Variables will also be parsed inside HEREDOC strings. Just be careful of the ending tag, it's very temperamental. No spaces before or after on it's line. I don't even know if comments are allowed.

Here it is using Dominic Barnes example with a loop:

<?php
echo <<<HTML
<div id="root">
    <div id="child_of_root">
HTML;

for ($x = 1; $x <= 5; $x++)
{
echo <<<HTML
            <img src="picture$x.png">
HTML;
}

echo <<<HTML
    </div>
</div>
HTML;
?>

could also do:

<?php
$output = <<<HTML
<div id="root">
    <div id="child_of_root">
HTML;

for ($x = 1; $x <= 5; $x++)
{
$output .= <<<HTML
            <img src="picture$x.png">
HTML;
}

$output .= <<<HTML
    </div>
</div>
HTML;

echo $output;
?>

NOWDOC is also available in 5.3+ which act as single quoted strings with no variable parsing.

HEREDOC and NOWDOC strings can be concatenated on to in the same way as normal strings.

回复收藏 0 原文

水水月牙 2024-11-07 21:53:18

如果将图片 ID 放入数组中，则可以执行 foreach() 循环，在每个图像前面添加换行符和制表符，而无需手动编码。例如

echo '<div id="root">\n';
echo '\t<div id="child_of_root">\n';
    $images = array('picture1', 'picture2', 'picture3', 'picture4', 'picture5');
    foreach ($images as $image) {
        echo '\t\t<img src="'.$image.'.png">\n';
    }
echo '\t</div>\n';
echo '</div>';

If you put your picture ids in an array, you can do a foreach() loop that echoes each of the images with the new line and tab characters in front without having to code it by hand. E.g.

echo '<div id="root">\n';
echo '\t<div id="child_of_root">\n';
    $images = array('picture1', 'picture2', 'picture3', 'picture4', 'picture5');
    foreach ($images as $image) {
        echo '\t\t<img src="'.$image.'.png">\n';
    }
echo '\t</div>\n';
echo '</div>';

回复收藏 0 原文

夜夜流光相皎洁 2024-11-07 21:53:18

我尝试了Tidy，但由于某种原因，无论我如何配置它，它似乎都不会缩进。然而，其他人编写了一些代码，可以：

用于清理 HTML 和 JavaSctipt 代码的 PHP 函数

还有一些智能指南可以避免使用此类代码：

使用 PHP 模板获取精美的缩进 HTML：要遵循的两条规则

另外：fredsco.com/programming/indenting-html -输出-in-php

回复收藏 0 原文

娇俏 2024-11-07 21:53:18

这是一个对我有用的例子：

<?php 
echo '
<div style="margin-left: 100px">
    <div id="root">
        <div id="child_of_root">
            <img src="picture1.png" /><br />
            <img src="picture2.png" /><br />
            <img src="picture3.png" /><br />
            <img src="picture4.png" /><br />
        </div>
    </div>
</div>
';
?>

Here is an example that worked for me:

<?php 
echo '
<div style="margin-left: 100px">
    <div id="root">
        <div id="child_of_root">
            <img src="picture1.png" /><br />
            <img src="picture2.png" /><br />
            <img src="picture3.png" /><br />
            <img src="picture4.png" /><br />
        </div>
    </div>
</div>
';
?>

回复收藏 0 原文

~没有更多了~