為什么這個 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"><!--square.html--></span></td> </tr> <tr> <td class="line-number" value="2"></td> <td class="line-content"><span class="html-doctype"><!DOCTYPE html></span></td> </tr> <tr> <td class="line-number" value="3"></td> <td class="line-content"><span class="html-tag"><html></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"><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>"></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"></script></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"><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>"></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"></script></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"><!--Include A/S WebGL support libraries--></span></td> </tr> <tr> <td class="line-number" value="27"></td> <td class="line-content"> <span class="html-tag"><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>"></span><span class="html-tag"></script></span></td> </tr> <tr> <td class="line-number" value="28"></td> <td class="line-content"> <span class="html-tag"><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>"></span><span class="html-tag"></script></span></td> </tr> <tr> <td class="line-number" value="29"></td> <td class="line-content"> <span class="html-tag"><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>"></span><span class="html-tag"></script></span></td> </tr> <tr> <td class="line-number" value="30"></td> <td class="line-content"> <span class="html-tag"><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>"></span><span class="html-tag"></script></span></td> </tr> <tr> <td class="line-number" value="31"></td> <td class="line-content"> <span class="html-tag"><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>"></span><span class="html-tag"></script></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"><body></span></td> </tr> <tr> <td class="line-number" value="34"></td> <td class="line-content"> <span class="html-tag"><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>"></span>></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"></canvas></span></td> </tr> <tr> <td class="line-number" value="37"></td> <td class="line-content"> <span class="html-tag"></body></span></td> </tr> <tr> <td class="line-number" value="38"></td> <td class="line-content"><span class="html-tag"></html></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>
7 個解決方案
解決方案1
4 已采納 2017-09-08 03:00:18
這個 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>
解決方案2
1 2022-01-19 20:00:45
好的，這很有趣，但請確保您使用 nodepad++ 而不是記事本編輯和保存文件。 正如您在下面看到的，我創建了 3 個文件試圖在 localhost 上運行 html 代碼，one.html 和 two.php 是通過記事本創建的，但是 three.html（使用 notepad++ 創建）似乎可以工作。
解決方案3
0 2017-09-08 02:49:20
它可能是缺少的文檔類型，它告訴瀏覽器它正在查看什么樣的文檔。 在文件的最開始添加<!doctype html> 。
解決方案4
0 2017-09-08 02:51:46
嘗試在標題中添加<title>title</title> 。
更新
您的代碼沒有任何問題。 它實際上會輸出like和html代碼。 逐行檢查您的代碼。
解決方案5
0 2021-09-26 13:00:22
<!-- 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"><!--square.html--></span></td> </tr> <tr> <td class="line-number" value="2"></td> <td class="line-content"><span class="html-doctype"><!DOCTYPE html></span></td> </tr> <tr> <td class="line-number" value="3"></td> <td class="line-content"><span class="html-tag"><html></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"><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>"></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"></script></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"><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>"></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"></script></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"><!--Include A/S WebGL support libraries--></span></td> </tr> <tr> <td class="line-number" value="27"></td> <td class="line-content"> <span class="html-tag"><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>"></span><span class="html-tag"></script></span></td> </tr> <tr> <td class="line-number" value="28"></td> <td class="line-content"> <span class="html-tag"><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>"></span><span class="html-tag"></script></span></td> </tr> <tr> <td class="line-number" value="29"></td> <td class="line-content"> <span class="html-tag"><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>"></span><span class="html-tag"></script></span></td> </tr> <tr> <td class="line-number" value="30"></td> <td class="line-content"> <span class="html-tag"><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>"></span><span class="html-tag"></script></span></td> </tr> <tr> <td class="line-number" value="31"></td> <td class="line-content"> <span class="html-tag"><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>"></span><span class="html-tag"></script></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"><body></span></td> </tr> <tr> <td class="line-number" value="34"></td> <td class="line-content"> <span class="html-tag"><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>"></span>></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"></canvas></span></td> </tr> <tr> <td class="line-number" value="37"></td> <td class="line-content"> <span class="html-tag"></body></span></td> </tr> <tr> <td class="line-number" value="38"></td> <td class="line-content"><span class="html-tag"></html></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>
解決方案6
0 2021-11-19 10:41:05
內容可能不是 html 類型。 我犯了一個類似的錯誤，想知道為什么它顯示為文本。 檢查文件的內容，很可能它不是 HTML 或某些 html 標記必須丟失。 確保 Doc 類型在文檔開頭明確提及為 HTML 類型。
<!DOCTYPE html>
解決方案7
0 2022-07-18 23:27:04
代碼絕對沒有問題。 甚至<!DOCTYPE html>都不會對其產生影響。 瀏覽器中顯示的是 HTML 代碼的內容，而不是代碼本身。 瀏覽器中顯示的內容是使用 HTML 實體編寫的< 和> 它們分別用於<和> 。 這些實體用於阻止代碼示例運行，而不是顯示在瀏覽器中，尤其是當您想向某人解釋某些代碼並且他們需要將代碼作為示例來查看時。 所以，我認為編寫這些代碼的人想把它用作他/她的學生的講座，可能還沒有寫描述。 示例：如果我在下面編寫類似這樣的代碼，
<!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><form></form></b> </body> </html>
這是如何編寫表單標簽 <表格></表格>
單擊此處閱讀有關 w3schools 的 HTML 實體的更多信息。 這是我作為初學者第一次使用 Stack Overflow 平台解釋某些東西時所能解釋的最好的東西。
為什么 PHP Ajax 顯示 HTML 而不是純文本？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.