用html语义化标签（article、h2、p.excerpt、time）构建导读卡片，css采用rem/em单位、max-width限制宽度、-webkit-line-clamp实现多行截断，确保手机与桌面端清晰可读、不溢出、不断词。
用纯 HTML + CSS 实现响应式导读卡片，不依赖框架
直接用 <article></article> 包裹标题、摘要、日期和分类，配合轻量 CSS 控制间距、行高和断行。关键不是“多好看”，而是“在手机和桌面都清晰可读、不溢出、不折断单词”。
常见错误是把 <div> 嵌套过深，或给 <code>font-size 写固定 px 值——这会让小屏文字缩成一团。应该用 rem 或 em，配合 max-width 限制卡片宽度。
-
<h2></h2>用作文章标题，别用<h3></h3>或<span></span>模拟，语义和 SEO 都会受损 - 摘要用
<p></p>，别用<div>，并加 <code>class="excerpt"方便后续统一截断 - 日期和分类建议放在底部一行，用
<small></small>或<time></time>标签，后者支持datetime属性 - 只对块级元素生效，所以
<p class="excerpt"></p>要确保没被设成inline - 截 3 行时，
-webkit-line-clamp: 3，但实际显示可能只有 2.5 行——这是正常渲染行为，不要强行补省略号 JS - 如果需要兼容老版 Safari（text-overflow: ellipsis，并设
white-space: nowrap
控制摘要长度：CSS 截断比 JS 更稳
很多人一上来就写 JS 计算字符数再截断，但中英文混排、emoji、换行符会让逻辑变脆弱。CSS 的 line-clamp 是更可靠的选择，尤其现代浏览器已普遍支持。
注意：必须同时设置 display: -webkit-box、-webkit-line-clamp 和 overflow: hidden 才生效，漏掉任意一个都会失效。
分类标签怎么标才不乱？用 <span></span> + data-category
别用 <div class="tag">前端</div> 这种写法——它语义模糊，也不方便后期筛选或统计。正确方式是用 <span></span> 加自定义属性，既轻量又可扩展。
示例结构：
<span data-category="javascript" class="category-tag">JavaScript</span> <span data-category="css" class="category-tag">CSS</span>
这样后续想用 JS 找所有「CSS 相关文章」，只需 document.querySelectorAll('[data-category="css"]')，不用遍历文本内容匹配。
-
class="category-tag"仅用于样式，比如加background: #eef和border-radius: 4px - 避免用空格分隔多个分类，如
data-category="js css html"——解析困难，应拆成多个<span></span> - 如果分类有层级（如「Vue → 组件通信」），用斜杠分隔更安全：
data-category="vue/component-props"
移动端点击区域太小？给整个卡片加 cursor: pointer 和伪类反馈
导读卡片本质是链接入口，但很多人只给标题加 <a></a>，导致用户必须精准点在文字上。其实整张卡片都该可点，且要有视觉反馈。
- 用
<a href="/post/xxx"></a>包住整个<article></article>，而不是只包标题 - 加
display: block和text-decoration: none消除默认下划线 - 悬停时用
background-color: #f9f9f9（别用太强的对比色），并加transition: background-color 0.2s - 真机测试时注意：iOS Safari 对
:hover响应延迟，所以务必加:active状态，例如a:active { opacity: 0.8; }
最易忽略的是焦点状态——键盘用户 Tab 到卡片时，若没 :focus 样式，他们根本不知道当前聚焦在哪。加一句 a:focus { outline: 2px solid #007bff; } 就够用。
