用+可构建语义清晰、合规的引用卡片，无需div或JS；明确标识引用内容，作为其直接子元素标注署名，配合三行CSS即可实现美观卡片效果。
直接用 套一层 或 就能做出合规、语义清晰的引用卡片，不需要 div 堆砌或 JS 模拟。
为什么不用 div 写引用卡片
很多人一上来就写 常见错误现象： 这是最推荐的组合，兼容性好（IE9+），语义完整，CSS 控制自由度高： 关键点： 不需要框架，也不用复杂选择器。重点控制缩进、边框、字体和间距： 把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。 注意： 在小屏上，左右 padding 过大会挤占空间，引号伪元素也可能错位： 必须加的响应式处理： 最容易被忽略的是：如果页面用了 CSS Reset（比如 normalize.css）， 就是干这个的——它明确告诉浏览器和辅助工具：“这段内容引自别处”。 专用于标注出处（注意：它不自动加斜体，样式要自己加）， 在引用块内表示署名区域，比 更语义化。
– 引用文字没包裹 ，只靠 CSS 样式“看起来像”
– 把作者名塞进 里，导致结构扁平、无法被语音工具识别为署名
– 用 或 冒充 ，实际语义不符
+ 的标准写法<blockquote>
真正的勇气不是没有恐惧，而是面对恐惧依然前行。
<footer>— 纳尔逊·曼德拉</footer>
</blockquote>
– 必须是 的直接子元素（不能套在 里）
– 破折号 “—” 是纯文本，不是 HTML 实体，方便复制粘贴
– 不要用 包作者名，除非你确定那是作品标题（比如《沉思录》）；人名用 更准确
– 如果引用带来源链接，可把整个 写成 三行 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，保持左对齐更易读（多数人忽略这点，结果右对齐后换行错乱）移动端适配和易踩的坑
– 用 @media (max-width: 480px) 把 padding 改成 1rem 左右
– 给 blockquote::before 加 transform: translateY(-0.25rem); 防止 iOS 上基线偏移
– 避免对 blockquote 设固定 width 或 max-width，让它自然撑满容器
– 别用 rem 设置引号大小超过 2rem，否则在 iPhone SE 上会溢出 默认可能有 margin，导致署名和正文间距失控——务必显式重置 blockquote footer { margin: 0; }。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
