为什么 Chrome 会在“pre”标记中加载我的 HTML

Why is Chrome loading my HTML in a "pre" tag?

本文关键字：加载 我的 HTML Chrome 会在 pre 为什么      更新时间：2023-09-26

我有一个非常基本的网页，我正在使用Arduino服务器加载。 当我在 Safari 上查看页面时，一切正常，使用检查器时看起来不错。 但是当我在 Chrome（版本 39.0.2）上加载它时，它会将所有 HTML 包装在一个"pre"标签中，这会阻止我的网页加载（我附上了显示检查器输出的屏幕截图）。 它还将我的所有代码从"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，实际上关闭了我身体和 html 标签之外的标签！

有人看到Chrome中出了什么问题吗？

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

编辑 2 - 我附上了谷歌浏览器检查器的屏幕截图（抱歉 - 复制和粘贴替换了很多字符，所以我去了屏幕截图路线https://i.stack.imgur.com/d09k8.png

编辑 3 - 添加了 Chrome 检查器 https://i.stack.imgur.com/zL7L1.png 中的"网络"标签页

根据您的场景照片，页面与Content-type: text/plain标题一起交付。这会导致 chrome 将其显示在 pre 标记中，因为它假定您希望以文本形式查看 HTML。您的 Web 服务器需要编写正确的 Content 类型标头。

有关如何使用 arduino 以太网扩展板编写标头的示例，请参见此处。

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

将依赖关系添加到您的 POM

<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<scope>provided</scope>
</dependency>
相关文章：