blockquote 的 cite 属性仅接受合法绝对 url，纯文本或相对路径无效；多段引用须用 包裹；可见出处需手动添加 ；三者语义不可混用。
blockquote 的 cite 属性只能填绝对 URL，填错等于没写
cite 属性不是“作者栏”也不是“来源说明框”，它只接受一个合法、可访问的绝对 URL。浏览器不渲染它，也不展示任何文字——它纯粹是给爬虫、SEO 工具和部分屏幕阅读器（如 VoiceOver + Safari）读取的元数据。
- ✅ 正确：
cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote" - ❌ 错误：
cite="《HTML权威指南》"（纯文本，被静默丢弃） - ❌ 错误：
cite="张三"或cite="#section2"（非 URL，语义断裂） - ⚠️ 风险：
cite="article.html"（相对路径在静态站点或跨域时极易 404）
没合法 URL 就别硬塞。宁可省略 cite，也别用虚构地址或描述性文字充数。
多段长引用必须用 <p></p> 显式包裹，不能裸放文本
直接写 <blockquote>第一段。第二段。</blockquote> 虽然能显示，但会破坏语义：屏幕阅读器可能连读成一句话，CSS 无法单独控制第二段的 margin-top，XHTML 或部分 CMS 校验会报错。
- ✅ 正确结构：
<blockquote cite="https://example.com"> <p>第一段引文。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>第二段引文。</p> </blockquote> - 引用中含列表、代码块或小标题？可以合法嵌套
<ol></ol>、<pre class="brush:php;toolbar:false;"></pre>、<h4></h4>等流内容元素 - 别靠换行符
\n或空格模拟分段——HTML 会合并空白，纯属视觉欺骗
用户看得见的出处，必须手动加 <footer><cite></cite></footer> 组合
cite 属性本身不产生任何可见文字。想让用户看到“——李四，《现代 HTML 实践》”，唯一可靠方式是在 <blockquote></blockquote> 内部末尾手动添加：
-
<footer></footer>必须是<blockquote></blockquote>的**最后一个子元素**，不能在外面、不能在开头、不能空着 -
<cite></cite>只能包裹作品名（书名、文章标题、标准文档名），比如<cite>HTML Living Standard</cite> - 作者名、机构、年份、页码等都写在
<footer></footer>里，不套<cite></cite>，例如：<footer>— WHATWG, <cite>HTML Living Standard</cite></footer> - 中文场景建议 CSS 重置：
cite { font-style: normal; }，再配合引号或border-left区分
长引用里的排版与兼容性容易被忽略
长引用在小屏上容易撑破容器，尤其含长英文单词或未断行中文；同时，部分屏幕阅读器对 <blockquote></blockquote> 的播报依赖语义完整性。
- 防溢出：给
<blockquote></blockquote>加style="overflow-wrap: break-word;"或对应 class - 诗歌或代码缩进？改用
<pre class="brush:php;toolbar:false;"><code></code> 组合再套 <code><blockquote></blockquote></code></pre> - 服务端渲染（Next.js/Vue SSR）场景下，
cite值必须随 HTML 一起输出，JS 动态插入无效 - 别用多个
<blockquote></blockquote>嵌套实现多层缩进——那是 CSS 该干的事
最常被忽略的是：cite 不等于署名，<cite></cite> 不等于作者，<footer></footer> 不可外置——三者语义边界清晰，混用就会让机器和人都看不懂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
