应使用语义化HTML标签构建帖子摘要列表：每条用<article>包裹，标题与元信息置于<header>内，标题用<h2>～<h4>，时间用<time datetime="ISO8601">，摘要正文用<p>，缩略图用带loading="lazy"、width/height及srcset的<img>，标题跳转用而非<button>。
怎么用 HTML 写出可读、可访问的帖子摘要列表
纯 HTML 无法实现动态加载或用户交互，但能搭出结构清晰、语义正确、SEO 友好、屏幕阅读器可理解的帖子摘要骨架。关键不是“怎么堆 div”，而是“怎么选语义标签”。
-
<article>包每条帖子，不是<div>—— 它自带独立内容语义，对 RSS、爬虫、辅助技术都重要 -
<header>放标题 + 元信息（作者、时间），别用<p>套<strong>模拟标题 -
<summary>不是摘要容器！它是<details>的子元素，不能乱用；摘要正文该用<p>或<div role="region" aria-label="摘要"> - 标题必须用
<h2>～<h4>（按页面层级），禁用<h1>（首页标题应为唯一<h1>，属于整个页面）
为什么 <time datetime="2024-05-20"> 比 “5分钟前” 更可靠
“5分钟前” 看起来友好，但对排序、缓存、国际化、无障碍支持全是障碍。静态 HTML 必须靠机器可读的时间戳打底。
-
datetime属性值必须是 ISO 8601 格式（如"2024-05-20T14:30:00Z"），不能写"2024/05/20"或"昨天" - 视觉上显示“5分钟前”可以，但得用 JS 动态计算并更新，HTML 里只留标准时间戳作为源数据
- 没
datetime的<time>标签等于没写——浏览器不识别，爬虫忽略，日期排序功能直接失效
图片缩略图怎么写才不拖慢首屏且兼容暗色模式
论坛首页常带帖内图缩略图，但一张没优化的 img 就能让 LCP 崩盘，还可能在深色背景下白边刺眼。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须加
loading="lazy"，否则滚动前就加载所有缩略图 - 强制指定
width和height（哪怕用 CSS 覆盖），防止布局抖动 - 用
srcset+sizes适配不同屏幕，例如：<img src="t-small.jpg" srcset="t-small.jpg 480w, t-medium.jpg 768w" sizes="(max-width: 480px) 100vw, 50vw"> - 避免用
background-image实现缩略图——它无法被右键保存、不进 alt 流程、暗色模式下无法通过prefers-color-scheme切换
点击标题跳转时，为什么 <a href="/post/123"> 比 <button onclick="location.href=..."> 更稳妥
标题是导航核心，不是操作按钮。用 <button> 模拟链接，会破坏语义、键盘焦点流和基础可用性。
立即学习“前端免费学习笔记（深入）”；
-
<a>天然支持中键新标签页、右键复制链接、history.pushState、SEO 索引；<button>默认不触发任何这些 - 如果加了
onclick却没处理event.preventDefault()，点链接时可能触发两次跳转 - 禁用 JavaScript 时，
<button onclick="...">完全不可用；而<a href="/post/123">仍可跳转（降级保障） - 想加 loading 状态？用
<a href="/post/123" data-loading="false">配合 JS 控制 class，别动标签本质
最易被忽略的其实是链接的 rel 属性：外链要加 rel="noopener noreferrer"，站内链接虽不用，但一旦混入用户生成内容（比如帖子正文里的 a 标签），漏掉这个就等于开 XSS 后门。结构再干净，一个没过滤的 javascript: href 就能让整页失效。
