标签不能嵌套在 内，因HTML规范限定仅允许纯文本及无交互语义的短语内容；虽属短语元素，但含href时会被浏览器静默剥离或解析异常，导致结构错乱、链接失效或XSS风险；正确做法是转义HTML字符（如）并用包裹展示源码。

<a></a> 标签不能直接出现在 <code> 内部

为什么 <a></a> 不能塞进 <code> 里

HTML 规范明确限制 <code> 是「短语内容」（phrasing content）容器，但只允许嵌入文本、<span></span>、<em></em> 等纯语义标签；<a></a> 虽然也是 phrasing 元素，但它在 <code> 内部会被浏览器静默剥离或导致解析异常——尤其当 <a></a> 带有 href 时，多数现代浏览器会直接忽略它，或把链接“漏”到 <code> 外面，造成结构错乱。

更实际的问题是：你本意想展示一段「含超链接的 HTML 代码」（比如 <a href="https://example.com">click</a>），而不是让这段代码真的可点击。混淆这两者，是初学者最常踩的坑。

正确做法：转义 + <pre class="brush:php;toolbar:false;">&lt;/code&gt; 包裹&lt;/H3&gt; &lt;p&gt;要安全显示「带链接的 HTML 文本」（即源码本身），必须做两件事：转义特殊字符，并用语义正确的结构包裹。&lt;/p&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill9263&quot; title=&quot;Html2md&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg&quot; alt=&quot;Html2md&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill9263&quot; title=&quot;Html2md&quot;&gt;Html2md&lt;/a&gt; &lt;p&gt;使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill9263&quot; title=&quot;Html2md&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;&lt;&lt;/code&gt; 必须写成 &lt;code&gt;<&lt;/code&gt;，&lt;code&gt;&gt;&lt;/code&gt; 写成 &lt;code&gt;>&lt;/code&gt;，&lt;code&gt;&amp;&lt;/code&gt; 写成 &lt;code&gt;&amp;&lt;/code&gt;&lt;/li&gt; &lt;li&gt;用 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code class=&quot;html&quot;&gt;&lt;/code&gt; 结构，而非单独 &lt;code&gt;&lt;code&gt;&lt;/code&gt;&lt;/li&gt; &lt;li&gt;不要试图在 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 里放真实 &lt;code&gt;&lt;a&gt;&lt;/code&gt; 标签——那不是展示代码，那是制造 bug&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;示例：&lt;/p&gt; &lt;pre class='brush:html;toolbar:false;'&gt;<a href=&quot;https://example.com&quot; target=&quot;_blank&quot;>Visit example</a></pre> <p>这样浏览器才会原样输出 <code><a href="https://example.com" target="_blank">Visit example</a>，而不是跳转或报错。

如果真想让代码里的文字可点：用 <span></span> 模拟，别碰 <a></a>

极少数场景下，你希望「代码块中的某个词」具备点击行为（比如跳转到文档锚点），又不想破坏代码语义——这时应放弃在 <code> 内放 <a></a>，改用：

• 给关键词加 <span class="linkable"></span>，再用 JS 绑定事件
• 确保该 <span></span> 不影响 <code> 的样式（比如禁用默认下划线、保持等宽字体）
• 必须手动处理键盘焦点与无障碍属性（tabindex="0"、role="link"、aria-label）

不推荐直接操作，因为这已脱离「展示代码」的原始目的，进入交互组件开发范畴。

最容易被忽略的一点：哪怕你只是复制粘贴了一段带 <a></a> 的 HTML 到 <code> 里，只要没转义，浏览器就可能把它当真实标签解析——轻则格式崩溃，重则执行意外脚本。别依赖“看起来正常”，要看源码和 DevTools 元素树。