我应该关心 W3C 验证吗？答案

【问题标题】：Should I care about W3C validation?我应该关心 W3C 验证吗？
【发布时间】：2013-09-07 13:58:57
【问题描述】：

我正在学习 AngularJS，我发现了一个像这样的简单代码：

<!DOCTYPE html>
<html>
   <head>
    <meta charset='utf-8'>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
</head>
<body ng-app ng-init="name = 'World'">
    <h1>Hello, {{name}}!</h1>
</body>
</html>

没有通过W3C验证测试，主要是因为有非标准属性（ng-app，ng-init）。

问题是：我应该关心我的应用程序的 W3C 验证吗？我应该放弃 AngularJS 吗？

【问题讨论】：

最好的 JavaScript 框架是 drumroll：NONE！需要向客户端转储额外的总计零个字节和零个 HTTP 请求，因为它已经支持（喘气！）JavaScript！警告：将要求您学习实际符合标准的 JavaScript。任何网络/软件开发人员可以做的最不专业的事情之一就是说，“我们怎么能过度复杂化我们的代码并通过添加不必要的依赖项来削弱它，因为我们没有费心去学习我们应该知道的东西？”跨度>
@John 完全同意。

标签： angularjs validation w3c-validation

【解决方案1】：

在您的 Angular 应用程序中使用前缀“data-”。示例：

<body data-ng-app data-ng-init="name = 'World'">
   <h1>Hello, {{name}}!</h1>
</body>

【讨论】：

在 Angular 4 中呢？如何在角度 4 中添加“数据-”

【解决方案2】：

您是否“应该”关心取决于您。那里有很多页面which are not valid HTML。

HTML5 允许以data- 为前缀的custom attributes，因此您可以使用one of the other equivalent directives，例如：

<span data-ng-bind="name"></span>

【讨论】：

【解决方案3】：

您可以使用标准的 data- html5 属性，据我所知，它对 Angular 也适用。比如：

data-ng-app=""
data-ng-init="xxx"

在 Angular 中的工作方式相同，并已通过 W3C 验证。

也看看这个：ng-app vs. data-ng-app, what is the difference?

除此之外，根据我的经验，当您的产品交付给可能具有不同客户端、版本等的大量人群（因此您正在构建网站或公共网络应用等）时，使用标准总是会更好。如果您正在使用 Angular 和 phonegap 构建一个 SPA 来创建一个移动应用程序，该应用程序将作为本机应用程序安装在移动设备上，标准可能不是那么重要，重要的是它可以在您的目标设备上运行。

【讨论】：

【解决方案4】：

这取决于您的项目的大小。

通常，HTML 约定有助于防止反模式并保持代码可维护性。

在我看来，该特定规则（要求以 -data 为前缀的标签是有效属性）有点多余，因为它倾向于促进无用的额外标记。

我想说，如果您在一个有很多开发人员的大型项目中工作，请坚持根据 WC3 约定验证您的 HTML。否则，就没有真正的优势。

【讨论】：

【解决方案5】：

您可以使用构建系统 GulpJs 并尝试我编写的插件，它完全符合您的要求：

将ng-directives 转换为data-ng-directives，这是 W3C 用于 html5 验证的规范。

经过大量测试，可在此处找到：https://github.com/pgilad/gulp-angular-htmlify

https://www.npmjs.com/package/gulp-angular-htmlify

【讨论】：

【解决方案6】：

W3C HTML5 验证器维护者在这里。我们已经讨论过如何更好地处理包含自定义属性（如 Angular 的 ng-* 属性）的文档的验证——尽管这些属性虽然非标准但仍然非常广泛和正确使用，因此让验证器发出“错误”关于他们的消息并没有真正帮助作者。

我添加到 HTML5 验证器以缓解这种情况的一个功能是“消息过滤”功能，它可以让您持续忽略对您不重要或无用的错误/警告消息。前端在这里：

http://validator.w3.org/nu/

提交文档进行检查后，在结果页面上，您会看到一个消息过滤按钮，如果您按下该按钮，您将获得所有错误消息的列表集，带有显示/隐藏复选框。

2017-02-06 更新：自定义属性的 HTML 规范提案正在讨论中

I recently added support for custom elements 到 HTML Checker（W3C 验证器）——因此，为了添加对自定义属性的支持，我可以使用类似于我用于实现它的机制。

但在 HTML 规范更新为允许之前，无法更改 HTML 检查器以允许自定义属性名称。为此，see the proposal being discussed in the HTML-spec issue tracker。

【讨论】：

非常好！有一种方法可以将过滤器传递给 vnu.jar github.com/validator/validator
@sideshowbarker 有什么办法可以绕过“致命错误：消息过多”（例如，超过 1000 个 ng- 错误）？
@KevinSylvestre 没有办法覆盖它你正在使用validator.w3.org/nu 但你可以使用vnu.jar 文件并像java -Dnu.validator.messages.limit=XXXXX ~/vnu.jar some-document-with-a-lot-of-errors.html 一样运行它（其中XXXX 是某个数字） .有关vnu.jar 文件的详细信息，请参阅validator.github.io/validator 并下载到github.com/validator/validator/releases/latest。
请不要。验证器本身的价值是 vue、angular 的无数倍，谁知道孩子们下周会想出什么。作为旁注，我完全同意 Marat-Tanalin 关于下划线/破折号前缀属性的假定偏好；它是通用的、非歧视性的且易于实施。
@tanguy_k 现在可以了，不管你是使用CLI版本还是设置自己的vnu.jar服务器：stackoverflow.com/a/52402947/2261442

【解决方案7】：

HTML 约定有助于防止反模式并保持代码可维护性。

是的。沿着这些思路，我最近在“为什么要验证？”中更详细地描述了这一点。我添加到 HTML5 验证器的“关于”部分的部分：

http://validator.w3.org/nu/about.html#why-validate

该部分的文本来源在这里：

https://github.com/validator/validator/blob/master/site/nu-about.html#L160

欢迎提出改进/添加建议的拉取请求。

我目前拥有的是这样的：

通过一致性运行 HTML 文档的核心原因检查器很简单：捕捉意外错误——你可能会犯的错误否则错过了 - 以便您可以修复它们。

除此之外，还有一些文档一致性要求（有效性规则） HTML 规范中的内容可以帮助您和您的文档的用户避免某些类型的潜在问题。解释原理在这些要求的背后，HTML 规范包含以下两个部分：

rationale for syntax-level errors

rationale for restrictions on content models and on attribute values

总结这两部分的内容：

有一些标记用例被定义为错误，因为它们是可访问性、可用性、互操作性的潜在问题，安全性或可维护性——或者因为它们可能导致糟糕的性能，或者可能导致您的脚本以以下方式失败难以排除故障。

除此之外，还定义了一些标记案例作为错误，因为它们可能会导致您遇到潜在的问题 HTML 解析和错误处理行为——也就是说，你最终会在 DOM 中出现一些不直观、意外的结果。

验证您的文档会提醒您注意这些潜在问题。

【讨论】：

【解决方案8】：

你可以install with npm:

$ npm install --save-dev gulp-angular-htmlify

【讨论】：

【解决方案9】：

尝试使用 https：在安全的 domail 上运行脚本：

使用 https 参考以下内容：

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
</head>
<body ng-app ng-init="name = 'World'">
    <h1>Hello, {{name}}!</h1>
</body>
</html>

【讨论】：