Day 12: Verification and Common Errors_Basic Tutorial-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Day 12: Verification and Common Errors_Basic Tutorial

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 12:09 PM

After working hard for many days, we worked hard to learn to use XHTML+CSS to redesign our website. So how do we know that the pages we create really comply with web standards? W3C and some volunteer websites provide online verification programs to help us check whether pages comply with standards and provide help information for correcting errors. These checks are very useful and are the first thing I do when debugging a page.

1.XHTML validation

Validation URL: http://validator.w3.org/
Verification method: URL verification, file upload verification

If the verification is successful, "This Page Is Valid XHTML 1.0 Transitional!" will be displayed, as shown in the picture:

If the verification fails, more verification options and error messages will be displayed, as shown in the figure:

Generally, selecting "Show Source" and "Verbose Output" can help you find the line where the error code is located and the cause of the error.

Comparison table of common XHTML validation error causes

No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--DOCTYPE is not defined.
No Character Encoding Found! Falling back to UTF-8.--Undefined language encoding.
end tag for "img" omitted, but OMITTAG NO was specified--The image tag is not closed with "/".
an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--The attribute value must be quoted.
element "DIV" undefined---DIV tags cannot be in uppercase and must be changed to lowercase div.
required attribute "alt" not specified---The image needs to add the alt attribute.
required attribute "type" not specified---The tag called by JS or CSS misses the type attribute.

One of the most common errors is the capitalization of labels. Usually these errors are related. For example, if you forget a , other

tags will report errors, so don’t be afraid of seeing a bunch of errors. Usually when one error is solved, the other errors will disappear. If your page passes XHTML1.0 validation, you can place such an icon on the page: 通过XHTML1.0校验

The code is as follows:

2.CSS2 validation

Validation URL: http://jigsaw.w3.org/css-validator/
Verification methods: URL verification, file upload verification, direct code verification

If the verification is successful, "Congratulations, this document has passed the style sheet verification!" will be displayed. Hoho, the verification information supports Chinese. As shown in the picture:

If the verification fails, two types of errors will be displayed: errors and warnings. The error means that it must be corrected, otherwise it will not pass the verification; the warning means that there is code that is not recommended by W3C and it is recommended to modify it.

Comparison table of common CSS2 validation error causes

(Error) Invalid number: color909090 is not a color value: 909090 ---The hexadecimal color value must be added with a "#" sign, that is, #909090
(Error) Invalid number: margin-topUnknown dimension: 6pixels ---pixels is not a unit value, the correct writing method is 6px
(Error) The attribute scrollbar-face-color does not exist: #eeeeee --- Defining the scroll bar color is a non-standard attribute
(Error) value cursorhand does not exist: hand is a non-standard attribute value, modified to cursor:pointer
(Warning)Line: 0 font-family: It is recommended that you specify a type family as the last choice--W3C recommends that when defining fonts, end with a type of font, such as "sans-serif", to ensure Web fonts can be displayed under different operating systems.
(Warning)Line: 0 can't find the warning message for otherprofile --Indicates that there are non-standard attributes or values in the code, and the verification program cannot determine and provide corresponding warning information.

Similarly, after passing the verification, you can place a CSS verification passing icon, the code is as follows:

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Demystifying Screen Readers: Accessible Forms & Best PracticesMar 08, 2025 am 09:45 AM

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In

Create a JavaScript Contact Form With the Smart Forms FrameworkMar 07, 2025 am 11:33 AM

This tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.

Adding Box Shadows to WordPress Blocks and ElementsMar 09, 2025 pm 12:53 PM

The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.

Working With GraphQL CachingMar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Making Your First Custom Svelte TransitionMar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Classy and Cool Custom CSS Scrollbars: A ShowcaseMar 10, 2025 am 11:37 AM

In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand

Show, Don't TellMar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about