引发 HTML 中的拼写错误答案

【问题标题】：Raising errors for typos in HTML引发 HTML 中的拼写错误
【发布时间】：2015-05-22 21:00:07
【问题描述】：

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

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

而不是

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

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

【问题讨论】：

没有 FF 插件吗？它会找到损坏的链接和图像
我猜你永远不会再这样做了——一个小时花得值:) 不过说真的，我用 emmet 插件使用 sublime 文本，因为我的手指很胖，视力不好。
WebStorm 会警告您 HTML 属性中的无效值

标签： html css rel

【解决方案1】：

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

我鼓励您在此处获得一个可以提供帮助的编辑器，并利用该编辑器的自动完成/建议功能。例如，Visual Studio Code（和其他编辑者）将为您完成整个元素的制表符：见下文。

【讨论】：

【解决方案2】：

如果您使用的是 HTML5：

任何 HTML5 验证器 (†) 都应该能够报告此问题，因为 styelsheet 不是有效的链接类型。

您只能使用以下链接类型

defined in the HTML5 specification，或
registered 在微格式 wiki existing-rel-values 页面中。

† 有多种可用于 Firefox 的验证器，我不能推荐其中一种（无论如何，这将是题外话），但我们的姊妹网站 Software Recommendations 可能会有所帮助。

【讨论】：

【解决方案3】：

如果您想专门在 links 中查找拼写错误，这将捕获最多：

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

【讨论】：

【解决方案4】：

Firefox Web 开发人员工具会显示您的样式表未加载，如果它可以检测到，有时会显示错误。右键单击您的页面并选择“检查元素”或 ctrl-Shift-Q。您可以在网络面板中查看已下载的内容。也许那里的其他区域也会突出显示您的链接是一个问题。

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

【讨论】：