如何縮進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代碼示例

回答

相關問題