如何使用W3C Validator验证网页上HTML，JavaScript，CSS？

Validating web pages and contents like HTML, JavaScript, and CSS are important for web sites and application owners. As they are popular technologies they have a lot of different implementations where they can be a bit different from the standard. W3C provides a validator to check and provide feedback about the given web page.

验证网页和HTML，JavaScript和CSS等内容对于网站和应用程序所有者非常重要。 由于它们是流行的技术，因此它们具有许多不同的实现方式，它们与标准可能有所不同。 W3C提供了一个验证器来检查并提供有关给定网页的反馈。

什么是W3C(万维网联盟)？ (What is W3C (World Wide Web Consortium)?)

World Wide Web Consortium (W3C) is an international community where its members, staff try to drive Web standards forward. The main standard W3C working is HTML which is created by Tim Berners-Lee. As a standardizing entity, W3C provides standards and tools to set and check HTML. W3C provides HTML, JavaScrip and CSS validator for web pages.

万维网联盟(W3C)是一个国际社区，其成员，工作人员试图推动Web标准向前发展。 W3C的主要标准工作是由Tim Berners-Lee创建HTML。 作为一个标准化实体，W3C提供了用于设置和检查HTML的标准和工具。 W3C为网页提供HTML，JavaScrip和CSS验证器。

W3C验证器 (W3C Validator)

The W3C Markup Validator is provided from the Markup Validation Service page. We can see that the W3C Markup Validation service provides some options about delivering web pages and the validation configuration.

W3C标记验证器是从“标记验证服务”页面提供的。 我们可以看到W3C标记验证服务提供了一些有关交付网页和验证配置的选项。

https://validator.w3.org/

https://validator.w3.org/

验证交付方式/方法(Validation Delivery Ways/Methods)

From the screenshot, we can see that a web page can be delivered in 3 different ways.

从屏幕截图中，我们可以看到可以以3种不同方式交付网页。

通过URI / URL验证 (Validate By URI/URL)

Validate by URI will accept the URI or URL of the web page on the internet. Then we will click to the Check button. This delivery method is also the default and most popular way.  In this example, we will check the www.poftut.com web page which is Poftut’s home page.

Validate by URI将接受Internet上网页的URI或URL。 然后，我们将单击“ Check按钮。 这种传递方法也是默认的也是最流行的方法。 在此示例中，我们将检查Poftut主页的www.poftut.com网页。

通过文件上传验证(Validate By File Upload)

We can also deliver the web page from the local system by uploading it to the Markup Validation Service. We will select the Validate by File Upload and then click to the check. Keep in mind that some Internet Explorer versions may not work with this method.

我们还可以通过将网页上传到标记验证服务来从本地系统交付该网页。 我们将选择“ Validate by File Upload ，然后单击以进行检查。 请记住，某些Internet Explorer版本可能不适用于此方法。

通过直接输入验证(Validate By Direct Input)

We can also provide the Markup Code (HTML, JavaScript, CSS) directly to the text editor of the Markup Validation Service. We will use Validate by Direct Input like below.

我们还可以直接将标记代码(HTML，JavaScript，CSS)提供给标记验证服务的文本编辑器。 我们将使用如下所示的“ Validate by Direct Input 。

HTML /标记验证选项(HTML/Markup Validation Options)

We have learned the methods to validate HTML/Markup. But there are some options that can be used during validation. We can list these options by clicking to the More Options like below.

我们已经学习了验证HTML /标记的方法。 但是在验证过程中可以使用一些选项。 我们可以通过单击下面的“ More Options来列出这些选项。

• Character Encoding will be detected automatically by default but alternatively, we can select from the list explicitly.

  默认情况下会自动检测Character Encoding ，但也可以从列表中明确选择。

• Document Type will be detected automatically by default but we can select from the list lie HTML 1.0, XHTML, etc.

  默认情况下，系统会自动检测“ Document Type ，但我们可以从列表中选择HTML 1.0，XHTML等。

• List Messages Sequentially will list error/warning findings in an ordered list manner according to the finding location.

  List Messages Sequentially将根据发现位置以有序列表的方式List Messages Sequentially列出错误/警告发现。

• Group Error Messages by Type will group error/warning findings according to the type.

  Group Error Messages by Type将根据类型对错误/警告结果进行分组。

• Show Source will list the source code.

  Show Source将列出源代码。

• Show Outline

  Show Outline

• Clean up Markup with HTML-Tidy

  Clean up Markup with HTML-Tidy

• Validate error pages will validate the event an error page is returned.

  Validate error pages将验证返回错误页面的事件。

• Verbose Output will provide a more detailed output.

  Verbose Output将提供更详细的输出。

根据W3C验证站点的好处(Benefits Of Validating Site According To W3C)

帮助提高Google，Bing，Yandex等搜索引擎中的排名(Help Improve Rankings In Search Engines Like Google, Bing, Yandex)

Search Engines use a different metric in order to rank between web sites and web pages. One metric is the HTML/JavaScript/CSS validity of the page it ranks. If the Markup (HTML/JavaScript/CSS) has fewer errors or error-free it will rank the given web page higher and better. So validating web pages and sites for markup will provide some hints and ways for higher ranking in search engines like Google, Bing, Yandex.

搜索引擎使用不同的指标，以便在网站和网页之间进行排名。 一种指标是其排名页面HTML / JavaScript / CSS有效性。 如果标记(HTML / JavaScript / CSS)的错误较少或没有错误，则它将使给定网页的排名更高，更好。 因此，验证网页和网站的标记将为在Google，Bing，Yandex等搜索引擎中提高排名提供一些提示和方法。

帮助学习最佳实践(Help Learning Best Practices)

Standards are defined also according to the best practices for the given area. HTML standards are also defined with best practices and updated according to these best practices over time. We can better learn the best practices by testing existing pages or creating some HTML code and validating against these HTML standards and best practices.

还根据给定区域的最佳实践来定义标准。 HTML标准还定义了最佳实践，并且会随着时间的推移根据这些最佳实践进行更新。 通过测试现有页面或创建一些HTML代码并对照这些HTML标准和最佳做法进行验证，我们可以更好地学习最佳做法。

改善网站访客体验 (Improve Website Visitor Experience)

Standards are also defined as making the user experience better. In the end, every visitor or user will benefit from a valid web site and web page with a better experience. With valid web sites and pages, the visitor will see everything perfectly, smoothly as expected by the web site/page owner.

标准还定义为使用户体验更好。 最后，每个访问者或用户都将从一个具有更好体验的有效网站和网页中受益。 使用有效的网站和页面，访问者将完美，流畅地看到网站/页面所有者所期望的所有内容。

使网站浏览器友好 (Make Website Browser Friendly)

Well in the previous part we have talked about the user’s experience. The web site or page is shown to the visitor by a browser. There are different browsers the users and visitors are using. The markup code (HTML, JavaScript, CSS) will be interpreted and displayed by these browsers. Browsers also try to implement markup standards strictly in general. Making our web site/page will make the web site/page browser friendly.

在上一部分中，我们讨论了用户的体验。 该网站或页面通过浏览器显示给访问者。 用户和访问者正在使用不同的浏览器。 这些浏览器将解释并显示标记代码(HTML，JavaScript，CSS)。 浏览器通常也尝试严格实施标记标准。 建立我们的网站/页面将使网站/页面浏览器友好。

多个设备(平板电脑，电话，嵌入式)的可访问性 (Multiple Device (Tablet, Phone, Embedded) Accessibility)

Today a lot of different types of end-user devices exist. These devices generally have different features, screen sizes, capabilities where it may create some incompatibilities. A validated web site/page will be shown in these different types of devices properly.

如今，存在许多不同类型的最终用户设备。 这些设备通常具有不同的功能，屏幕尺寸和功能，可能会导致某些不兼容性。 经过验证的网站/页面将正确显示在这些不同类型的设备中。

替代验证器 (Alternative Validators)

As the W3C is the markup standard creator for languages like HTML, JavaScript, CSS, etc. it provides the most proper markup validator. But there are alternative markup validators to the W3C version which can provide some extra features. Here are some of them.

由于W3C是HTML，JavaScript，CSS等语言的标记标准创建者，因此它提供了最合适的标记验证器。 但是W3C版本有替代的标记验证器，可以提供一些额外的功能。 这里是其中的一些。

沃森博士 (Dr. Watson)

Dr. Watson is a program error debugger for Windows operating system but is provides some markup validation capabilities which is used with the following validator.

Watson博士是Windows操作系统的程序错误调试器，但提供了一些标记验证功能，可与以下验证器一起使用。

• Analyze HTML syntax

  Analyze HTML syntax

• Verify regular links

  Verify regular links

• Verify image links

  Verify image links

• Generate word counts

  Generate word counts

• Spell-check non-HTML text

  Spell-check non-HTML text

• Compute estimated download speeds

  Compute estimated download speeds

• check search engine compatibility

  check search engine compatibility

• Check site link popularity

  Check site link popularity

HTML验证程序(Firefox插件) (HTML Validator (Firefox Plugin))

HTML Validator is a Firefox plugin where it can only use with Mozilla Firefox browsers. It can be installed from the following link.

HTML Validator是Firefox插件，只能在Mozilla Firefox浏览器中使用。 可以从以下链接安装。

https://addons.mozilla.org/en-US/firefox/addon/html-validator/

https://addons.mozilla.org/zh-CN/firefox/addon/html-validator/

萤火虫 (Firebug)

Firebug is another popular plugin used by web developers as a browser plugin. Firebug can also validate HTML, CSS, DOM, JavaScript, and provides detailed error and warnings about validated page. Firebug can be installed from the following links.

Firebug是Web开发人员用作浏览器插件的另一个流行插件。 Firebug还可以验证HTML，CSS，DOM，JavaScript，并提供有关已验证页面的详细错误和警告。 可以通过以下链接安装Firebug。

https://chrome.google.com/webstore/detail/firebug-lite-for-google-c/ehemiojjcpldeipjhjkepfdaohajpbdo?hl=en

https://chrome.google.com/webstore/detail/firebug-lite-for-google-c/ehemiojjcpldeipjhjkepfdaohajpbdo?hl=zh-CN

https://blog.getfirebug.com/

https://blog.getfirebug.com/

CSS HTML验证程序(CSS HTML Validator)

CSS HTML validator is a Windows application which check the HTML, CSS, SEO, accessibility, links, and more on a web page and web site. It is paid applications that have Trial, Standard, Professional, and Enterprise Editions.

CSS HTML验证程序是Windows应用程序，用于检查网页和网站上HTML，CSS，SEO，可访问性，链接等。 它是具有试用版，标准版，专业版和企业版的付费应用程序。

总验证者(Total Validator)

Total validator is free and paid web site checker about the HTML, CSS, broken links, spelling errors. It is a cross-platform application where it can work on Windows, Linux, and MacOSX without a problem.

Total Validator是免费的并且收费的Web站点检查器，用于检查HTML，CSS，断开的链接，拼写错误。 它是一个跨平台应用程序，可以在Windows，Linux和MacOSX上正常运行。

翻译自: https://www.poftut.com/how-to-validate-html-javascript-css-on-web-pages-with-w3c-validator/