什么时候应该<script>标签可见，为什么他们可以？
呈现为display:block script元素显示为可见。 为什么这是可能的，是否有任何真正的用例在哪里？
td > * { display: block; }
<table> <tr> <td> <script type="text/javascript"> var test = 1; </script>von 1 </td> </tr> </table>
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元素不仅可以用于脚本， 也可以用于数据块 （即任何具有MIMEtypes的东西）。
为什么
<script>标签可见？
因为它们是HTML元素，所以没有理由在HTML规范中编写特殊的规则（这会增加复杂性）来阻止CSS应用到它们。
任何元素都可以被devise。 拿，例如：
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); }
有什么用途的地方，它是想要的？
当然，没有共同的东西，但一般的规则并不是为了适用于所有的东西而devise的。 它们是为常见情况而devise的。
另一个（不常见）用例：
我有时在样式指南中使用<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>
可能的用例：用于debugging目的。
你可以在文档级应用一个类，例如。 <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); }
通过使用display:none; ，默认隐藏脚本标记display:none; 。 Unor 1解释了底层语言规范。 但是，它们仍然是DOM的一部分，可以相应地进行devise。
也就是说，记住脚本标记正在做什么是非常重要的。 虽然以前是伴随着types和语言，不再需要。 现在假定JavaScript在那里，因此浏览器将会解释并执行脚本，因为脚本是从这些标记中遇到（或加载）的。
一旦脚本执行完毕，标签的内容就只是页面上的文本（通常是隐藏的）。 这个文本可以被显示出来，但是它也可以被删除，因为它只是文本。
在页面底部的</html>标记之前，您可以非常轻松地将这些标记与其文本一起移除，而且页面也不会发生变化。
例如：
(function(){ var scripts = document.querySelectorAll("script"); for(var i = 0; i < scripts.length; i++){ scripts[i].parentNode.removeChild(scripts[i]); } })()
这不会删除任何function，因为页面的状态已被更改，并反映在当前的全局执行上下文中。 例如，如果页面已经加载了像jQuery这样的库，删除标签并不意味着jQuery不再被公开，因为它已经被添加到页面的运行时环境中。 实质上只是让DOM检查工具不显示脚本元素，但它确实强调了脚本元素一次执行实际上只是文本。
1. unor，Thu Jul 07 2016，wutzebaer，“什么时候应该标记可见，为什么可以？”，7月1日10:53， https: //stackoverflow.com/a/38147398/1026459
