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

时间 2019-11-11

标签如何 html 页面显示标签内容栏目 HTML 繁體版

原文原文链接

一般状况下，咱们但愿网页能被正确的解析，页面上不要出现多余的html标签。而有些时候咱们又但愿可以显示诸如“<body>”这样的内容在段落中。javascript

为了不html标签被解析掉，找了以下几种方法：css

一、将全部的“<”替换为“<”，将全部的“>”替换为“>”html

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

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

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

w3school给出的意见是这样的angularjs

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

三、在textarea标签中显示app

四、用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>

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

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

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

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

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

二、用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>

参考：

http://www.w3school.com.cn/tags/tag_pre.asp【HTML <pre> 标签】
http://www.w3school.com.cn/tags/tag_code.asp【HTML <code> 标签】
http://www.w3school.com.cn/tags/index.asp【xmp在页面的最下面有一小行解释，已截图】