HTML 中出现拼写错误错误

Question

我刚刚花了一个小时试图找出为什么 CSS 脚本没有加载。原来是因为我输入了：

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

而不是

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

如果 Firefox 能对我说点什么就好了，比如 styelsheet is unknown 之类的。我会立即意识到这个错字。有什么方法可以在控制台中获取它？

Answer 1

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

我鼓励您找一个能在此处提供帮助的编辑器，并利用该编辑器的 auto-complete/suggestion 功能。例如，Visual Studio Code（和其他编辑器）将为您 tab-complete 整个元素：见下文。

Answer 2

如果您想具体查找 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 3

如果您正在使用 HTML5:

任何 HTML5 验证器 (†) 都应该能够报告这一点，因为 styelsheet 不是有效的 link 类型。

您只能使用 link 类型

defined in the HTML5 specification，或
registered in the Microformats wiki existing-rel-values 页。

† 有多种适用于 Firefox 的验证器，我不能推荐一个（无论如何它都会离题），但我们的姊妹网站 Software Recommendations 可能会有所帮助。

Answer 4

Firefox 网络开发人员工具将显示您的样式表未加载，如果它可以检测到，有时会显示为错误。右键单击您的页面，然后 select "Inspect Element" 或 ctrl-Shift-Q。您可以在网络面板中查看下载的内容。也许那里的其他区域也会将您的 link 突出显示为一个问题。

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

HTML 中出现拼写错误错误

Raising errors for typos in HTML

html

css

rel