学习前提

理解语义标签、标题层级、盒模型与Flexbox。

本课完成后你能做什么

让不同长度的内容共享清晰结构，避免嵌套链接和脆弱尺寸。

先理解机制

卡片不是一个HTML标签，而是一种内容组织。独立可理解的课程摘要可用article，标题层级由所在页面决定。标题、描述和动作各有职责，不应把全部内容都用粗体抢占注意力。

max-width限制阅读宽度，padding提供内部呼吸空间，border定义边界。固定高度容易裁掉翻译后的长描述；如果同一排按钮需要对齐，可让卡片用纵向Flex并给按钮margin-top:auto。

整张卡片可点击时不要在链接中再嵌套链接或按钮。基础方案保留一个清晰的阅读链接，键盘用户只需一次聚焦就能理解动作。描述中的用户数据仍应作为文本渲染。

可运行示例

<style>
.card { max-width:320px; padding:28px; border:1px solid #dce4dc; border-radius:16px; font:16px/1.6 system-ui; }
.card a { display:inline-block; padding:10px 18px; border-radius:8px; color:white; background:#176b4b; }
</style>
<article class="card">
  <h2>Learn HTML</h2>
  <p>Build a clear structure for your first page.</p>
  <a href="https://developer.mozilla.org/en-US/docs/Learn_web_development">Start learning</a>
</article>

推演与验证

复制三张卡片，分别使用一行、三行与超长单词描述。检查320像素屏幕和200%缩放。Tab焦点应到达操作链接且不会被圆角overflow隐藏；点击后必须打开真实目标。

常见错误与边界

示例中的目标地址是练习占位，发布前必须替换。图片若后续加入，应给尺寸与合适alt，不要让加载时卡片高度突然改变。纯装饰图应使用空alt。

动手练习

将卡片改为一组课程，显示难度和预计时长；用语义文字传达难度而不是只用颜色。

参考解法与理由

把难度和时长写成可读的元信息，保持标题先于描述。若估时未经学习者验证，应标记为建议安排而不是精确承诺。

进一步阅读