Day 12: Verification and Common Errors_Basic Tutorial

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: 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: