Question

我已经被困了一段时间了。我甚至无法在网上找到类似的情景。我有一个来自我教授的HTML文件，浏览器将其解释为纯文本。有人可以告诉我为什么吗？

浏览器：Google Chrome版本61.0.3163.79（官方版本）（64位）

＆＃13;

<!-- 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>

＆＃13;

Answer 1

此HTML不会被解释为纯文本：它被解释为HTML。

只是HTML的内容包含已转义的标记，例如<和>。

<强>更新

这是你想要的标记吗？

<!--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>

Answer 2

它可能是缺少的doctype，它告诉浏览器它正在查看哪种文档。在文件的最开头添加<!doctype html>。

Answer 3

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

更新

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

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

3 个答案: