html界面代码

HTML页面显示HTML代码的写法

在网页开发中，我们经常需要将HTML代码嵌入到其他HTML页面中，这可以通过使用HTML的<pre>标签和<code>标签来实现，下面详细介绍如何使用这两个标签来显示HTML代码。

1. <pre>标签

<pre>标签用于定义预格式化的文本，它可以让浏览器保留文本中的空格和换行符，从而保持原始格式，这对于显示多行的代码非常有用。

我们可以使用以下代码来显示一个简单的HTML段落：

<pre>
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;我的第一个HTML页面&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;欢迎来到我的网站&lt;/h1&gt;
&lt;p&gt;这是一个段落。&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

在上面的例子中，<pre>标签包围了整个HTML代码，浏览器会保留代码中的空格和换行符，使得代码更容易阅读。

2. <code>标签

<code>标签用于表示计算机代码文本，它通常与<pre>标签一起使用，以保留代码的格式。

我们可以使用以下代码来显示一个简单的JavaScript代码片段：

<pre>
<code>
function sayHello() {
  alert("Hello, world!");
}
sayHello();
</code>
</pre>

在上面的例子中，<code>标签包围了JavaScript代码，浏览器会将这段代码显示为等宽字体，并保留代码中的空格和换行符。

3. 结合使用<pre>和<code>标签

在实际开发中，我们通常会结合使用<pre>和<code>标签来显示HTML代码，这样可以同时保留代码的格式和语法高亮。

我们可以使用以下代码来显示一个带有语法高亮的HTML代码片段：

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;示例页面&lt;/title&gt;
&lt;style&gt;
  body {font-family: Arial, sans-serif;}
  code {background-color: f0f0f0; padding: 2px 4px; font-family: monospace;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;欢迎来到示例页面&lt;/h1&gt;
&lt;p&gt;这是一个简单的HTML页面，以下是一些示例代码：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;!-这是一个注释 --&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;&nbsp;&amp;-&lt;/code&gt;</pre>
&lt;/body&gt;</code></pre>

在上面的例子中，我们使用了<code>标签来包围JavaScript代码，并使用CSS样式设置了背景颜色、内边距和字体，我们将整个代码片段放在一个<pre>标签中，以保留代码的格式，浏览器会将这段代码显示为等宽字体，并保留代码中的空格和换行符。