📅 最后修改于: 2023-12-03 15:07:18.775000 🧑 作者: Mango
HTML 是网页的基础，作为程序员，了解如何嵌入 HTML 到代码中是重要的。
有两种常见的方式用于嵌入 HTML。
在代码中使用字符串来表示 HTML 标记是非常普遍的。例如，在 JavaScript 中，可以使用字符串来更新 DOM 元素。
const div = document.createElement("div");
const htmlStr = "<p>This is a paragraph.</p>";
div.innerHTML = htmlStr;
在上面的代码中，先使用 document.createElement 创建一个 div 元素，然后将一个包含 HTML 标记的字符串赋值给 div.innerHTML。
请注意，使用字符串来表示 HTML 标记可能会带来一些安全风险，因为它可以被用于注入攻击。在使用时要注意安全问题。
使用第三方模板引擎的方式可以更加安全地嵌入 HTML。例如，在 Node.js 中，我们可以使用 EJS 模板引擎。
const ejs = require("ejs");
const template = "<p><%= message %></p>";
const data = { message: "This is a paragraph." };
const htmlStr = ejs.render(template, data);
在上面的代码中，首先定义了一个 EJS 模板，其中 <%= message %> 表示要解析 message 变量的值。然后通过调用 ejs.render 方法传入模板和数据对象来生成 HTML 标记。
有时需要将代码片段嵌入到 HTML 中。有两种常见的方式可以实现这一点。
<pre> 标签可以使用 <pre> 标签将代码片段嵌入到 HTML 中。
<pre>
<code>
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet("World");
</code>
</pre>
在上面的代码中，首先使用 <pre> 标签表示这是预格式化的文本，然后使用 <code> 标签来包含代码片段。
也可以使用第三方库来实现在 HTML 中包含代码片段的功能。例如，可以使用 Highlight.js 来为代码片段添加语法高亮。
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/styles/default.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre>
<code class="javascript">
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet("World");
</code>
</pre>
</body>
</html>
在上面的代码中，首先引入 Highlight.js 的 CSS 和 JavaScript 文件，然后在 <code> 标签中添加 class="javascript"，表示这是 JavaScript 代码片段，最后调用 hljs.initHighlightingOnLoad() 方法来启用语法高亮。
了解如何嵌入 HTML 可以帮助程序员更好地在代码中使用 HTML 标记。同时，了解如何在 HTML 中包含代码片段也可以提高代码的可读性和可维护性。