用+可构建语义清晰、合规的引用卡片，无需div或JS；明确标识引用内容，作为其直接子元素标注署名，配合三行CSS即可实现美观卡片效果。
直接用 <blockquote></blockquote> 套一层 <footer></footer> 或 <cite></cite> 就能做出合规、语义清晰的引用卡片，不需要 div 堆砌或 JS 模拟。
为什么不用 div 写引用卡片
很多人一上来就写 <div class="quote-card">，结果语义丢失、屏幕阅读器读不出“这是引用”，SEO 也弱。HTML 原生的 <code><blockquote></blockquote> 就是干这个的——它明确告诉浏览器和辅助工具：“这段内容引自别处”。<cite></cite> 专用于标注出处（注意：它不自动加斜体，样式要自己加），<footer></footer> 在引用块内表示署名区域，比 <small></small> 更语义化。
常见错误现象：
– 引用文字没包裹 <blockquote></blockquote>，只靠 CSS 样式“看起来像”
– 把作者名塞进 <p></p> 里，导致结构扁平、无法被语音工具识别为署名
– 用 <em></em> 或 <i></i> 冒充 <cite></cite>，实际语义不符
<blockquote></blockquote> + <footer></footer> 的标准写法
这是最推荐的组合，兼容性好（IE9+），语义完整，CSS 控制自由度高：
立即学习“前端免费学习笔记（深入）”；
<blockquote> 真正的勇气不是没有恐惧，而是面对恐惧依然前行。 <footer>— 纳尔逊·曼德拉</footer> </blockquote>
关键点：
– <footer></footer> 必须是 <blockquote></blockquote> 的直接子元素（不能套在 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a>
<p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 里）
– 破折号 “—” 是纯文本，不是 HTML 实体，方便复制粘贴
– 不要用 <cite></cite> 包作者名，除非你确定那是作品标题（比如《沉思录》）；人名用 <footer></footer> 更准确
– 如果引用带来源链接，可把整个 <footer></footer> 写成 <footer><a href="...">某书 第3章</a></footer>
三行 CSS 让它像卡片
不需要框架，也不用复杂选择器。重点控制缩进、边框、字体和间距：
blockquote {
margin: 1.5rem 0;
padding: 1.25rem 1.5rem;
border-left: 4px solid #4a6fa5;
background: #f8fafc;
font-family: "Segoe UI", system-ui, sans-serif;
}
blockquote footer {
margin-top: 0.75rem;
font-size: 0.95em;
color: #4a5568;
font-style: normal;
}
blockquote::before {
content: """;
font-size: 3rem;
line-height: 1;
opacity: 0.2;
position: absolute;
left: 0.5rem;
top: 0.25rem;
}
注意：
– ::before 伪元素引号是装饰，不影响语义；若需支持旧版 Safari，可改用背景图或真实引号字符
– border-left 比 border 更轻量，避免底部多出一条线
– background 和 padding 才真正让它“像卡片”，纯边框容易显得单薄
– 不给 footer 加 text-align: right，保持左对齐更易读（多数人忽略这点，结果右对齐后换行错乱）
移动端适配和易踩的坑
在小屏上，左右 padding 过大会挤占空间，引号伪元素也可能错位：
必须加的响应式处理：
– 用 @media (max-width: 480px) 把 padding 改成 1rem 左右
– 给 blockquote::before 加 transform: translateY(-0.25rem); 防止 iOS 上基线偏移
– 避免对 blockquote 设固定 width 或 max-width，让它自然撑满容器
– 别用 rem 设置引号大小超过 2rem，否则在 iPhone SE 上会溢出
最容易被忽略的是：如果页面用了 CSS Reset（比如 normalize.css），<footer></footer> 默认可能有 margin，导致署名和正文间距失控——务必显式重置 blockquote footer { margin: 0; }。
