需将设为display: block或inline-block并确保宽高继承，避免flex: 1依赖及position: absolute取巧；同时补全rel="noopener noreferrer"防新页拦截，路径统一用根相对URL。
链接点击区域在响应式下失效怎么办
响应式模板里常见「点不到卡片空白处」，本质是 a 标签默认为内联元素，在 flex 或 grid 容器中不自动撑满父级。哪怕加了 padding 和背景色，点击热区仍只覆盖文字本身。
- 给
a显式设display: block或display: inline-block（后者需配合width: 100%才能填满） - 若父容器是
display: flex，别依赖flex: 1让a自适应——它仍是内联行为，必须先改display - 禁用
position: absolute拉伸覆盖的“取巧”写法：破坏语义、键盘焦点错乱、屏幕阅读器无法识别
target="_blank" 在移动端和小屏上为什么打不开新页
不是浏览器兼容问题，而是安全策略拦截：缺 rel="noopener noreferrer" 时，Chrome/Firefox/Safari 会静默阻止新窗口打开，或报 Unsafe attempt to initiate navigation 错误，尤其在 iOS Safari 和 Android WebView 中更敏感。
-
rel="noopener"阻断window.opener访问原页面 DOM -
rel="noreferrer"同时防止 Referer 泄露（对隐私敏感场景必要） - 二者必须同时出现，写成
rel="noopener noreferrer"；只写一个或顺序颠倒（如noreferrer noopener）部分浏览器仍会警告
响应式模板里 href 路径怎么写才不 404
本地开发时路径错乱，90% 是混淆了「HTML 文件物理位置」和「浏览器地址栏 URL」。模板部署到不同环境（本地 file://、Nginx 根目录、子目录），路径解析逻辑完全不同。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 站内跳转统一用 Web 绝对路径：
href="/about.html"或href="/assets/css/main.css"—— 以网站根目录为基准，部署时最省心 - 避免协议相对 URL（
//cdn.example.com）：HTTPS 全站已成标配，该写法已无实际优势，且在某些老旧 WebView 中异常 - 绝对 URL 必须带协议：
href="https://example.com"，不能只写href="example.com"（会被当成当前域下的相对路径） - 图片链接中的
href（如<a href="images/logo.png"></a>）必须确保路径真实存在，且不能含未编码的中文或空格
友情链接模块在小屏横排变竖排后样式错乱
很多模板用 float: left 实现横向友链，但响应式断点切换时，float 清除不干净 + 父容器高度塌陷，导致后续内容上移、点击区域偏移。
立即学习“前端免费学习笔记（深入）”；
- 结构用语义化
<nav aria-label="友情链接"><ul class="friend-links"></ul></nav>，别用一堆<div> <li>CSS 用 <code>display: flex+flex-wrap: wrap，小屏直接flex-direction: column切换，无需清除浮动 - 检查是否被旧规则锁死：
.friend-links a { display: block; width: 120px; }这类固定宽高会卡住 flex 布局，覆盖为flex: 1或max-width: 100% - 用
gap控制间距，比margin更可靠，避免首尾外边距溢出容器
真正难的不是写响应式代码，而是每次改完一个链接，都要手动在手机横竖屏、iOS/Android 浏览器、微信内置 WebView 里点三遍——看它是不是真能点、点得准、点得安全。
