元素链接缺少必需的属性属性答案

【问题标题】：Element link is missing required attribute property元素链接缺少必需的属性属性
【发布时间】：2013-09-04 04:13:30
【问题描述】：

<!DOCTYPE html>
...
<link rel='stylesheet' id='basecss-css' href='http://www.someurl.com/modules/14ce1e21/peadig-eucookie.css' type='text/css' media='all' />

为什么验证器 (http://validator.w3.org/) 拒绝这个？什么属性是我不知道的“必需”？

错误：

错误行 408，列 142：元素链接缺少必需的属性财产。 …/modules/14ce1e21/peadig-eucookie.css' type='text/css' media='all' /> 元素链接的属性：全局属性 href crossorigin rel media hreflang type sizes 另外，title 属性在这个元素上有特殊的语义。

【问题讨论】：

我can't reproduce那个错误信息。
它很奇怪......但验证器无论如何都会抛出错误。
您的问题中可能缺少一些上下文。
可能是问题所在，因为它不在标题中？
@no9：正如 Jukka 在下面解释的那样（哪个答案应该被指示为 the 答案，这样你也可以在中有一个： <link rel='stylesheet' id='someId' href='folder/file.css' type='text/css' media='all' property='' />。适用于所有浏览器，并经过验证。这完全与 property 属性有关。

标签： html

【解决方案1】：

添加

property='stylesheet'

如果您不想将链接移动到文档的<head>。

<link rel='stylesheet' property='stylesheet' id='basecss-css'  href='http://www.someurl.com/modules/14ce1e21/peadig-eucookie.css' type='text/css' media='all' />

【讨论】：

【解决方案2】：

@stevelove 的建议显然是实用的解决方案，但这里是对“为什么”问题的理论答案：

虽然link 元素在旧版HTML 规范中的body 中是无条件无效的，但HTML5 有更多的宽松规则。根据 HTML 5.1 Nightly（这或多或少是验证器试图跟上的），文档正文中也允许使用 link element（只要允许使用短语内容），前提是它具有 itemprop 属性.这似乎使错误信息更加令人费解。部分解释是验证器实际上是针对 HTML5 + RDFa 进行验证，而 RDFa 定义了property 属性。问题仍然是验证器检查的具体 RDFa 定义是什么，因为该定义也需要重新定义 HTML 规则。

无论如何，错误消息中的信息已经过时。错误消息的更新速度显然没有验证器的基本功能那么快。

【讨论】：

查看 hawkeye126 的回答，了解如何解决此问题。
此错误消息自 2017 年起不再存在。

【解决方案3】：

您的<link> 在<body> 内吗？如果是这样，请尝试将其放在文档顶部的 <head> 中。

【讨论】：

除了验证之外，您应该始终将样式表放在文档的顶部，以避免阻塞页面的其余部分，如下所述：developer.yahoo.com/performance/rules.html#css_top
@stevelove（一年后/供将来参考）通常不会优化。在所有可能的世界中最好的情况下，您应该将关键的首屏 css 放在文档顶部的 <style> 中，并将其余部分放在底部。这是更快打开页面的最佳方式。您可以在网上找到有关此的文档，但并不总是可以做到（通常是业务代码的效率 > 性能）。

【解决方案4】：

W3C HTML5 验证器维护者在这里。正如另一个答案中所指出的，除了检查 HTML5 规范本身的要求外，验证器还检查 HTML+RDFa 1.1 规范中的要求：

http://www.w3.org/TR/html-rdfa/

虽然 HTML 规范本身说 link 通常不允许在正文中*，但 RDFa 规范说如果 link 元素具有 property 属性，则允许在正文中。

所以验证器消息基本上是在说，“link 元素只有在它具有 property 属性时才允许在这里。但是这个特殊的link 元素没有property 属性。”

＊ HTML 规范本身也规定，如果link 元素具有itemprop 属性，则它允许在正文中使用——但前提是link 元素没有rel 值。（itemprop 是“微数据”属性，其用途与 RDFa property 属性基本相同。

所以我们有两个不同的属性，它们都独立地影响link元素在文档中被允许出现的位置，这使得验证器中的检查逻辑变得复杂，从而难以发出更好、更有帮助的这种情况下的错误信息。

【讨论】：

【解决方案5】：

只是为了将来的需要，这是我的评论：

在w3c page我们有以下评论：

如果使用了rel属性，则元素被限制在头部元素。当与 itemprop 属性一起使用时，元素可以是在页面的头部元素和正文中使用，受制于微数据模型的约束。

所以错误可以通过将rel更改为itemprop来解决，因为rel是用于头部，itemprop可以用于主体。

希望对某人有所帮助。

【讨论】：

我找到了另一种解决方法，可以将rel和property组合在同一个标签中，例如<link rel='stylesheet' property='stylesheet' href='custom.css' type='text/css' media='screen' />

【解决方案6】：

它希望它出现在您的脑海中。但是，如果 css 不是太重要而不能立即加载，您会得到 google 的 pagespeed 工具，告诉您将其放在正文的底部。

例如，我使用其中一个 jquery 主题 (redmond) 来设置我的自动完成样式。无需将其放在我的页面顶部，因为它只会减慢其他所有内容。

所以，不要太担心完美的 w3c 验证。

【讨论】：