为什么使用 span 标签会给我带来意想不到的结果？答案

【问题标题】：Why using span tag give me result that is not to be expected?为什么使用 span 标签会给我带来意想不到的结果？
【发布时间】：2022-09-23 19:24:09
【问题描述】：

我想得到这样的结果。

我的代码是：

<!DOCTYPE html>
<html>
<head>
<style>
span{ background-color: rgb(33, 30, 47);
            color: rgb(147, 149, 152);}
</head>
<body>
<pre>
<code>
<span>// Prints 5 to the console</br>
                console.log(5);
</span>
</code>
</pre>
</body>
</html>

但我得到了：

标签： html

【解决方案1】：

首先，您的样式标签未正确关闭。我已经编写了代码来精确模拟您需要的样式。您必须将所有元素嵌入到 div 容器中，调整宽度，然后应用框属性。

<html>
<head>
    <style>
        div {
            background-color: rgb(33, 30, 47);
            color: rgb(147, 149, 152);
            width: 200px;
            padding: 25px;
        }
        .red{
            color:red
        }
        .blue{
            color:skyblue
        }
        .white{
            color:white
        }
    </style>
</head>

<body>
    <div>
<pre>
// Prints 5 to the console
<span class="red">console</span><span class="white">.</span><span class="blue">log</span><span class="white">(</span><span class="red">5</span><span class="white">);</span>

</pre>
    </div>
</body>

</html>

【讨论】：

【解决方案2】：

我花了一些时间来玩弄你的代码。 HTML 中的 <style> 标记应该全部放在一起，或者在有意义的情况下放置。您的 <style> 属性现在都在顶部。

<style>
    span {
        background-color: rgb(33, 30, 47);
        color: rgb(147, 149, 152);
    }
</style>

【讨论】：