Notes for XHTML + CSS design under Web2.0

Source: Internet
Author: User

Note:
1. The statements except doctype must be written in lowercase English letters. This includes mouse actions generated by Macromedia Dreamweaver. For example, onmouseover must also be changed to onmouseover.

2. XHTML laws require that all identifiers must start and end. Such as <body> and </body>, <p>, and </P>. For unpaired identifiers, a space must be added at the end of the identifiers, then follow "/". For example, <br> written as <br/> and written as . The reason for adding spaces is to avoidCodeThe connected browser is not recognized.

3. All XML tags must be reasonably nested. For example, <p> <B> </P> </B> must be changed to <p> <B> </B> </P>, that is, nesting at a layer must be strictly symmetric.

4. All attributes must be enclosed by quotation marks. For example, <Height = 80> must be changed to <Height = "80">. In special cases, you need to use double quotation marks in the property values. You can use ", single quotation marks can use ', for example: <alt =" Say 'Hello' ">.

5. encode all <and & special characters. For example, any minor sign (<), not part of a tag, must be encoded as & L t;, and any major sign (>) is not part of a tag, all must be encoded as & g t; and Any and ampersand (&), not part of the entity, must be encoded as & A m p ;. (There is no space between the above Code letters)

6. assign a value to all attributes. For example, <TD nowrap> <input type = "checkbox" name = "shirt" value = "medium" Checked> must be changed: <TD nowrap = "nowrap"> <input type = "checkbox" name = "shirt" value = "medium" Checked = "checked">.

7. Do not use "--" in the comment content. Example: <! -- Here is the comment ----------- here is the comment --> you can use the equal sign or space to replace the internal dotted line <! -- Here is the comment ============= here is the comment -->.

First, write the standard file header:

code:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml "lang =" UTF-8 ">





Article Add copyright by the way "/>


[copy to clipboard]

In terms of CSS definition, it is recommended that you set a general font as follows:
Code:
Body {font-family: "lucida Grande", verdana, lucida, Arial, Helvetica,, sans-serif ;}
[Copy to clipboard]

The font is selected in the listed order. If your computer contains the lucida Grande font, the document will be specified as lucida grande. If no, It is specified as the verdana font. If no verdana is available, it is specified as the lucida font, and so on;

Lucida Grande fonts are suitable for Mac OS X;

Verdana fonts are suitable for all Windows systems;

Lucida is suitable for Unix users;

"" Is suitable for simplified Chinese users;

If none of the listed fonts are available, the default sans-serif font can be called.

In CSS, four pseudo classes are used to define the link styles: A: Link, A: visited, A: hover, And A: active. For example:

A: link {font-weight: bold; text-Decoration: none; color: # c00 ;}
A: visited {font-weight: bold; text-Decoration: none; color: # C30 ;}
A: hover {font-weight: bold; text-Decoration: underline; color: # f60 ;}
A: active {font-weight: bold; text-Decoration: none; color: # f90 ;}

However, you must pay attention to the order when writing. The correct order is lvha. If you do not write this statement, the effect is likely to be different from what you expected.

The layout normalization of the intermediate part and the non-Table Implementation of the menu need to be guided by practice. I will not write anything here. Below is a record of code verification.

The following table lists the common error causes for XHTML Verification:
No doctype found! Falling back to HTML 4.01 transitional -- The doctype is not defined.

No character encoding found! Falling back to UTF-8. -- language encoding is not defined.

End tag for "IMG" Omitted, but omittag no was specified -- the Image Tag is not added.

An Attribute Value specification must be an attribute value literal unless than tag yes is specified -- the attribute value must be enclosed in quotation marks.

Element "Div" undefined --- the DIV tag cannot be in upper case and must be changed to lower case Div.

Required attribute "Alt" not specified --- the image must contain the alt attribute.

Required attribute "type" not specified --- the type attribute is missing in the tag called by JS or CSS.

css2 verification common error causes table:
(warning) Invalid Number: color909090 is not a color value: 909090 --- The hexadecimal color value must be added, that is #909090
(warning) Invalid Number: margin-topunknown dimension: 6 pixels --- pixels is not a unit value, correct syntax 6px
(warning) attribute scroll_bar-face-color does not exist: # eeeeee --- defines non-standard attributes of the scroll bar color
(warning) line: 0 font-family: we recommend that you specify a category family as the final choice-W3C suggests that the font should end with a category font, for example, "Sans-serif ", to ensure that the webpage fonts are displayed in 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, verify that the Program cannot determine and provide the corresponding warning information

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.