在 Astro 组件中，直接插入含 HTML 标签的字符串（如 特征）默认会被转义为纯文本；需使用 set:html 指令显式声明信任该内容，才能正确解析并渲染为 DOM 元素。

在 astro 组件中，直接插入含 html 标签的字符串（如 `特征`）默认会被转义为纯文本；需使用 `set:html` 指令显式声明信任该内容，才能正确解析并渲染为 dom 元素。

Astro 默认对插值表达式（如 {item}）执行 HTML 转义，这是关键的安全机制——防止 XSS 攻击。因此，即使 characteristics 数组中某项为 "高性能"，

{item}

也会原样输出文本，而非加粗效果。

✅ 正确做法：使用 set:html 指令
该指令告诉 Astro：“此字符串是已清理、可信的 HTML，可直接注入 DOM”。修改映射逻辑如下：

{characteristics?.map((item) => (
  <p class="text" set:html="{item}"></p>
))}

⚠️ 重要注意事项：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• set:html 绕过自动转义，若 item 来自用户输入或未验证的外部数据（如 CMS API、表单提交），必须先进行严格 HTML 清洗（推荐使用 DOMPurify），否则将引入严重 XSS 风险。
• 不要用于动态拼接不可信内容，例如：set:html={${userInput}静态文本} —— 即使部分静态，整体仍不可信。
• 若只需简单格式（如加粗、斜体），更安全的替代方案是：将富文本结构化为数据（如 [{type: 'bold', text: '特征1'}, {type: 'italic', text: '特征2'}]），再用条件渲染对应标签。

? 总结：set:html 是 Astro 中渲染内联 HTML 字符串的标准且必要方式，但其威力与风险并存。始终遵循“信任但验证”原则——仅对明确可控、已净化的内容启用该指令。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！