可以使用模板字面量和标签函数来生成 HTML 和样式代码。模板字面量是一种新的字符串语法，使用反引号（`）包裹字符串，并且可以在字符串中插入变量。标签函数是一种特殊的函数，可以用来处理模板字面量，并且可以将模板字面量中的变量替换为函数返回的值。下面是一个示例：
const name = 'John';
const age = 30;
function highlight(strings, ...values) {
let result = '';
strings.forEach((string, i) => {
result += string;
if (i < values.length) {
result += `<mark>${values[i]}</mark>`;
}
});
return result;
}
const message = highlight`My name is ${name} and I am ${age} years old.`;
console.log(message);在上面的示例中，我们定义了一个 highlight 函数，它使用了标签函数的语法。这个函数接收一个字符串数组 strings 和一些变量 ...values，并且将它们合并成一个新的字符串。在新的字符串中，我们使用了 <mark> 标签来高亮变量的值。最后，我们使用模板字面量调用了 highlight 函数，来生成一个包含高亮效果的字符串。
除了生成 HTML，我们也可以使用模板字面量和标签函数来生成样式代码。下面是一个示例：
function css(strings, ...values) {
let result = '';
strings.forEach((string, i) => {
result += string;
if (i < values.length) {
result += values[i];
}
});
return result;
}
const color = 'red';
const size = '16px';
const style = css`
.text {
color: ${color};
font-size: ${size};
}
`;
console.log(style);在上面的示例中，我们定义了一个 css 函数，它也使用了标签函数的语法。这个函数接收一个字符串数组 strings 和一些变量 ...values，并且将它们合并成一个新的字符串。在新的字符串中，我们使用了模板字面量中的变量来替换样式代码中的属性值。最后，我们使用模板字面量调用了 css 函数，来生成一个包含样式代码的字符串。
需要注意的是，使用模板字面量和标签函数生成 HTML 和样式代码时，需要避免 XSS（跨站脚本攻击）漏洞，即用户输入的内容可能包含恶意脚本，导致网页被攻击。为了避免这种情况，可以使用一些库或框架来对用户输入进行过滤和转义。