Question

所以我的任务是在插入网页之前对所有html进行编码。

<!doctype html>
<?xml version="1.0" encoding="ISO-8859-1"?>
<html lang="en">
<head>
  <meta charset="utf-8">
<?xml version="1.0" encoding="ISO-8859-1"?>
  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  <link rel="stylesheet" href="css/styles.css?v=1.0">

  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
</head>

<body>
 <h1>wdw</h1>
</body>
</html>

我把它编码到下面

&lt;!doctype html&gt;
&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
  &lt;title&gt;The HTML5 Herald&lt;/title&gt;
  &lt;meta name="description" content="The HTML5 Herald"&gt;
  &lt;meta name="author" content="SitePoint"&gt;

  &lt;link rel="stylesheet" href="css/styles.css?v=1.0"&gt;

  &lt;!--[if lt IE 9]&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
&lt;/head&gt;

&lt;body&gt;
 &lt;h1&gt;wdw&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;

现在问题是浏览器只是将html显示为文本而不是呈现标记。我如何使浏览器呈现它而不是仅显示文本

Answer 1

第一种方法：

我尝试通过jquery解决您的问题，但您必须在代码中添加一个未使用的<pre>标记和两行jquery代码

如果您忽略输出中的pre和jquery script，那么一切都和您一样但是它只会显示<head>和<body>代码如果您的工作没有显示head and body，那么您必须使用 第二种方法 来 显示整个HTML代码

<!doctype html> <?xml version="1.0" encoding="ISO-8859-1"?> <html lang="en"> <head> <meta charset="utf-8"> <?xml version="1.0" encoding="ISO-8859-1"?> <title>The HTML5 Herald</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <link rel="stylesheet" href="css/styles.css?v=1.0">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function () { var data = $('html').html(); var data = $('pre#display-code').text(data); }); </script> </head> <body> <h1>wdw</h1> </body> </html> <pre id="display-code"></pre>

第二种方法：

这种方法是第一种方法的添加和修改它需要一些严格的代码，但它能够以最高级别完成您的任务

<!doctype html> <?xml version="1.0" encoding="ISO-8859-1"?> <html lang="en"> <head> <meta charset="utf-8"> <?xml version="1.0" encoding="ISO-8859-1"?> <title>The HTML5 Herald</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <link rel="stylesheet" href="css/styles.css?v=1.0">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function () { var data = $('html').html(); data = "<!doctype html>\n"+"<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n"+"<html lang=\"en\">"+data+"\n</html>"; var data = $('pre#display-code').text(data); }); </script> </head> <body> <h1>wdw</h1> <pre id="display-code"></pre> </body> </html>

我希望它能帮助您和其他人

Answer 2

您的文件是一个文本文件，而不是一个html文件，因此实体（例如<）按字面意思理解。

所以你应该告诉浏览器你有一个HTML页面，所以你应该添加通常的html样板：

<!doctype html>
<html>
<body>
 ... your encoded file
</body>
</html>

如何在浏览器中呈现编码的HTML

2 个答案: