在HTML中引发拼写错误的错误

Question

我花了一个小时试图找出CSS脚本没有加载的原因。事实证明这是因为我打字：

<link rel="styelsheet" href="path/to/script">

而不是

<link rel="stylesheet" href="path/to/script">

如果Firefox对我说了些什么就好了，比如styelsheet is unknown，或者其他什么。我会马上意识到错字。有什么方法可以在控制台中获得它吗？

Answer 1

没有什么能阻止您使用自己的自定义link属性扩展 rel元素。因此，假设您知道自己在做什么，浏览器可能会选择保持沉默：）

我建议你找一个有帮助的编辑器，并利用所述编辑器的自动完成/建议功能。例如，Visual Studio Code（以及其他编辑者）将为您选项卡填写整个元素：请参阅下文。

Answer 2

如果您使用的是HTML5：

任何HTML5验证器（†）都应该能够报告此情况，因为styelsheet不是有效的链接类型。

您只能使用

的链接类型

• defined in the HTML5 specification或
在Microformats wiki registered页面中
• existing-rel-values。

†Firefox有各种验证器，我不推荐一个（不管怎么说它都是偏离主题的），但我们的姐妹网站Software Recommendations可能有所帮助。

Answer 3

如果你想在link内专门找到拼写错误，那么这一点最多：

var links= document.querySelectorAll('link');

for(var i = 0 ; i < links.length ; i++) {
  if(!links[i].rel || links[i].rel !== 'stylesheet' || !links[i].href) {
    console.log('ERROR: '+links[i].outerHTML);
  }
}

Fiddle

Answer 4

Firefox Web开发人员工具将显示您的样式表未加载，如果可以检测到，则有时会显示为错误。右键单击您的页面，然后选择＆＃34; Inspect Element＆＃34;或者ctrl-Shift-Q。您可以在网络面板中查看已下载的内容。也许其他地区也会突出您的链接作为一个问题。

所以，是的，Firefox和其他浏览器会以某种方式将该行标记为问题。