纯html无法实现智能推荐，因其仅负责结构描述，不具备访问用户数据、调用推荐模型、动态请求api或根据上下文调整内容的能力。
直接用 HTML + 少量 CSS 就能做出基础的“相关作品推荐”卡片区，不需要 JS 也能静态展示；但真要“智能推荐”，HTML 本身做不到——它不处理逻辑、不读数据、不调算法，所谓“智能”必须由后端或 JS 在运行时注入内容。
为什么纯 HTML 无法实现智能推荐
HTML 是标记语言，只负责描述结构。它没有能力：
- 访问用户浏览历史或行为数据
- 调用推荐模型（如协同过滤、Embedding 相似度）
- 动态请求
/api/recommend?item_id=123并渲染结果 - 根据设备、地理位置、时间等上下文调整推荐
你看到的“智能推荐卡片区”，实际是：HTML 提供容器结构 + 外部系统（JS / SSR / CDN 边缘计算）填入真实推荐项。别被“HTML 智能推荐”这种说法带偏。
<section></section> + <article></article> 是最稳妥的语义化结构
别用 <div class="recommend-cards"> 硬套。语义清晰的结构更利于 SEO 和无障碍访问，也方便后续 JS 定位和样式复用：<pre class="brush:php;toolbar:false;"><section aria-label="你可能还喜欢的作品"><h2>相关作品推荐</h2>
<article>
@@##@@
<h3>山海图鉴</h3>
<p>上古异兽考据与现代插画融合</p>
</article><article>
@@##@@
<h3>夜航船</h3>
<p>明代笔记体小说精选注释版</p>
</article></section></pre>
<p>注意：<code>aria-label 对屏幕阅读器友好；<img src="cover.jpg" alt="作品《山海图鉴》封面"> 的 alt 必须准确描述图像内容，不能写“图片”或留空。
卡片布局用 CSS Grid 而非浮动或 inline-block
响应式卡片排列，Grid 更可控、更少副作用：
section[aria-label*="作品"] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
<p>article {
border-radius: 6px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}</p><p>article img {
width: 100%;
height: 180px;
object-fit: cover;
}</p>
关键点：
-
minmax(280px, 1fr)保证单卡最小宽度，同时均分剩余空间 - 不用
flex-wrap+justify-content: space-between，后者在最后一行不满时会撑开间距，视觉难看 - 避免给
img设固定height，用object-fit: cover防止变形
如果真要“动态推荐”，JS 注入点必须预留且可预测
不要等 JS 把整个 HTML 字符串拼出来再 innerHTML 进去——那样破坏语义、阻塞渲染、不利 SEO。正确做法是留空容器，让 JS 填充：
<section id="recommend-section" aria-label="根据当前作品推荐的同类内容"><h2>相关作品推荐</h2> <!-- JS 将在这里插入 <article> 列表 --> <div id="recommend-list"></div> </section>
然后 JS 可以安全地操作 document.getElementById('recommend-list')，逐个 append() 已构建好的 article 元素。这样 HTML 仍保有骨架，JS 只负责“活数据”部分。
容易忽略的是：服务端若已预渲染推荐结果（SSR），就别再让客户端 JS 重复请求；若用边缘函数（如 Cloudflare Workers）生成推荐，需确保 Cache-Control 头允许个性化缓存，否则所有用户看到同一组“智能”结果。
