如何缩进html代码示例

我有一个网站或一个html页面，我想缩进我的代码以供我的访问者查看。例如：如何缩进html代码示例

<html> 
<head> 
</head> 
<body> 
<pre> 
&lt;html> 
&lt;body> 
&lt;p> 
hi 
&lt;/p> 
&lt;/body> 
</pre> 
</body> 
</html>

在HTML中，有一个方法来缩进的块码，而无需使用大量的& NBSP; ，就像< blockquote>标记。这样一来，我可以使用这样的事情：

< HTML>
<头> & LT /头> <体>
< P> 嗨
</P>
</body>

</html> 使用：

<blockquote> 
&lt;html> 
<blockquote> 
&lt;head> 
&lt/head> 
&lt;body> 
<blockquote> 
&lt;p> 
<blockquote> 
Hi 
</blockquote> 
&lt;/p> 
</blockquote> 
&lt;/body> 
</blockquote> 
&lt;/html>

我在想，如果有办法的代码缩进块一个更好的办法。如果没有，我想知道是否有一种方法来使用css来改变它，所以没有一条线，它看起来只是链接到用户的正常缩进。

来源

2015-12-19 jeffkmeng

我会用美丽[美化]（https://github.com/google/code-prettify）插件缓解了我的生活。 – Sina

可以使用pre标签，使它可以通过正常的空格/制表符缩进预格式化文本。

<pre> 
    &lt;html> 
     &lt;head>&lt;/head>&lt;body> 
      &lt;p> 
       Hi 
      &lt;/p> 
     &lt;/body> 
    &lt;/html> 
</pre>

JSFiddle

来源

2015-12-19 07:52:46 p1xel

谢谢，我从来不知道你可以自由缩进前元素 – jeffkmeng

@jkm没问题！ – p1xel

你可以用CSS来做。 text-indent属性指定文本块中第一行的缩进。尝试;

blockquote { 
    text-indent: 50px;//define indent in pixels 
}

这里是一个演示http://www.w3schools.com/cssref/tryit.asp?filename=trycss_text-indent

来源

2015-12-19 07:28:02

如何缩进html代码示例

回答

相关问题