a标签中onclick跳转写法与href属性跳转的区别是什么？

首先明确两种写法的代码形式：

• 写法1：<a onclick="window.location.href = 'example.com'">Example.com</a>
• 写法2：<a href="example.com">Example.com</a>

两者的具体差异如下：

• 原生行为差异
  写法2是HTML标准定义的原生超链接写法，自带浏览器预设的超链接特性：鼠标悬停时浏览器左下角会显示目标地址，支持中键点击打开新标签页、右键菜单的「在新窗口打开」「复制链接地址」等操作，搜索引擎也能正常识别到该链接并抓取目标地址，对SEO友好。
  写法1本质是给标签绑定了点击跳转的JS事件，不具备原生超链接的默认行为：中键点击、右键链接相关操作全部失效，搜索引擎也无法识别这是可跳转的超链接，不利于页面收录。
• 可访问性差异
  写法2天然适配无障碍规则：键盘操作按Tab可以聚焦到该链接，按下回车键就能触发跳转，读屏软件也能正常识别为超链接元素。
  写法1如果没有额外补充tabindex、role="link"等无障碍属性，键盘无法聚焦该元素，读屏软件只会将其识别为普通文本，无障碍适配性极差。
• 运行依赖差异
  写法2的跳转完全由浏览器原生逻辑实现，不受JS禁用影响，只要页面正常加载就能触发跳转。
  写法1完全依赖JS执行，用户如果禁用了浏览器JS功能，跳转就会完全失效。
• 用户体验差异
  写法2默认自带超链接样式：默认有下划线、未访问是蓝色、访问过变紫色，鼠标悬停会显示手型光标，用户可以直观识别是可点击元素。
  写法1如果没有额外写CSS样式，默认是普通文本样式，鼠标悬停也不会显示手型光标，用户很难识别这是可点击的跳转元素。
• 容错性差异
  写法2的href属性会自动按浏览器标准规范解析URL，对相对路径、特殊字符的处理容错性更高。
  写法1中给window.location.href赋值的容错性更低，一旦路径格式书写不规范，更容易出现跳转失败的问题。

内容的提问来源于stack exchange，提问作者Ethan Scott