HTML abbr/bdo/cite/q/blockquote 语义标签

HTML文本语义标签深入：abbr缩写(全局title展开)、bdo双向文本覆盖(dir=ltr/rtl父子继承)、cite引用作品标题、q内联引用(自动加引号/cite属性)、blockquote块引用(cite)、与SEO和无障碍读屏器的关系 · 难度：入门 · +10XP

HTML 文本语义标签 —— abbr、bdo、cite、q、blockquote

这些标签对SEO和无障碍访问非常重要。

abbr —— 缩写

<abbr title="HyperText Markup Language">HTML</abbr>

鼠标悬停在HTML上会弹出完整名称。屏幕阅读器也可以读取title。

bdo —— 双向文本覆盖

<p>正常 <bdo dir="rtl">从右到左</bdo></p>

cite —— 引用作品标题

<p>我最喜欢的书是<cite>三体</cite>。</p>

q与blockquote —— 引用文字

<p>爱因斯坦说过：<q>想象力比知识更重要。</q></p>
<blockquote cite="source"><p>大段引用内容。</p></blockquote>

动手练习

1. 基础练习：写一段介绍最喜欢的电影的文字，用cite引用电影名，用blockquote引用台词。
2. 进阶应用：在技术文章中用abbr标注所有缩写（HTML/CSS/JS/API/DOM），确保都有title解释。
3. 项目实战：做名言集页面——至少10条名言，每条用blockquote，CSS卡片样式。