如何在html頁面顯示<…>標籤內容
一般狀況下，咱們但願網頁能被正確的解析，頁面上不要出現多餘的html標籤。而有些時候咱們又但願可以顯示諸如「<body>」這樣的內容在段落中。javascript
爲了不html標籤被解析掉，找了以下幾種方法：css
一、將全部的「<」替換爲「<」，將全部的「>」替換爲「>」html
須要注意的是，html中一樣也能將<當成普通的字符顯示，這個時候須要將「&」替換爲「&」表示它只是一個普通的「&」值，跟在他後面的內容不構成可轉義的字符。html5
<h3>將全部的「<」替換爲「&lt;」;將全部的「>」替換爲「&gt;」</h3> <div> 對於 HTML 應用程序，一般建議把全部的腳本都放置在 <body> 元素的最底部。 這會提升網頁加載速度，由於 HTML 加載不受制於腳本加載。 在咱們的多個 AngularJS 實例中，您將看到 AngularJS 庫是在文檔的 <head> 區域被加載。 在咱們的實例中，AngularJS 在 <head> 元素中被加載，由於對 angular.module 的調用只能在庫加載完成後才能進行。 另外一個解決方案是在 <body> 元素中加載 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>將全部的「<」替換爲「&lt;」;將全部的「>」替換爲「&gt;」</h3>
<div>
對於 HTML 應用程序，一般建議把全部的腳本都放置在 <body> 元素的最底部。
這會提升網頁加載速度，由於 HTML 加載不受制於腳本加載。
在咱們的多個 AngularJS 實例中，您將看到 AngularJS 庫是在文檔的 <head> 區域被加載。
在咱們的實例中，AngularJS 在 <head> 元素中被加載，由於對 angular.module 的調用只能在庫加載完成後才能進行。
另外一個解決方案是在 <body> 元素中加載 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在頁面的最下面有一小行解釋，已截圖】
相關文章
- 1. html head標籤裏面的內容顯示在body裏面
- 2. HTML <label> 標籤
- 3. UEditor頁面顯示時 顯示標籤內容
- 4. HTML學習---------1.8 <em>,<strong>,<span>標籤
- 5. <[^>]+> 正則匹配HTML標籤
- 6. 【Web前端】HTML標籤iframe：在網頁內顯示網頁
- 7. 前臺HTML頁面顯示XML內容
- 8. <table>標籤中 如何固定<td> 寬度
- 9. 如何去掉html<a>標籤的hover數據
- 10. 如何在JSP頁面顯示mysql數據庫內容 （二）
- 更多相關文章...
- • SVG 在 HTML 頁面 - SVG 教程
- • HTML 頁面顯示 XML 數據 - XML 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
