什么时候应该看到<script>标签,为什么呢？

Question

已设置script样式的元素display:block显示为可见.为什么它是可能的,是否有任何真正的用例需要它？

td > * {
  display: block;
}

<table>
  <tr>
    <td>
      <script type="text/javascript">
        var test = 1;
      </script>von 1
    </td>
  </tr>
</table>

Answer 1

HTML5规范定义了用户代理(如浏览器)应该使用的样式表.第10.3.1节列出了"隐藏元素"的样式:

@namespace url(http://www.w3.org/1999/xhtml);

[hidden], area, base, basefont, datalist, head, link,
meta, noembed, noframes, param, rp, script, source, style, template, track, title {
  display: none;
}

embed[hidden] { display: inline; height: 0; width: 0; }

如您所见,它适用display: none;于script.

这是用户和隐藏script元素之间唯一的"障碍" .它非常精细,旨在能够覆盖作者样式表中的用户代理样式表(当然也包括用户样式表)中的样式.

为什么有人可能想要使用它？一个用例是显示内容而不必转义像</ 那样的字符>,类似于旧xmp元素.该script元素不仅可以用于脚本,还可以用于数据块(即任何MIME类型的元素).

Answer 2

为什么<script>标签可见？

因为它们是像任何其他HTML元素一样,并且没有理由在HTML规范中编写特殊情况规则(这会增加复杂性)以防止CSS应用于它们.

任何元素都可以设置样式.举个例子:

head { display: block; }
title { display: block; }
meta { display: block; }
meta[charset]:after { display: block; content: attr(charset); }
meta[content]:after { display: block; content: attr(content); }

是否有任何需要它的用例？

当然没有普通的规则,但是一般规则并不适用于你可以应用它们的所有内容.它们是针对常见情况而设计的.

Answer 3

另一个(不常见的)用例:

我有时会<script>在样式指南中使用标签作为简短的HTML代码示例.这样我就不必转义HTML标签和特殊字符.文本编辑器标记自动完成和语法突出显示仍然有效.但是在浏览器中添加语法突出显示并不容易.

script[type="text/example"] {
    background-color: #33373c;
    border: 1px solid #ccc;
    color: #aed9ef;
    display: block;
    font-family: monospace;
    overflow: auto;
    padding: 2px 10px 16px;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
}

<p>Here comes a code example:</p>
<script type="text/example">
  <div class="cool-component">
     Some code example
  </div>
</script>

Answer 4

可能的用例:用于调试目的.

您可以在文档级别应用一个类,例如.<body class="debugscript">,然后使用一些CSS:

body.debugscript script {
    display: block;
    background: #fcc;
    border: 1px solid red;
    padding: 2px;
}
body.debugscript script:before {
    content: 'Script:';
    display: block;
    font-weight: bold;
}
body.debugscript script[src]:before {
    content: 'Script: ' attr(src);
}