HTML超链接需精准配置href路径、target与rel属性、id锚点及协议链接细节：href须按文件实际位置写相对或根路径，引号不可省；target="_blank"必配rel="noopener noreferrer"防安全风险；锚点id须唯一、小写、无特殊字符；mailto/tel/download等协议链接要注意参数格式与同源限制。
能点开、不跳错、不被拦截——HTML超链接不是写对 <a> 标签就完事，关键在 href 值怎么算、target 怎么配、id 怎么设。
href 路径写错是 404 的头号原因
本地双击 HTML 文件打不开链接，上线却正常？八成是相对路径没按当前文件位置算。浏览器解析 href 时，完全不管你在编辑器里从哪打开，只认 HTML 文件本身所在目录。
-
href="about.html"：同级文件，没问题 -
href="../index.html"：上一级的index.html，不是./index.html -
href="blog/post.html"：子目录下的文件，路径中不能多斜杠（blog/post.html/会 404） -
href="/assets/style.css"：根目录路径，本地双击直接失效（协议为file://，没有“根”概念） - 引号必须有：
href=https://example.com是无效语法，得写成href="https://example.com"，中文引号也不行
target="_blank" 不加 rel="noopener" 就等于留后门
新标签页打开看着方便，但不加 rel="noopener"，新页面就能通过 window.opener 访问原页面的 DOM 和 JavaScript 上下文，存在安全风险。尤其当链接指向不可信域名时。
- 正确写法：
<a href="https://external.com" target="_blank" rel="noopener noreferrer">外部链接</a> -
rel="noreferrer"还能防止 Referer 泄露来源地址 - 别用
javascript:void(0)或#当占位符——点了回滚到顶部，又没 JS 处理，用户以为坏了 - 如果真要 JS 控制跳转，至少写
onclick="window.open(...); return false;"，否则默认行为和 JS 行为可能冲突
锚点跳转失效，大概率是 id 没对上
HTML5 废掉了 <a name="top"></a> 写法，现在统一用 id。但很多人写了 id 却忽略大小写、空格、特殊字符这些硬性限制。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 目标元素必须有
id属性，且值唯一、全小写、无空格和中文，比如<h2 id="contact-section">联系我们</h2> - 链接写成
<a href="#contact-section">跳到联系</a>，注意#后面必须和id值**逐字符一致** - 如果页面滚动没反应，检查是否被 CSS 的
scroll-behavior: smooth或 JS 滚动监听器拦截；也可能是目标元素display: none或高度为 0 - 不要给多个元素设相同
id，浏览器只认第一个，后续锚点全部失效
mailto:、tel:、download 这些协议链接容易漏细节
它们看起来简单，但参数拼错或缺少必要属性，功能就直接哑火。
- 发邮件：
<a href="mailto:support@example.com?subject=反馈&body=页面加载慢">联系客服</a>，注意&是 HTML 实体，不是& - 拨号链接：
<a href="tel:+8613800138000">拨打热线</a>，+ 号不能省，国际号码必须带国家码 - 强制下载：
<a href="/files/report.pdf" download="2026-季度报告.pdf">下载PDF</a>，download属性仅对同源 URL 生效，跨域链接即使写了也不会下载 - 所有协议链接都建议加
rel="nofollow"，避免被搜索引擎误判为站内导航
最常被忽略的一点：CSS 可能悄悄干掉链接行为。比如重置样式里写了 a { pointer-events: none; }，或者父容器 overflow: hidden 切掉了点击热区——遇到“有下划线但点不动”，先查 computed styles，别急着改 HTML。
