繁体   English   中英

为什么这个 HTML 在浏览器中显示为纯文本?

[英]Why is this HTML showing up as plain text in browser?

我被这件事难住了一段时间。 我什至在网上找不到类似的场景。 我有一个来自教授的 HTML 文件,浏览器将其解释为纯文本。 有人能告诉我为什么吗?

浏览器:Google Chrome 版本 61.0.3163.79(官方版本)(64 位)

 <!-- saved from url=(0062)http://csf11.acs.uwosh.edu/371-17/demos/helloworld/square.html --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div class="line-gutter-backdrop"></div> <table> <tbody> <tr> <td class="line-number" value="1"></td> <td class="line-content"><span class="html-comment">&lt;!--square.html--&gt;</span></td> </tr> <tr> <td class="line-number" value="2"></td> <td class="line-content"><span class="html-doctype">&lt;!DOCTYPE html&gt;</span></td> </tr> <tr> <td class="line-number" value="3"></td> <td class="line-content"><span class="html-tag">&lt;html&gt;</span></td> </tr> <tr> <td class="line-number" value="4"></td> <td class="line-content"><br></td> </tr> <tr> <td class="line-number" value="5"></td> <td class="line-content"><br></td> </tr> <tr> <td class="line-number" value="6"></td> <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">id</span>="<span class="html-attribute-value">vertex-shader</span>" <span class="html-attribute-name">type</span>="<span class="html-attribute-value">x-shader/x-vertex</span>"&gt;</span> </td> </tr> <tr> <td class="line-number" value="7"></td> <td class="line-content"> // GLSL vertex shader code</td> </tr> <tr> <td class="line-number" value="8"></td> <td class="line-content"> attribute vec4 vPosition; </td> </tr> <tr> <td class="line-number" value="9"></td> <td class="line-content"><br></td> </tr> <tr> <td class="line-number" value="10"></td> <td class="line-content"> void main()</td> </tr> <tr> <td class="line-number" value="11"></td> <td class="line-content"> {</td> </tr> <tr> <td class="line-number" value="12"></td> <td class="line-content"> gl_Position = vPosition; </td> </tr> <tr> <td class="line-number" value="13"></td> <td class="line-content"> }</td> </tr> <tr> <td class="line-number" value="14"></td> <td class="line-content"> <span class="html-tag">&lt;/script&gt;</span></td> </tr> <tr> <td class="line-number" value="15"></td> <td class="line-content"><br></td> </tr> <tr> <td class="line-number" value="16"></td> <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">id</span>="<span class="html-attribute-value">fragment-shader</span>" <span class="html-attribute-name">type</span>="<span class="html-attribute-value">x-shader/x-fragment</span>"&gt;</span> </td> </tr> <tr> <td class="line-number" value="17"></td> <td class="line-content"> // GLSL fragment shader code</td> </tr> <tr> <td class="line-number" value="18"></td> <td class="line-content"> precision mediump float;</td> </tr> <tr> <td class="line-number" value="19"></td> <td class="line-content"><br></td> </tr> <tr> <td class="line-number" value="20"></td> <td class="line-content"> void main()</td> </tr> <tr> <td class="line-number" value="21"></td> <td class="line-content"> {</td> </tr> <tr> <td class="line-number" value="22"></td> <td class="line-content"> gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );</td> </tr> <tr> <td class="line-number" value="23"></td> <td class="line-content"> }</td> </tr> <tr> <td class="line-number" value="24"></td> <td class="line-content"> <span class="html-tag">&lt;/script&gt;</span></td> </tr> <tr> <td class="line-number" value="25"></td> <td class="line-content"><br></td> </tr> <tr> <td class="line-number" value="26"></td> <td class="line-content"> <span class="html-comment">&lt;!--Include A/S WebGL support libraries--&gt;</span></td> </tr> <tr> <td class="line-number" value="27"></td> <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank" href="http://csf11.acs.uwosh.edu/371-17/demos/Common/webgl-utils.js">../Common/webgl-utils.js</a>"&gt;</span><span class="html-tag">&lt;/script&gt;</span></td> </tr> <tr> <td class="line-number" value="28"></td> <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank" href="http://csf11.acs.uwosh.edu/371-17/demos/Common/initShaders.js">../Common/initShaders.js</a>"&gt;</span><span class="html-tag">&lt;/script&gt;</span></td> </tr> <tr> <td class="line-number" value="29"></td> <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank" href="http://csf11.acs.uwosh.edu/371-17/demos/Common/MV.js">../Common/MV.js</a>"&gt;</span><span class="html-tag">&lt;/script&gt;</span></td> </tr> <tr> <td class="line-number" value="30"></td> <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank" href="http://csf11.acs.uwosh.edu/371-17/demos/Common/webgl-debug.js">../Common/webgl-debug.js</a>"&gt;</span><span class="html-tag">&lt;/script&gt;</span></td> </tr> <tr> <td class="line-number" value="31"></td> <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank" href="http://csf11.acs.uwosh.edu/371-17/demos/helloworld/square.js">square.js</a>"&gt;</span><span class="html-tag">&lt;/script&gt;</span></td> </tr> <tr> <td class="line-number" value="32"></td> <td class="line-content"><br></td> </tr> <tr> <td class="line-number" value="33"></td> <td class="line-content"> <span class="html-tag">&lt;body&gt;</span></td> </tr> <tr> <td class="line-number" value="34"></td> <td class="line-content"> <span class="html-tag">&lt;canvas <span class="html-attribute-name">id</span>="<span class="html-attribute-value">gl-canvas</span>" <span class="html-attribute-name">width</span>="<span class="html-attribute-value">512</span>" <span class="html-attribute-name">height</span>=" <span class="html-attribute-value">512</span>"&gt;</span>&gt;</td> </tr> <tr> <td class="line-number" value="35"></td> <td class="line-content"> Oops ... your browser doesn't support the HTML5 canvas element</td> </tr> <tr> <td class="line-number" value="36"></td> <td class="line-content"> <span class="html-tag">&lt;/canvas&gt;</span></td> </tr> <tr> <td class="line-number" value="37"></td> <td class="line-content"> <span class="html-tag">&lt;/body&gt;</span></td> </tr> <tr> <td class="line-number" value="38"></td> <td class="line-content"><span class="html-tag">&lt;/html&gt;</span></td> </tr> <tr> <td class="line-number" value="39"></td> <td class="line-content"><span class="html-end-of-file"></span></td> </tr> </tbody> </table> </body> </html>

这个 HTML 没有被解释为纯文本:它被解释为 HTML。

只是你的 HTML 的内容中包含了被转义的标记,比如&lt; &gt; .

更新

这是你想要的标记吗?

<!--square.html-->
<!DOCTYPE html>
<html>


<script id="vertex-shader" type="x-shader/x-vertex">
// GLSL vertex shader code
attribute vec4 vPosition;

void main()
{
gl_Position = vPosition;
}
</script>

<script id="fragment-shader" type="x-shader/x-fragment">
// GLSL fragment shader code
precision mediump float;

void main()
{
gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );
}
</script>

<!--Include A/S WebGL support libraries-->
<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script type="text/javascript" src="../Common/webgl-debug.js"></script>
<script type="text/javascript" src="square.js"></script>

<body>
<canvas id="gl-canvas" width="512" height=" 512">>
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>

好的,这很有趣,但请确保您使用 nodepad++ 而不是记事本编辑和保存文件。 正如您在下面看到的,我创建了 3 个文件试图在 localhost 上运行 html 代码,one.html 和 two.php 是通过记事本创建的,但是 three.html(使用 notepad++ 创建)似乎可以工作。 在此处输入图像描述

它可能是缺少的文档类型,它告诉浏览器它正在查看什么样的文档。 在文件的最开始添加<!doctype html>

尝试在标题中添加<title>title</title>

更新

您的代码没有任何问题。 它实际上会输出like和html代码。 逐行检查您的代码。

 <!-- saved from url=(0062)http://csf11.acs.uwosh.edu/371-17/demos/helloworld/square.html --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div class="line-gutter-backdrop"></div> <table> <tbody> <tr> <td class="line-number" value="1"></td> <td class="line-content"><span class="html-comment">&lt;!--square.html--&gt;</span></td> </tr> <tr> <td class="line-number" value="2"></td> <td class="line-content"><span class="html-doctype">&lt;!DOCTYPE html&gt;</span></td> </tr> <tr> <td class="line-number" value="3"></td> <td class="line-content"><span class="html-tag">&lt;html&gt;</span></td> </tr> <tr> <td class="line-number" value="4"></td> <td class="line-content"><br></td> </tr> <tr> <td class="line-number" value="5"></td> <td class="line-content"><br></td> </tr> <tr> <td class="line-number" value="6"></td> <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">id</span>="<span class="html-attribute-value">vertex-shader</span>" <span class="html-attribute-name">type</span>="<span class="html-attribute-value">x-shader/x-vertex</span>"&gt;</span> </td> </tr> <tr> <td class="line-number" value="7"></td> <td class="line-content"> // GLSL vertex shader code</td> </tr> <tr> <td class="line-number" value="8"></td> <td class="line-content"> attribute vec4 vPosition; </td> </tr> <tr> <td class="line-number" value="9"></td> <td class="line-content"><br></td> </tr> <tr> <td class="line-number" value="10"></td> <td class="line-content"> void main()</td> </tr> <tr> <td class="line-number" value="11"></td> <td class="line-content"> {</td> </tr> <tr> <td class="line-number" value="12"></td> <td class="line-content"> gl_Position = vPosition; </td> </tr> <tr> <td class="line-number" value="13"></td> <td class="line-content"> }</td> </tr> <tr> <td class="line-number" value="14"></td> <td class="line-content"> <span class="html-tag">&lt;/script&gt;</span></td> </tr> <tr> <td class="line-number" value="15"></td> <td class="line-content"><br></td> </tr> <tr> <td class="line-number" value="16"></td> <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">id</span>="<span class="html-attribute-value">fragment-shader</span>" <span class="html-attribute-name">type</span>="<span class="html-attribute-value">x-shader/x-fragment</span>"&gt;</span> </td> </tr> <tr> <td class="line-number" value="17"></td> <td class="line-content"> // GLSL fragment shader code</td> </tr> <tr> <td class="line-number" value="18"></td> <td class="line-content"> precision mediump float;</td> </tr> <tr> <td class="line-number" value="19"></td> <td class="line-content"><br></td> </tr> <tr> <td class="line-number" value="20"></td> <td class="line-content"> void main()</td> </tr> <tr> <td class="line-number" value="21"></td> <td class="line-content"> {</td> </tr> <tr> <td class="line-number" value="22"></td> <td class="line-content"> gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );</td> </tr> <tr> <td class="line-number" value="23"></td> <td class="line-content"> }</td> </tr> <tr> <td class="line-number" value="24"></td> <td class="line-content"> <span class="html-tag">&lt;/script&gt;</span></td> </tr> <tr> <td class="line-number" value="25"></td> <td class="line-content"><br></td> </tr> <tr> <td class="line-number" value="26"></td> <td class="line-content"> <span class="html-comment">&lt;!--Include A/S WebGL support libraries--&gt;</span></td> </tr> <tr> <td class="line-number" value="27"></td> <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank" href="http://csf11.acs.uwosh.edu/371-17/demos/Common/webgl-utils.js">../Common/webgl-utils.js</a>"&gt;</span><span class="html-tag">&lt;/script&gt;</span></td> </tr> <tr> <td class="line-number" value="28"></td> <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank" href="http://csf11.acs.uwosh.edu/371-17/demos/Common/initShaders.js">../Common/initShaders.js</a>"&gt;</span><span class="html-tag">&lt;/script&gt;</span></td> </tr> <tr> <td class="line-number" value="29"></td> <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank" href="http://csf11.acs.uwosh.edu/371-17/demos/Common/MV.js">../Common/MV.js</a>"&gt;</span><span class="html-tag">&lt;/script&gt;</span></td> </tr> <tr> <td class="line-number" value="30"></td> <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank" href="http://csf11.acs.uwosh.edu/371-17/demos/Common/webgl-debug.js">../Common/webgl-debug.js</a>"&gt;</span><span class="html-tag">&lt;/script&gt;</span></td> </tr> <tr> <td class="line-number" value="31"></td> <td class="line-content"> <span class="html-tag">&lt;script <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/javascript</span>" <span class="html-attribute-name">src</span>="<a class="html-attribute-value html-resource-link" target="_blank" href="http://csf11.acs.uwosh.edu/371-17/demos/helloworld/square.js">square.js</a>"&gt;</span><span class="html-tag">&lt;/script&gt;</span></td> </tr> <tr> <td class="line-number" value="32"></td> <td class="line-content"><br></td> </tr> <tr> <td class="line-number" value="33"></td> <td class="line-content"> <span class="html-tag">&lt;body&gt;</span></td> </tr> <tr> <td class="line-number" value="34"></td> <td class="line-content"> <span class="html-tag">&lt;canvas <span class="html-attribute-name">id</span>="<span class="html-attribute-value">gl-canvas</span>" <span class="html-attribute-name">width</span>="<span class="html-attribute-value">512</span>" <span class="html-attribute-name">height</span>=" <span class="html-attribute-value">512</span>"&gt;</span>&gt;</td> </tr> <tr> <td class="line-number" value="35"></td> <td class="line-content"> Oops ... your browser doesn't support the HTML5 canvas element</td> </tr> <tr> <td class="line-number" value="36"></td> <td class="line-content"> <span class="html-tag">&lt;/canvas&gt;</span></td> </tr> <tr> <td class="line-number" value="37"></td> <td class="line-content"> <span class="html-tag">&lt;/body&gt;</span></td> </tr> <tr> <td class="line-number" value="38"></td> <td class="line-content"><span class="html-tag">&lt;/html&gt;</span></td> </tr> <tr> <td class="line-number" value="39"></td> <td class="line-content"><span class="html-end-of-file"></span></td> </tr> </tbody> </table> </body> </html>

内容可能不是 html 类型。 我犯了一个类似的错误,想知道为什么它显示为文本。 检查文件的内容,很可能它不是 HTML 或某些 html 标记必须丢失。 确保 Doc 类型在文档开头明确提及为 HTML 类型。

<!DOCTYPE html>

代码绝对没有问题。 甚至<!DOCTYPE html>都不会对其产生影响。 浏览器中显示的是 HTML 代码的内容,而不是代码本身。 浏览器中显示的内容是使用 HTML 实体编写的&lt; &gt; 它们分别用于<> 这些实体用于阻止代码示例运行,而不是显示在浏览器中,尤其是当您想向某人解释某些代码并且他们需要将代码作为示例来查看时。 所以,我认为编写这些代码的人想把它用作他/她的学生的讲座,可能还没有写描述。 示例:如果我在下面编写类似这样的代码,

 <!DOCTYPE html> <html> <body> <p>This is how to write the form tag</p> <!--Take note of this particular bolded code because that's where the point lies--> <b>&lt;form&gt;&lt;/form&gt;</b> </body> </html>
结果将是这样的:

  这是如何编写表单标签
   <表格></表格>

单击此处阅读有关 w3schools 的 HTML 实体的更多信息。 这是我作为初学者第一次使用 Stack Overflow 平台解释某些东西时所能解释的最好的东西。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM