最直接的方式是用<a>标签包裹文字，因其提供语义、键盘导航及默认样式等基础能力；其他方案如onclick或role="link"仅为折中且存在可访问性风险。
用 <a> 包裹文字是最直接的方式
HTML 中没有“让段落文字可点击”的独立属性，必须用 <a> 标签显式定义链接行为。直接给 <p> 加 onclick 或 CSS cursor: pointer 只改变外观或触发 JS，但不提供语义、键盘导航、默认下划线/焦点样式等基础能力。
正确做法是把目标文字（哪怕是一整段）放进 <a> 里：
<p>这是一段普通文字</p> <p><a href="#section2">这是可点击的段落文字，点它跳转到页面某处</a></p>
- href 值可以是
#id（锚点）、/page.html（相对路径）、https://example.com（绝对 URL），甚至javascript:void(0)（慎用，需配 JS） - 若只是想响应点击事件而无跳转需求，仍建议用
href="#"+event.preventDefault()，比空 href 更符合可访问性 - 避免把大段 HTML（如含
<div>、<h3>）塞进<a>—— HTML5 允许，但部分旧浏览器或屏幕阅读器支持不稳定
用 role="link" 配合 tabindex 是折中方案
当无法修改 HTML 结构（比如 CMS 输出的 <p> 已固定），又需要让纯段落具备链接语义时，可加 ARIA 属性模拟：
<p role="link" tabindex="0" onclick="handleClick()">这段文字现在能被键盘 Tab 到，并有链接行为</p>
-
role="link"告诉辅助技术“这是链接”，但不会自动加下划线或悬停样式，需手动补 CSS：a, [role="link"] { text-decoration: underline; } -
tabindex="0"让元素可聚焦，否则键盘用户无法抵达；同时必须监听Enter和Space键（不只是click） - 不推荐在新项目中首选此方案 —— 它绕过了原生语义，增加维护成本和兼容风险
别忽略键盘与屏幕阅读器支持
很多开发者只测鼠标点击，结果导致可访问性失败。真实问题包括：
立即学习“前端免费学习笔记（深入）”；
- 用
onclick绑定的<p>默认不可键盘聚焦 → 用户按 Tab 键直接跳过 - 没设
aria-label或title→ 屏幕阅读器读不出“这是什么链接” - href 为
javascript:void(0)且没处理键盘事件 → 空格键不触发，键盘用户卡住 - 样式上没区分
:focus和:hover→ 键盘聚焦时看不到焦点框，违反 WCAG 2.4.7
最稳妥的起点：坚持用 <a>，确保 href 有效，再叠加 JS 行为。
CSS 的 cursor: pointer 只是视觉提示
这个样式常被误认为“能让文字变可点击”，其实它只是改鼠标图标，对功能零影响：
<p style="cursor: pointer;" onclick="alert('clicked')">看起来像链接，但没 href</p>
- 屏幕阅读器不会把它当链接读，键盘 Tab 无法选中，右键菜单没有“在新标签页打开”选项
- 搜索引擎不索引这类伪链接，也不计入页面链接结构分析
- 如果 onclick 里调的是异步操作（如 fetch），记得加 loading 状态和错误反馈，否则用户点击后毫无响应
真正复杂的点不在“怎么让它点”，而在“点完之后是否对所有人一致可用”——尤其是没碰鼠标的人。
