在<code>标签内使用<div>标签是否可行？

Question

在“code”标签内使用“div”标签是否可以？我正在使用NetBeans 8.0.1编写一些HTML页面。在某个时候，我必须在“code”内部使用“div”。您可以在http://jsfiddle.net/125ypcum/中看到我的代码的一部分。

NetBeans给出以下错误： 在此上下文中，“div”元素不允许作为“code”元素的子元素。 虽然结果是我想要的，但这个错误令我困扰。这样会有问题吗？有没有一种方法可以在没有错误的情况下获得相同的结果？

来自jsfiddle的代码：

<div class="codeDiv">
<pre>
<code class="black">stat<sub>0</sub>;
<div class="back-red codeBoxMargin">if (expr<sub>1</sub>)
<div class="back-green codeBoxMargin">  if (expr<sub>2</sub>)
    {
        stat<sub>1</sub>;
        stat<sub>2</sub>;
    }
    else
<div class="back-blue codeBoxMargin">       if (expr<sub>3</sub>)
        {
            stat<sub>4</sub>;
            stat<sub>5</sub>;
        }
        else
            stat<sub>6</sub>;
</div></div>else
    stat<sub>7</sub>;
</div>stat<sub>8</sub>;</code></pre>
</div>

- Nuri Tasdemir

---

使用 <span> 代替？ - Lowe Bäckström

你想要使用 <code> 标签吗？如果是的话，只需将 <code> 标签放在你的实际代码周围，并按照你想要的方式嵌套你的 div。 - i alarmed alien

@LoweBäckström 使用<span>标签会产生不同的结果。（背景颜色只影响文本存在的位置，而不是像<div>一样的矩形）你可以在jsfiddle上尝试一下。 - Nuri Tasdemir

@ialarmedalien 在 pre 标签内使用 <div> 也会报错。 - Nuri Tasdemir

我已将解决方案放在我的答案中，但你可以去掉<pre>元素并使用CSS属性 white-space 代替。 - i alarmed alien

Answer 1

code是内联元素，而div是块级元素。块级元素不能出现在内联元素中。

如果你想要在预格式化容器中使用div，请使用pre。但需要注意的是，默认情况下pre会按原样显示换行符。或者在code中使用元素（Lowe Bäckström在评论中提出了这种方法）。

- lxg

---

我尝试了那个，但是当我使用<span>元素时，背景颜色仅作用于文本而不是像<div>一样的矩形。 - Nuri Tasdemir

在你发布的代码中，为什么你需要 code 标签呢？你已经有了 pre，对吧？你也可以用 CSS 来样式化 pre。也许这就是你要找的东西。 - lxg

我使用“代码”只是为了提到某部分是代码。因为“pre”只是告诉它是预格式化文本。移除“代码”不会改变任何东西。同样的错误也出现在“pre”中。 - Nuri Tasdemir

好的，等一下...那也许你想要一个像pre/code元素一样“行为”的容器？那就把pre/code替换为普通的div，并给它正确的CSS规则。类似于white-space:pre; font-family:monospace这样的东西。 - lxg

Answer 2

如果你想使用code元素标记你的代码，但是想要特定的展示样式，可以使用像div这样的元素来设置元素的排列，然后再使用<code>来标记代码本身。对于你的html，代码如下：

<div class="codeDiv black">
<code>stat<sub>0</sub>;
</code>
<div class="back-red codeBoxMargin">
<code>if (expr<sub>1</sub>)
</code>
<div class="back-green codeBoxMargin">
<code>  if (expr<sub>2</sub>)
    {
        stat<sub>1</sub>;
        stat<sub>2</sub>;
    }
    else
</code>
<div class="back-blue codeBoxMargin">
<code>       if (expr<sub>3</sub>)
        {
            stat<sub>4</sub>;
            stat<sub>5</sub>;
        }
        else
            stat<sub>6</sub>;
</code></div></div><code>else
    stat<sub>7</sub>;
</code>
</div><code>stat<sub>8</sub>;</code>
</div>

注意：我已经删除了<pre>标签！

您可以使用css声明code { white-space: pre; }来保留空格，并将字体设置为适当的等宽字体。

code {
    white-space: pre;
    font: 1em/1.5 Menlo, Consolas, 'DejaVu Sans Mono', Monaco, monospace; /* or whatever */
}

这里是 JSFiddle。

<code> 是一个内联元素，用于标记块级元素（如 <div>、<p> 等）中的文本范围。虽然大多数浏览器都可以很好地呈现您的原始 html，但这样做在语法上是不正确的。

- i alarmed alien