a标签可嵌套div等块级元素，但需确保href真实有效、避免嵌套交互元素、target="_blank"时必须加rel="noreferrer noopener"、img作唯一内容时alt须描述跳转意图。
a 标签能嵌套 div，但不是“随便嵌”——它合法，但一不小心就破坏语义、伤无障碍、坑 SEO。
href 属性必须写，且值要真实可解析
没有 href 的 a 不是链接，只是个空壳。浏览器不会给它手型光标，也不会被键盘 Tab 焦点捕获，更不会被搜索引擎当作导航入口。
- 绝对 URL：
href="https://example.com"—— 推荐用于跨域跳转 - 相对路径：
href="about.html"或href="../contact/index.html"—— 注意路径层级，本地测试时容易 404 - 锚点：
href="#section2"—— 要求目标元素有对应id="section2"，否则静默失败 - 伪协议：
href="mailto:admin@example.com"、href="tel:+8613800138000"—— 移动端调起默认应用，但需确保设备支持 - 空 href：
href="#"或href=""—— 触发页面顶部跳转或重载，多数情况应避免；如需 JS 控制，请改用button+role="button"
a 标签嵌套块级元素（如 div）是合法的，但有条件
HTML5 允许 a 包裹 div、h3、p 等块级元素，前提是它不位于 button、input 或另一个 a 内部。
- ✅ 合法：
@#@#@#@#@#@#@#@#@#@0 - ❌ 非法：
@#@#@#@#@#@#@#@#@#@1—— 浏览器会自动截断内层a，只保留外层 - ⚠️ 危险：
<button>@#@#@#@#@#@#@#@#@#@2</button>—— 触发双事件，且无法用空格/回车激活 - 无障碍隐患：整块
div被读作“同一个链接”，屏幕阅读器无法区分标题和描述，应优先用nav+li+a结构
target="_blank" 必须配 rel="noreferrer noopener"
不加 rel 属性时，新页可通过 window.opener 反向控制原页面，存在安全风险（如钓鱼跳转、历史记录篡改）。
- 正确写法：
@#@#@#@#@#@#@#@#@#@3 -
noreferrer：阻止 Referer 头泄露来源页 URL -
noopener：切断window.opener引用，防止新页操控原页 - 不要只写
rel="noopener"——noreferrer缺失时仍可能泄露敏感路径 - 内部跳转（如
href="/dashboard"）无需target，也不用加rel
img 嵌套在 a 里时，alt 必须描述目标，不是图片
img 是 a 的唯一内容时，它的 alt 就是链接的可访问性文案。写错等于对视障用户隐藏跳转意图。
- ✅ 正确：
@#@#@#@#@#@#@#@#@#@4 - ❌ 错误：
alt=""—— 屏幕阅读器跳过，用户不知这是什么链接 - ❌ 错误：
alt="小车图标"—— 描述外观，没说明动作或目的 - ❌ 错误：
alt="点击此处"—— 所有链接都可点，“此处”无上下文 - 如果
img仅作装饰（如背景图标），应设alt=""并确保a内有可见文本说明目标
真正难的不是语法是否合法，而是判断“这个嵌套是否让链接意图清晰、键盘可操作、屏幕阅读器可理解”。很多 bug 不报错，但用户就是卡住——得从语义和交互逻辑出发去检查，而不是只看浏览器渲染结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
