如何在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在頁面的最下面有一小行解釋，已截圖】

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。