Chrome为什么要在"pre"窗口中加载我的HTML文件?标签? [英] Why is Chrome loading my HTML in a "pre" tag?
问题描述
我有一个非常基本的网页，正在用Arduino服务器加载.当我在Safari上查看页面时，使用检查器时一切正常，并且看起来不错.但是，当我在Chrome(版本39.0.2)上加载它时，它会将我的所有HTML包裹在一个"pre"标签中，从而阻止了我的网页加载(我已经附上了显示Inspector输出的屏幕截图).它还会将我所有的代码移出"head"标签，并移入"body"标签.首先，这是我的HTML:
I have a very basic web page that I'm loading with an Arduino Server. When I view the page on Safari, everything works fine and looks good when I use the inspector. But when I load it on Chrome (version 39.0.2), it wraps all of my HTML in a "pre" tag which prevents my webpage from loading (I've attached screenshots showing the Inspector output). It also moves all of my code out of the "head" tag and into the "body" tag. First, here is my 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>
现在，当我检查页面时，会看到以下内容:
Now when I inspect my page, I see this:
它包裹了我所有的HTML，实际上关闭了我的身体和html标签之外的标签！
And it wraps around all my HTML and actually closes the tag outside of my body and html tag!
有人看到Chrome出了什么问题吗?
Anyone see what is going wrong here in Chrome?
编辑1-我正在使用Arduino以太网盾来托管和从SD卡加载此页面. (它可以在Safari上完美运行，因此我认为我的代码中存在某些问题，而Arduino则没有问题.)
Edit 1 - I am using an Arduino Ethernet Shield to host and load this page from an SD card. (It works perfectly on Safari, so I'm thinking there's something in my code and not an issue with Arduino).
编辑2-我已附加了Google Chrome浏览器检查器的屏幕截图(抱歉-复制和粘贴替换了很多字符，因此我选择了屏幕截图路线 http://i.stack.imgur.com/d09k8.png
Edit 2 - I've attached screenshot of the Google Chrome Inspector (sorry - copy and pasting replaced a lot of the characters, so I went screenshot route http://i.stack.imgur.com/d09k8.png
编辑3-从Chrome检查器中添加了网络"标签 http://i.stack.imgur .com/zL7L1.png
Edit 3 - Added "Network" Tab from Chrome Inspector http://i.stack.imgur.com/zL7L1.png
推荐答案
根据您的截图，页面将带有Content-type: text/plain标头.
假设您想以文本形式查看HTML，这会导致chrome将其显示在pre标记中.
您的网络服务器需要编写一个正确的Content类型标头.
According to your sceenshots the page is delivered with the Content-type: text/plain header.
This leads chrome to display it in a pre tag as it assumes you want to view the HTML as text.
Your webserver needs to write a proper Content-type header.
如何使用arduino以太网屏蔽写入标头的示例可以在此处找到.
An example of how to write headers using the arduino ethernet shield can be found here.
与上面链接的代码相反，您应该使用文件扩展名之类的方法动态确定内容类型.这样一来，图像也将以正确的内容类型(例如image/jpg)进行传输.
Contrary to the code linked above, you should determine the content-type dynamically, using something like the file extension. So that images are transferred with the correct content-type(for example image/jpg) aswell.
这篇关于Chrome为什么要在"pre"窗口中加载我的HTML文件?标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
