html链接怎么用_html超链接的使用方法与实例【详解】

最基础的超链接用显示文字，href为必需属性；href值支持绝对地址、相对路径、锚点等；target="_blank"需配rel="noopener"防安全风险；图片作链接须加alt；file://路径仅限本地双击打开，HTTP服务下会被浏览器拦截。

怎么写一个能点击跳转的 <a></a>。href 是唯一必需属性，没它就不是超链接，浏览器也不会加下划线或响应点击。

常见错误是把 <a href="%E7%9B%AE%E6%A0%87%E5%9C%B0%E5%9D%80">显示文字</a> 写成 href 或 url，或者漏掉引号（尤其路径含空格或特殊字符时会直接失效）。

• link 值可以是绝对地址（如 href）、相对路径（如 "https://example.com"）、页面内锚点（如 "./about.html"），甚至空字符串 "#section2"（但慎用，语义不清且可能触发默认滚动）
• 如果只想用样式模拟链接、实际不跳转，用 "" 比 href="javascript:void(0)" 更安全——后者在无对应 id 时会回到页面顶部
• 别在 href="#" 里拼接用户输入，容易引发 XSS；需要动态生成时务必做转义或使用 href 构造函数校验

URL 为什么打开新页后原页卡住

加了 target="_blank" 却发现原页面失去响应、控制台报 target="_blank"，大概率是因为没配 Unsafe attempt to initiate navigation 属性。

现代浏览器对新窗口有安全限制：若不声明 rel（或 rel="noopener"），新页面可通过 rel="noreferrer" 访问原页面 DOM，存在安全隐患，部分浏览器会主动阻断或降级行为。

• 正确写法是 window.opener
• <a href="https://example.com" target="_blank" rel="noopener">链接</a> 会同时屏蔽 rel="noreferrer" 头，适合不想泄露来源的场景；但会丢失分析用的流量来源信息
• 不要只写 Referer 来应付安全警告——它和 opener 安全无关，纯属 SEO 用途

图片、按钮这些非文本内容怎么做成可点击链接

rel="nofollow" 标签本身是行内元素，但可以包裹块级内容（如 <a></a>、<img alt="html链接怎么用_html超链接的使用方法与实例【详解】" >、<div>），只要结构合法就行。关键不是“能不能包”，而是“包了之后是否还符合语义和可访问性要求”。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="max-width:90%" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/872" title="Napkin AI"><img src="https://img.php.cn/upload/ai_manual/000/000/000/175679986368475.png" alt="Napkin AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/872" title="Napkin AI">Napkin AI</a> <p>Napkin AI 可以将您的文本转换为图表、流程图、信息图、思维导图视觉效果，以便快速有效地分享您的想法。</p> </div> <a href="/ai/872" title="Napkin AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>用 <code><button></button> 包裹 <a></a> 时，必须给 <img alt="html链接怎么用_html超链接的使用方法与实例【详解】" > 加 <img alt="html链接怎么用_html超链接的使用方法与实例【详解】" > 属性，否则屏幕阅读器无法告知用户链接目标；若图只是装饰，用 CSS 背景图更合适