如何在html页面显示<…>标签内容

最新推荐文章于 2025-02-20 19:37:20 发布

weixin_33768481

最新推荐文章于 2025-02-20 19:37:20 发布

阅读量5.1k

点赞数 1

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/1165991/blog/740896

版权

2019独角兽企业重金招聘Python工程师标准>>>

通常情况下，我们希望网页能被正确的解析，页面上不要出现多余的html标签。而有些时候我们又希望能够显示诸如“<body>”这样的内容在段落中。

为了避免html标签被解析掉，找了如下几种方法：

1、将所有的“<”替换为“<”，将所有的“>”替换为“>”

需要注意的是，html中同样也能将<当成普通的字符显示，这个时候需要将“&”替换为“&”表示它只是一个普通的“&”值，跟在他后面的内容不构成可转义的字符。

<h3>将所有的“<”替换为“&amp;lt;”;将所有的“>”替换为“&amp;gt;”</h3>
<div>
对于 HTML 应用程序，通常建议把所有的脚本都放置在 &lt;body&gt; 元素的最底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 &lt;head&gt; 区域被加载。
在我们的实例中，AngularJS 在 &lt;head&gt; 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。
另一个解决方案是在 &lt;body&gt; 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：	
</div>

2、在xmp标签中使用，xmp标签在html5中已经弃用，仅供参考

w3school给出的意见是这样的

<h3>在xmp标签中使用，xmp标签在html5中已经弃用，仅供参考</h3>
<xmp>
对于 HTML 应用程序，通常建议把所有的脚本都放置在 <body> 元素的最底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 <head> 区域被加载。
在我们的实例中，AngularJS 在 <head> 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。
另一个解决方案是在 <body> 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：
</xmp>

3、在textarea标签中显示

4、用javascript直接给innerText赋值

innerText中必须手动加上“\r\n”才能实现成功换行

<div id="myHtml">
	
</div>
<script type="text/javascript">
document.getElementById("myHtml").innerText = "对于 HTML 应用程序，通常建议把所有的脚本都放置在 <body> 元素的最底部。\r\n这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 <head> 区域被加载。\r\n在我们的实例中，AngularJS 在 <head> 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。\r\n另一个解决方案是在 <body> 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：";
</script>

不能解决问题的几种方法：

1、使用pre标签包裹（可以显示换行或者空格，但对html标签没什么用）：

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

<pre>
对于 HTML 应用程序，通常建议把所有的脚本都放置在 <body> 元素的最底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 <head> 区域被加载。
在我们的实例中，AngularJS 在 <head> 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。
另一个解决方案是在 <body> 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：
</pre>

2、用javascript直接给innerHTML赋值（注意innerText和innerHTML大小规律不同）

在innerHTML中，“\r\n”的换行符页面中没有效果，也不会显示出来，而是在html文档中产生了一个较好的排版。

<div id="myHtml">
	
</div>
<script type="text/javascript">
document.getElementById("myHtml").innerHTML = "对于 HTML 应用程序，通常建议把所有的脚本都放置在 <body> 元素的最底部。\r\n这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 <head> 区域被加载。\r\n在我们的实例中，AngularJS 在 <head> 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。\r\n另一个解决方案是在 <body> 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面："
</script>

完整代码（学习AngularJs贴学习内容时发现标签不能正确显示的这个问题）：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>AngularJs学习(15)</title>
</head>
<body>
<h1>AngularJS 模块</h1><br/>
<h2>添加指令：自定义指令</h2>
<div ng-app="myApp" runoob-directive>
	
</div>
<h2>什么时候载入库？</h2>
<h3>页面将所有的html标签都给转义了，不能正确显示</h3>
<div>
对于 HTML 应用程序，通常建议把所有的脚本都放置在 <body> 元素的最底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 <head> 区域被加载。
在我们的实例中，AngularJS 在 <head> 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。
另一个解决方案是在 <body> 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：	
</div>
<h3>将所有的“<”替换为“&amp;lt;”;将所有的“>”替换为“&amp;gt;”</h3>
<div>
对于 HTML 应用程序，通常建议把所有的脚本都放置在 &lt;body&gt; 元素的最底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 &lt;head&gt; 区域被加载。
在我们的实例中，AngularJS 在 &lt;head&gt; 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。
另一个解决方案是在 &lt;body&gt; 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：	
</div>
<h3>在xmp标签中使用，xmp标签在html5中已经弃用，仅供参考</h3>
<xmp>
对于 HTML 应用程序，通常建议把所有的脚本都放置在 <body> 元素的最底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 <head> 区域被加载。
在我们的实例中，AngularJS 在 <head> 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。
另一个解决方案是在 <body> 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：
</xmp>
<h3>在textarea标签中显示</h3>
<textarea style="width: 100%;height: 100px;">
对于 HTML 应用程序，通常建议把所有的脚本都放置在 <body> 元素的最底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 <head> 区域被加载。
在我们的实例中，AngularJS 在 <head> 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。
另一个解决方案是在 <body> 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：
</textarea>
<h3>用javascript直接给innerText赋值</h3>
<div id="myHtml">
	
</div>

<!-- 直接引用别的网站托管的angularjs -->
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.4/angular.min.js" ></script>
<script type="text/javascript">
var app = angular.module("myApp", []); //在模块定义中 [] 参数用于定义模块的依赖关系。中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。
app.directive("runoobDirective", function(){
	return {
		template:"我在指令构造器中创建！"
	}
});

document.getElementById("myHtml").innerText = "对于 HTML 应用程序，通常建议把所有的脚本都放置在 <body> 元素的最底部。\r\n这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 <head> 区域被加载。\r\n在我们的实例中，AngularJS 在 <head> 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。\r\n另一个解决方案是在 <body> 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面："
</script>
</body>
</html>

参考：