应使用而非构建卡片，因其明确表达独立内容单元语义，提升seo与可访问性；须用标记日期、合理布局作者信息并防范xss风险。

卡片结构用 <article></article> 而不是 <div> <p>语义化是关键。用 <code><article></article> 明确告诉浏览器和屏幕阅读器这是一个独立的内容单元，SEO 和可访问性都更友好。如果只是套个 <div class="card">，日期和作者信息容易被忽略或误读。 <p>常见错误：把整个卡片包在 <code><section></section> 或多个嵌套 <div> 里，导致结构扁平、缺乏层级。正确做法是让 <code><header></header> 包住标题、日期、作者，<main></main> 或直接段落放正文摘要，<footer></footer> 可选（比如加标签或阅读时长）。

• <article></article> 是容器，必须存在
• 日期建议用 <time datetime="2024-06-15">2024年6月15日</time>：机器可读 + 人可读双保障
• 作者用 <address></address> 不合适（它专指联系信息），用 <span class="author">张三</span> 或 <meta name="author" content="张三">（仅用于文档级元信息）更稳妥

CSS 布局用 Flex 而不是 float 或 inline-block

卡片宽度常需响应式适配，用 display: flex 控制头部信息对齐最直接。float 容易塌陷，inline-block 有看不见的空白间隙，都容易让日期和作者错位。

典型场景：作者名靠右、日期靠左，中间标题居中——Flex 的 justify-content: space-between 一行搞定；若要日期+作者都在右下角，用 margin-left: auto 推过去比计算 margin 更可靠。

• 给 <header></header> 加 display: flex; align-items: center; justify-content: space-between;
• 日期和作者都设为 flex: 0 0 auto，避免被压缩变形
• 小屏下建议用 flex-direction: column 把日期和作者堆叠，再加 align-items: flex-end 保持右对齐

日期格式别硬写字符串，优先用 datetime 属性

用户复制粘贴、搜索引擎提取、甚至未来用 JS 做时间计算，都依赖 datetime 属性值是否规范。写成 <time>昨天</time> 或 <span>6/15</span> 会让机器完全无法理解时间语义。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

错误现象：CMS 导出的 HTML 里日期是 <span>2024-06-15 14:30</span>，没包裹 <time></time>，也没 datetime，结果 RSS 订阅器抓不到发布时间。

• 标准写法：<time datetime="2024-06-15T14:30:00+08:00">2024年6月15日</time>
• 时区必须显式声明（如 +08:00），否则默认按用户本地时区解析，可能偏差一天
• 纯日期（无时间）可简写为 datetime="2024-06-15"，但建议统一带时间戳，方便后续扩展

作者字段要防 XSS，后端输出前必须转义

如果作者名来自用户输入（比如 CMS 后台填写），直接插入 HTML 会引发 XSS。例如作者填 <script>alert(1)</script>，不处理就会执行。

这不是样式问题，是安全红线。前端 JS 动态渲染时尤其危险，但即使静态 HTML，只要内容源不可信，就必须处理。

• 服务端模板（如 Jinja2、EJS）务必使用自动转义语法：{{ author | escape }} 或
• 若用纯静态生成（如 Hugo、Jekyll），确认其作者字段默认已转义；否则在模板里手动调用 safeHTML 等函数需格外谨慎
• 绝对不要用 innerHTML = '<span>' + author + '</span>' 拼接，改用 textContent 或 createTextNode

日期和作者看着简单，但语义、布局、时区、安全四点全踩准的人不多。特别是 datetime 属性漏写时区、作者字段跳过转义，上线后很难排查。