为什么 Chrome 将我的 HTML 加载到 "pre" 标签中?
Why is Chrome loading my HTML in a "pre" tag?
我有一个非常基本的网页,我正在使用 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 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
的 "Network" 选项卡
根据您的截图,该页面随 Content-type: text/plain
header 交付。
这导致 chrome 将其显示在 pre
标记中,因为它假定您希望将 HTML 作为文本查看。
您的网络服务器需要编写一个正确的 Content
类型的 header.
如何使用 arduino 以太网屏蔽 can be found here.
编写 headers 的示例
与上面链接的代码相反,您应该动态地确定 content-type,使用诸如文件扩展名之类的东西。这样图像也会以正确的content-type(例如image/jpg
)传输。
将依赖项添加到您的 POM
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<scope>provided</scope>
</dependency>
我有一个非常基本的网页,我正在使用 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 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
的 "Network" 选项卡根据您的截图,该页面随 Content-type: text/plain
header 交付。
这导致 chrome 将其显示在 pre
标记中,因为它假定您希望将 HTML 作为文本查看。
您的网络服务器需要编写一个正确的 Content
类型的 header.
如何使用 arduino 以太网屏蔽 can be found here.
编写 headers 的示例与上面链接的代码相反,您应该动态地确定 content-type,使用诸如文件扩展名之类的东西。这样图像也会以正确的content-type(例如image/jpg
)传输。
将依赖项添加到您的 POM
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<scope>provided</scope>
</dependency>