应使用<article>而非<div>构建卡片，因其明确表达独立内容单元语义，提升SEO与可访问性；须用<time datetime>标记日期、合理布局作者信息并防范XSS风险。
卡片结构用 <article> 而不是 <div>
语义化是关键。用 <article> 明确告诉浏览器和屏幕阅读器这是一个独立的内容单元，SEO 和可访问性都更友好。如果只是套个 <div class="card">，日期和作者信息容易被忽略或误读。
常见错误：把整个卡片包在 <section> 或多个嵌套 <div> 里，导致结构扁平、缺乏层级。正确做法是让 <header> 包住标题、日期、作者，<main> 或直接段落放正文摘要，<footer> 可选（比如加标签或阅读时长）。
-
<article>是容器，必须存在 - 日期建议用
<time datetime="2024-06-15">2024年6月15日</time>：机器可读 + 人可读双保障 - 作者用
<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>加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> 会让机器完全无法理解时间语义。
错误现象：CMS 导出的 HTML 里日期是 <span>2024-06-15 14:30</span>，没包裹 <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 }}或<%= h(author) %> - 若用纯静态生成（如 Hugo、Jekyll），确认其作者字段默认已转义；否则在模板里手动调用
safeHTML等函数需格外谨慎 - 绝对不要用
innerHTML = '<span>' + author + '</span>'拼接，改用textContent或createTextNode
datetime 属性漏写时区、作者字段跳过转义，上线后很难排查。 
