如何在html標籤不被解析的顯示在html頁面上

阿新 • • 發佈：2019-01-16

有三樣標籤可以用：

1、<xmp>
2、<pre>
3、<code>

不過，MDN上這樣說：

Note: Do not use this element(<xmp>).
It has been deprecated since HTML3.2 and was not implemented in a consistent way. It was completely removed from the language in HTML5.
Use the <pre> element or, if semantically adequate, the 
 <code> element instead. Note that you will need to escape the '<' character as '&lt;' to make sure it is not interpreted as markup.
A monospaced font can also be obtained on any element, by applying an adequate CSS style using monospace as the generic-font value for the font-family property 
.

所以，

<xmp>被淘汰了，但它是不轉義標籤，最好用的標籤。目前在各個瀏覽器測試用了也還能支援。
下面我們看看，各種標籤下如何讓html標籤不被解析到html頁面上。

程式碼和用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<xmp>
    <div>xmp:你可以顯示程式碼嗎？</div 
>
</xmp>
<pre>
    &lt;div&gt;
    pre: 你可以顯示程式碼麼？
    &lt;/div&gt;
</pre>
<code>
    &lt;div&gt;
    code: 你可以顯示程式碼麼？
    &lt;/div&gt;
</code>
</body>
</html>

效果：
這裡寫圖片描述

如何在html標籤不被解析的顯示在html頁面上

有三樣標籤可以用： 1、<xmp> 2、<pre> 3、<code> 不過，MDN上這樣說： Note: Do not use this element

HTML標簽文本內容正常顯示而不被解析

方式 col html標簽 htm display 直接 microsoft 轉義 post 要想html標簽在html頁面正常顯示而不被解析：最簡單的方式有3種　　1，用xmp標簽包裹內容，代碼如下：　　 1 <xmp><a>

讓html標籤顯示在頁面上

兩種方式： 1. <xmp>標籤這樣<xmp>標籤裡面的內容將原封不動的顯示出來。　　例如　　<xmp> <table> <tr> <th width="140">a</td&g

react、vue獲取html標籤顯示在頁面上

React： <div dangerouslySetInnerHTML = {{ __html:this.state.show.description }}></div> V

如何輸出html原始碼，對html程式碼不進行解析

我們知道，瀏覽器會自動解析html程式碼，直接輸出解析後的效果。但有時我們希望輸出程式碼結構，並不想被解析，有辦法做到嗎？答案是肯定的，下面介紹下直接輸出原始碼的方法。方法一：<xmp>標籤把不需要被解析的html程式碼放入標籤<xmp><\xmp>

html 標籤不能巢狀

說明：a標籤不能巢狀，若a標籤中嵌套了a標籤，瀏覽器會自動新增結束符號，故不能巢狀例如: <a href="www.baidu.com">百度<a href="www.weather.com.cn">中國天氣網</a></a>

讓html標籤以正常文字顯示（評論模組中防止使用者提交惡意的html或javascipt程式碼）

大部分的網站都提供有評論模組以供使用者發表自己的觀點，但是如何防止使用者輸入有惡意攻擊js指令碼呢？比如<script>alert('惡意彈窗')</script>。第一種方法很簡單，使用<xmp></xmp&

在html頁面返回到小程式原生頁面上

先引入js <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> 如果要傳遞引數到跳轉到頁面，則可以在url後面拼接，如要傳遞id和t

jsp頁面中的EL表示式不被解析的問題

把web.xml 中Web-App版本修改到2.4 <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:we

Servlet向html中寫html標籤，有時會遇到html標籤無效

response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); out.println("<h2>上傳物品成功，但是暫時無法上傳圖片，此功能管理員正在開發&

jsp頁面EL表示式不被解析的解決方法

之前用的weblogic,現在換成了Tomcat發現jsp頁面的EL表示式不被解析，直接在頁面顯示${Parameter}。解決方法：在jsp頁面頂部加上 <%@ page isELIgnored="false" %> 就可以正常顯示了。

XML中配置dubbo相關標籤不能解析的問題

1、問題 Java工程中xml配置dubbo時提示如下問題： Multiple annotations found at this line: - cvc-complex-type.2.4.c: The matching wildcard is strict, but no d

js獲取當前時間顯示在頁面上

ntb cti scrip inter con ear spa set tint <div id="time"> </div> <script> window.onload=function(){ //定時器每秒調用一次fnDate

程式讀取配置檔案中資料顯示在頁面上

1.首先在配置檔案中增加要讀取的資料 cas.cmCustPayment.receiptInvoiceName=\u9996\u94A2\u667A\u65B0\u8FC1\u5B89\u7535\u78C1\u6750\u6599\u6709\u9650\u516C\u53F8 ca

將瀏覽器當前視窗寬高顯示在頁面上, 視窗大小改變時, 也能動態顯示

<div id="root"></div> <script> window.onresize = ()=>{ var getRoot = document.getElementById("root"); getRoot.innerHTML =

上傳控制元件選擇完圖片後將其立即顯示在頁面上(jquery ajax)

最近做了一個個人部落格系統，在新增修改“博主資訊”功能中有一項選擇頭像，用過<input type="file" />控制元件的都知道，選擇完圖片之後顯示的只是檔案的名字，而我想將圖片顯示在頁面上，初步的想法是選擇完圖片後提交到後臺，然後返回圖片的

SSM框架jsp頁面倆個引數作為查詢條件查值顯示在頁面上

點選查詢把結果顯示在下拉選單中 <body> <formid="form1"action=""method="post"> <divclass="container-fluid"> <

APICloud從手機獲取圖片顯示在頁面上

apicloud封裝了getPicture方法，但是會發現得到的ret.data是一串圖片路徑，然後就不知道怎麼顯示在頁面了，經過多次試驗，終於解決，發現必須要將ret.data轉化成JSON字串然後用img標籤顯示出來

struts中用kindeditor實現的圖片上傳並且顯示在頁面上

　　做公司網站的時候由於需要在內容屬性中加入圖片，所以就有了這個問題，本來一開始找幾篇文章看都是講修改kindeditor/jsp/file_manager_json.jsp和upload_json.jsp，可我改了半天地址，還是沒改對，所以想到另一個方法，因為upload

非同步獲取資料Ajax，以及對獲取的資料進行繫結（顯示在頁面上）

最近，經常用Ajax去非同步獲取資料，今天就把它總結一下 1.Ajax是非同步的JavaScr

如何在html標籤不被解析的顯示在html頁面上

相關推薦