Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
356 views
in Technique[技术] by (71.8m points)

javascript - Why is this HTML showing up as plain text in browser?

I've been stumped on this for a while. I can't even find a similar scenario online. I have an HTML file from my professor that the browser interprets as plain text. Can someone tell me why?

Browser: Google Chrome Version 61.0.3163.79 (Official Build) (64-bit)

<!-- 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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

This HTML isn't being interpreted as plain text: it's being interpreted as HTML.

It's just that the contents of your HTML include markup that has been escaped, such as &lt; and &gt;.

Update

Is this the markup you want?

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...