PHP - отступ блока HTML - PullRequest
Новая
       9

PHP - отступ блока HTML

5 голосов
/ 09 апреля 2011

Допустим, у меня есть следующий код: 

<?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 перед каждой строкой Iхочу сделать отступ.Я имею в виду, что я могу сделать отступ вместо одной строки.

Ответы [ 6 ]

11 голосов
/ 09 апреля 2011

Во-первых, это разметка 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.

6 голосов
/ 09 апреля 2011

В первую очередь используйте: 

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

вместо 

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

Код гораздо понятнее.

Если вы хотите вернуть HTML-код в PHP, другого способа сделать отступы нет.

Однако, почему вы хотите напечатать HTML-код на PHP? Вы не можете просто выйти из блока 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
?>
1 голос
/ 09 апреля 2011

Я бы предложил использовать для этого HEREDOC .Лучше всего для хранения больших блоков HTML и текста, которые вы хотите сохранить форматирование: 

//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.Просто будьте осторожны с конечным тегом, он очень темпераментный.Нет пробелов до или после в строке.Я даже не знаю, разрешены ли комментарии.

Здесь используется пример Доминика Барнса с циклом: 

<?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 можно объединять так же, как и обычные строки.

0 голосов
/ 20 августа 2013

Вот пример, который работал для меня: 

<?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 голосов
/ 19 февраля 2012

Я попробовал Tidy, но по какой-то причине, независимо от того, как я его настроил, он не будет показывать отступ. Однако кто-то еще написал код, который будет:

Функция PHP для очистки кода HTML и JavaSctipt

Существуют также некоторые разумные рекомендации по устранению необходимости в таком коде:

Получите красивый HTML с вашими шаблонами PHP: два правила, которым нужно следовать

Также: fredsco.com / программирование / indenting-html-output-in-php

0 голосов
/ 09 апреля 2011

Если вы поместите свои идентификаторы изображений в массив, вы можете выполнить цикл 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>';
...