必须用<a>包裹标题并配合CSS控制显示，否则语义错误、无障碍失效、移动端热区丢失；正确做法是<h1><a href="/about">关于我们</a></h1>并设display:block等样式。
标题本身不能直接变可点击区域，必须用 <a> 包裹并配合 CSS 控制显示行为——否则语义错误、无障碍失效、移动端热区可能丢失。
为什么不能直接给 <h1> 加 onclick
浏览器不把 <h1> 当交互元素：它没有默认焦点能力（tabindex 无效），屏幕阅读器不会提示“可点击”，键盘用户按 Enter 或 Space 也不会触发。强行加 onclick 还会绕过链接语义，影响 SEO 和可访问性。
- 即使加了
cursor: pointer和onclick，辅助技术仍视其为纯内容，不是导航控件 - 移动端 Safari/Chrome 可能忽略无
href的点击事件，尤其在缩放或双击检测场景下 - 若目标是跳转，
<a href="...">是唯一符合标准的语义化方案
正确做法：用 <a> 替代标题标签，并保持语义
HTML5 允许将 <a> 作为块级容器使用，只要它包裹的是流内容（如文本、图片等）。关键是要让 <a> 表现得像标题，同时保留链接能力。
- 结构上写成：
<h1><a href="/about">关于我们</a></h1>（推荐）或<a href="/about"><h1>关于我们</h1></a>（需确保父容器允许嵌套） - CSS 中设
display: block+text-decoration: none+color: inherit，让视觉和行为都与原<h1>一致 - 必须保留
href属性——空href="#"会破坏历史栈，应避免；若需 JS 处理，用href="javascript:void(0)"并加role="button"和tabindex="0"
移动端和悬停反馈容易被忽略的细节
只设 display: block 不够，点击热区还受 padding、border-spacing、父容器 overflow 等影响。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 给
<a>加padding: 0.5em 1em（而非margin），才能扩展可点击范围；margin不属于热区 - 在移动端必须加 CSS：
touch-action: manipulation，否则 iOS Safari 可能延迟 300ms 或完全不响应 - 如果标题在 flex 容器中，确保父级没设
overflow: hidden——它会裁剪掉<a>的 padding 区域，导致边缘点不中 - 悬停效果（如背景色变化）要作用在
<a>上，而不是外层<h1>，否则热区与视觉反馈不一致
当标题需要复杂交互时，别硬套 <h1>
比如带图标、下划线动画、点击后展开子菜单——这时标题已不是纯语义标题，而是控制组件。应放弃 <h1>，改用 <div role="heading" aria-level="1"> + <a> 或 <button> 组合。
- 例如：
<div role="heading" aria-level="1"><a href="/news" aria-label="最新动态">最新动态</a></div> - 若用
<button>，必须加type="button"防止表单提交，并手动处理焦点管理 - 所有自定义交互都要补全键盘支持：
Enter/Space触发，Tab可聚焦，aria-expanded同步状态
最常被漏掉的是：没检查父容器是否截断了 <a> 的 padding 热区，以及没加 touch-action: manipulation 导致 iOS 点击静默。这两处一错，整个“整块可点”就只剩视觉假象。
