HTML中实现带日期和作者信息的博客文章卡片结构-html教程-PHP中文网

应使用包裹卡片，作者名用rel="author"链接，日期用符合iso 8601的，布局优先css grid；错误使用、class="author"或中文datetime值将导致seo、无障碍和rss失效。

html中实现带日期和作者信息的博客文章卡片结构

用 `@#@#@#@#@#@#@#@#@#@0`

如果是外部主页（如 GitHub、Mastodon），同样加 rel="author"，但需注意：部分平台会屏蔽跨域 referrer，不影响语义有效性

不要写成 <span class="author">Jane Doe</span> —— 这等于没声明作者身份

`<time></time>` 的 `datetime` 值必须严格校验

常见错误是直接把中文日期（如 "2024年5月20日"）塞进 datetime 属性，导致解析失败。浏览器开发者工具的「Elements」面板里，右键检查 <time></time> 元素，看 datetime 是否被识别为有效日期（悬停时会显示解析后的时间）。

正确：<time datetime="2024-05-20">2024年5月20日</time>
错误：<time datetime="2024年5月20日">2024年5月20日</time>（非法格式）
带时间也需标准格式：datetime="2024-05-20T14:30:00+08:00"，不能省略 T 和时区
动态生成时（如模板引擎或 JS 渲染），务必先格式化日期对象，别依赖 toString() 或 toLocaleDateString()

卡片布局用 CSS Grid 而非浮动或 inline-block

浮动已过时，inline-block 有空白字符换行问题；Grid 能稳定控制标题、日期、作者、摘要的流式顺序与断点响应，且天然支持语义顺序与视觉顺序分离（对无障碍友好）。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

关键结构示例：

<article class="post-card"><header><h2><a href="/posts/xxx">标题</a></h2>
    <time datetime="2024-05-20">2024年5月20日</time></header><p>摘要文本...</p>
  <footer>
    作者：<a href="/author/jane" rel="author">Jane Doe</a>
  </footer></article>

CSS 中用 display: grid 定义三行区域（header / p / footer），比 Flex 更易控制垂直间距和对齐
移动端优先：默认单列，@media (min-width: 768px) 后再设两列网格，避免小屏上日期和作者挤成一行

日期格式和作者关系属性是机器可读性的核心门槛，很多人写了结构却漏掉这两个点，结果卡片在 RSS、SEO 或屏幕阅读器中完全“隐形”。