Question

在html中我使用的代码标签如下所示，我也使用css，如下所示： -

<style type="text/css">
    code { white-space: pre; }
</style>


<code>
    public static ArrayList<File> getFiles(File[] files){
        ArrayList<File> _files = new ArrayList<File>();    
        for (int i=0; i<files.length; i++)
            if (files[i].isDirectory())
                _files.addAll(getFiles(new File(files[i].toString()).listFiles()));
            else 
                _files.add(files[i]);
        return _files;
    } 

    public static File[] getAllFiles(File[] files) {
        ArrayList<File> fs = getFiles(files);
        return (File[]) fs.toArray(new File[fs.size()]); 
    }
</code>

当我使用上面显示的代码标签时，在查看时，html页面中缺少某些部分代码。当查看上面的html页面时，输出如下所示： -

public static ArrayList getFiles(File[] files){
        ArrayList _files = new ArrayList();    
        for (int i=0; i fs = getFiles(files);
        return (File[]) fs.toArray(new File[fs.size()]); 
    }

在第一种方法中，某些部分缺失，第二种方法根本没有出现。问题是什么以及如何解决？

Answer 1

您的<File>代码中包含这些<code>，您需要将其转换为<和> html实体

Demo

<code>
    public static ArrayList&lt;File&gt; getFiles(File[] files){
        ArrayList&lt;File&gt; _files = new ArrayList&lt;File&gt;();    
        for (int i=0; i&lt;files.length; i++)
            if (files[i].isDirectory())
                _files.addAll(getFiles(new File(files[i].toString()).listFiles()));
            else 
                _files.add(files[i]);
        return _files;
    } 

    public static File[] getAllFiles(File[] files) {
        ArrayList&lt;File&gt; fs = getFiles(files);
        return (File[]) fs.toArray(new File[fs.size()]); 
    }
</code>

Answer 2

正如Alien先生已经确定的那样，您的<code>区块中的字符被解释为标记。

作为转义大量字符的替代方法，提供代码不包含字符串</script，您可以利用<script>元素的解析和（非）执行行为，如下所示：

<code>
    <script type="text/x-code">
    public static ArrayList<File> getFiles(File[] files){
        ArrayList<File> _files = new ArrayList<File>();    
        for (int i=0; i<files.length; i++)
            if (files[i].isDirectory())
                _files.addAll(getFiles(new File(files[i].toString()).listFiles()));
            else 
        _files.add(files[i]);
        return _files;
    } 

    public static File[] getAllFiles(File[] files) {
        ArrayList<File> fs = getFiles(files);
        return (File[]) fs.toArray(new File[fs.size()]); 
    }
    </script>
</code>

使用这个CSS：

script[type=text\/x-code] { 
  display: block; 
  white-space: pre; 
  line-height: 20px; 
  margin-top: -20px;
}

见JSfiddle：http://jsfiddle.net/fZuPm/3/

更新：在评论中，RoToRa对这种方法的“正确性”提出了一些有趣的观点，我感谢RoToRa。

使用type属性来停止脚本标记的内容被执行为JavaScript是一种很好理解的技术，虽然导致脚本执行的类型名称列表因浏览器而异，但找到一个赢得'导致执行并不难。

更有趣的是语义问题。我认为脚本元素的语义基本上是惰性的，就像div或span元素一样，而RoToRa的观点是它会影响内容的语义。看看规格，要解决这个问题并不容易。 HTML 4.01对脚本元素的语义几乎没有说明，只关注它的功能。

HTML5规范并没有好多少，但确实说“该元素不代表用户的内容。”。我不知道该怎么做。说一个元素不做什么并不是很有帮助。如果它暗示其内容在语义上是“隐藏”的，那么它的内容在语义上不是包含代码元素的内容的一部分，那么就不应该使用这种技术。

但是，如果它意味着脚本元素没有引入新的语义，那么似乎没有任何问题。

我找不到任何证据表明脚本元素在语义上需要包含脚本，正如RoToRa所建议的那样，虽然推断它可能被认为是常识，但这并不是HTML语义的工作原理。

在许多方面，这种方法实际上是试图找到一种方法来有效地完成XMP元素在浏览器中的作用，但是无效。 XMP几乎在HTML5中有效，但错过了。编辑器将其描述为tough call。使用这样的脚本元素符合该要求，但它似乎仍然存在争议。如果您对所使用的语义感到不舒服，请使用此方法，我建议您不要使用它。

html中的代码标记和pre css无法正常运行

2 个答案: