html href 和 javascript href 的区别答案

【问题标题】：The difference between html href and javascript hrefhtml href 和 javascript href 的区别
【发布时间】：2014-06-13 02:18:16
【问题描述】：

有什么区别

 <a href="link"><img src="img" /></a>

和

 <img src="img" onclick="self.location.href='link'" />

如果不启用js，第二个选项将不起作用，还有什么？

UPD：是的，没有看到错误的引号。

【问题讨论】：

我很确定第二个在启用 JavaScript 的情况下无法工作；看起来像是语法错误。
不要使用 onclick。那是在乞求不可维护性。它在语义上也是不正确的。
@Sukima：语义不正确？
他的意思是应该是<img src="img" onclick="self.location.href='link'" />
不，我不是这个意思。 HTML 描述了内容的语义，添加逻辑（即 onclick）对标记没有帮助。分离关注点。将代码放在 JS 文件中，将样式放在 CSS 文件中，将结构放在 HTML 中。

【解决方案1】：

所有 on 处理程序都是基于 javascript 的，并且只有在启用 javascript 时才能工作。

你的第二个陈述是错误的，它应该是

<img src="img" onclick="self.location.href='link'" />

两者都是一样的，只是一个是html，另一个是javascript。

两个版本都有好处，但结果是一样的。

【讨论】：

【解决方案2】：

从用户体验来看，这两种方法没有区别（如果您将光标：指针样式应用于 javascript 方法）。

但在不同的领域存在显着差异。

语义。在语义级别上，您无法知道关联 javascript 的意图是什么。你知道当你使用锚元素时。然后可以确定这个元素（以及它的子元素）的目的是导航到其他地方。

它引导我们进入第二个领域 - SEO。要正确索引您的页面爬虫，您需要知道它的结构以及页面是如何关联的。爬虫不解释 javascript 代码。它只使用 HTML 代码来分析您的网站。

终于有了可访问性。它与语义直接相关。例如，屏幕阅读器在锚元素和图像元素上的行为不同。他们根本不会知道这个图像是一个导航元素。因此，您的用户的某些部分可能不会注意到存在锚点。

我的建议是不要在这种情况下使用 javascript。锚元素是最好的选择。

【讨论】：

【解决方案3】：

一个区别是纯 html href 不能改变端口号。如果要链接到不同的端口，则必须使用 js。

【讨论】：