用 包裹推荐区、 语义化商品项，配 aria-labelledby 和 role="region" 保障无障碍；css 用固定列数 grid 布局+图片宽高属性防抖动；js 渲染须用 textcontent/setattribute 防 xss，事件委托绑定父容器。
怎么用纯 HTML + CSS 实现「猜你喜欢」推荐列表的骨架结构
纯 HTML 本身不处理推荐逻辑，但能可靠承载推荐结果——关键在于语义化结构和可扩展的容器设计。别用 <div> 堆砌，优先用 <code><section></section> 包裹整个推荐区，每项商品用 @#@#@#@#@#@#@#@#@#@0' 是高危操作，万一 title 是 <img loading="lazy"> 就执行了脚本。
正确做法只有一条：永远用 textContent 填充文本，用 setAttribute 填充属性：
const article = document.createElement('article');
const titleEl = article.querySelector('.product-title');
titleEl.textContent = data.title; // 自动转义
const linkEl = article.querySelector('a');
linkEl.setAttribute('href', data.url); // URL 也需校验，建议白名单协议
linkEl.textContent = data.title;
如果非要用模板字符串（比如 Vue/React 风格），务必通过 DOMPurify.sanitize() 过滤，而不是自己正则替换——XSS 规则太复杂，正则根本防不住。
最容易被忽略的是 price 字段：后端传 "¥99.9" 没问题，但如果传 "<script>fetch('/steal-cookies')</script>99.9"，只过滤 <script></script> 不够，得全量净化。
