说个多年老前端都不知道的标签正确玩法——q标签

最新推荐文章于 2025-12-22 19:02:04 发布

转载最新推荐文章于 2025-12-22 19:02:04 发布 · 82 阅读

CC 4.0 BY-SA版权

原文链接：https://mp.weixin.qq.com/s?__biz=Mzg4MTYwMzY1Mw==&mid=2247515795&idx=1&sn=add0903faea6d6cb4200c17d4d422205&chksm=ceb9e729611fdb38a99a1d7ad23a44ed7c04a110dbeb140526d0870a92ade2260898adbcbc33&scene=126&sessionid=0

文章标签：

#前端

最近在接手一个老旧的 Markdown 编辑器项目时，遇到一块让我血压飙升的代码：行内引用，写得一塌糊涂。
span 嵌套引号，全靠手动拼
样式杂乱，兼容性堪忧
一点语义都没有

我心想：就没点优雅点的写法了吗？

研究过程中发现一个以前从未在意过的标签: <q> 标签。

通过MDN 可以看到这个标签的兼容性已经很不错了。

它叫 <q>，全称 quote，代表 短引用。但它到底能干嘛？为什么它一直活在 HTML 规范里，却像个「隐形人」一样没人提起？

今天，隆重介绍一下它。

`<q>` 是什么？它和引号有什么关系？

你可能以为加双引号只需要这样写：

<p>乔布斯说："活着就是为了改变世界。"</p>

但其实 HTML 提供了更聪明的做法：

<p>乔布斯说：<q>活着就是为了改变世界。</q></p>

对比一下效果：

<body>
  <h3>加引号</h3>
  <p>乔布斯说："活着就是为了改变世界。"</p>
  <h3>不加引号</h3>
  <p>乔布斯说：<q>活着就是为了改变世界。</q></p>
</body>

不仅不用手动写引号，还能根据语言环境智能区分单双引号。

那为啥很少人用？

主要是这三点原因：

样式太朴素: 看起来和普通文本没区别，很容易被忽视。
兼容性曾有历史包袱: 某些旧浏览器不会显示引号，引发过“信任危机”。
被 Markdown 灌坏了: 现在很多人直接用 > 引用，已经不写 HTML 了。

那<q>标签真的只能这么朴素吗？其实稍微修饰一下就可以焕然一新的。

美化玩法

可以通过css样式来美化一下：

// 设置中文引号样式 + 颜色加粗
q {
  quotes: "「" "」";
  color: #1343fa;
  font-weight: bold;
}

quotes 属性轻松搞定，原本普通的 <q> 马上就有了辨识度，瞬间就有了中文引用的风格「中文风」

再来点动画点缀，<q>标签立马灵动：

q {
quotes: "👉""👈";
color: #3594f7;
font-weight: bold;
}
q::before {
display: inline-block;
}
q::after {
display: inline-block;
}

q:hover::before {
animation: poke-back 0.6s ease-in-out infinite;
}
q:hover::after {
animation: poke-forward 0.6s ease-in-out infinite;
animation-delay: 0.3s;
}

@keyframes poke-back {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-3px);
  }
}
@keyframes poke-forward {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(3px);
  }
}