为什么 Chrome 会在“pre”标签中加载我的 HTML？答案

【问题标题】：Why is Chrome loading my HTML in a "pre" tag?为什么 Chrome 会在“pre”标签中加载我的 HTML？
【发布时间】：2015-01-13 04:04:47
【问题描述】：

我有一个非常基本的网页，我正在加载一个 Arduino 服务器。当我在 Safari 上查看页面时，一切正常，并且在我使用检查器时看起来不错。但是当我在 Chrome（版本 39.0.2）上加载它时，它会将我的所有 HTML 包装在一个“pre”标签中，这会阻止我的网页加载（我附上了显示 Inspector 输出的屏幕截图）。它还将我的所有代码从“head”标签移到“body”标签中。首先，这是我的 HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>



    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

         <!-- LOAD THE JSON DATA -->
              <script type="text/javascript" src="data.txt"></script>
              <link rel="stylesheet" type="text/css" href="home.css">
              <script src="home.js" type="text/javascript"></script>




        <title>CANARI JR. | Home</title>

    </head>


<body onload="preparePage()">

<div id="container">


    <div id="headerDiv">

        <div id="logoDiv"><a href="/">
         <img src="cLogo.png"> 
        </div></a>





     </div>



<div id="contentDiv">


</div>



</div>
    </body>
</html>

现在当我检查我的页面时，我看到了这个：

它包裹了我所有的 HTML，实际上关闭了我的 body 和 html 标签之外的标签！

有人知道 Chrome 出了什么问题吗？

编辑 1 - 我正在使用 Arduino Ethernet Shield 从 SD 卡托管和加载此页面。（它在 Safari 上完美运行，所以我认为我的代码中有一些东西，而不是 Arduino 的问题）。

编辑 2 - 我附上了 Google Chrome Inspector 的屏幕截图（抱歉 - 复制和粘贴替换了很多字符，所以我去了屏幕截图路线 http://i.stack.imgur.com/d09k8.png

编辑 3 - 添加了来自 Chrome Inspector http://i.stack.imgur.com/zL7L1.png 的“网络”选项卡

【问题讨论】：

这段代码是 safari 告诉你的还是你的原始输出？当您在 chrome 中查看源代码时，它的外观如何。还可以查看 chrome 开发工具中的 Network 选项卡，了解您的页面提供的内容类型。
你能不能也分享一下 chrome 检查。我尝试了没有 js 的相同页面，它完美呈现。
我拥有的代码是我在 Sublime 文本编辑器中的原始 HTML 代码。在 Safari Inspector 中，它看起来一样并且加载完美。我添加了 chrome 检查输出。
当您的代码以 text/plain、没有任何内容类型或非常无效的 HTML 格式交付时，Chrome 会执行此操作。不过，您的屏幕截图并未显示检查器的 Network 选项卡。
@LJ_1102 是的！就是这样！我添加了 client.println("Content-Type: text/html");当我的 Arduino 服务器打开页面并修复时！这就是答案，所以如果您想发布它，我会接受它。非常感谢，困扰了我2个小时。奇怪它是如何与 Safari 一起工作的。

标签： javascript html google-chrome arduino

【解决方案1】：

根据您的截图，该页面带有Content-type: text/plain 标头。这会导致 chrome 将其显示在 pre 标记中，因为它假定您希望将 HTML 作为文本查看。您的网络服务器需要编写正确的 Content-type 标头。

如何使用 arduino 以太网屏蔽can be found here 编写标头的示例。

与上面链接的代码相反，您应该使用文件扩展名等动态确定内容类型。这样图像也会以正确的内容类型（例如image/jpg）传输。

【讨论】：

【解决方案2】：

为你的 POM 添加依赖

<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<scope>provided</scope>
</dependency>

【讨论】：

请在您的答案中添加一些解释，以便其他人可以从中学习。对我来说，应该编辑一些 POM 看起来很奇怪，因为 OP 没有提到类似的东西