如何在浏览器中查看我的代码?

时间:2017-09-21 03:01:15

标签: javascript html css

嗨天才程序员如何才能在我的网站上看到我的代码我正在制作一个网页教程,你可以看到代码,但我输入的代码总是在执行,任何人都可以帮我这个吗? 谢谢你们。

  <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    <body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>

5 个答案:

答案 0 :(得分:2)

您需要将所有<转换为&lt;,将所有>转换为&gt;并将所有内容转换为<pre>和{{ 1}}标签。像这样:

&#13;
&#13;
</pre>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

老式解决方案(自HTML3.2以来已弃用,在HTML5中删除/不鼓励)仍可正常工作,将所有内容包装在<xmp></xmp> (example) tag内。
这个想法是它可以保存任何字符串,除了表示xmp-closing标签开头的字符串:</xmp
除了它被永远弃用以外,还有浏览器不一致和其他麻烦(比如从firefox中的xmp复制文本会删除行尾,或者tab-character代表多少空格等)。

正确的方法是转义&<字符 (按此顺序)
无需逃避>:这只是神话,因为我们已经取出了开放标记字符<(我彻底检查了有关此内容的当前和历史规格)!

显然,在转发&字符之前转义<字符是因为<变为&#60;然后变为&38;#60;(显示为&#60;如果我们不是先从<个字符转义开始,而不是预期的&}!

然后,您可以将结果包装在任何标记内,例如<pre><code>或...

这会给你留下新线:
您可以使用<br>替换它们,也可以设置适当的css样式规则来控制白色间距(如果它们尚未像<pre> - 标记那样设置为默认值)。

直播示例:

<textarea style="width:99%;height:150px;"></textarea>
<button onclick="
  var txt=document.getElementsByTagName('textarea')[0];
  txt.value=txt.value.replace(/\u0026/g, '\u0026#38;').replace(/\u003c/g, '\u0026#60;');
">HTML-Escape (&#38;) and (&#60;)</button>

细则:
最大的跨浏览器(读古)兼容性是通过使用十进制转义获得的,因为后来添加并实现了十六进制转义。命名实体转义(如&amp)也有类似的问题(也在嵌入式javascript中),因为这些字符在预解析HTML时具有严重的状态!

理论上有一个更大的规则集,关于何时必须绝对替换&以及何时不需要(理论上你是不需要逃避所有&字符,主要是那些会提供一个有效的逃脱,这是一个自生活标准以来不断增长的清单。) 因此,最简单,最快捷的方法就是全部替换它们!不需要使用查找列表等的特殊算法。

答案 2 :(得分:0)

你可以试试这个。

function show_html(){
  var val = document.getElementsByTagName('textarea')[0].value
  val = val.replace(/</g, "&lt;").replace(/>/g, "&gt;");
  val = '<pre>'+val+'</pre>';
  document.getElementById('result').innerHTML = val
  }
<textarea id="html" onchange="javascript:show_html()"></textarea>

<p id="result">sdf</p>

答案 3 :(得分:0)

textContentinnerText可用于将HTML代码转换为纯字符串。您可以使用以下内容:

<textarea style="width:99%;height:150px;"></textarea>
<button onclick="
  var htmlText= document.getElementsByTagName('textarea')[0].value;
  
  var result = document.getElementById('result'); 
  result.innerText = htmlText;"
  >Convert HTML to plain text</button>

<div id="result" style="width:99%;height:150px;"></div>

答案 4 :(得分:-1)

点击f12获取开发者工具或按Ctrl + U获取源代码