Web2.0 the XHTML+CSS design needs attention in the local summary _ Experience Exchange

Source: Internet
Author: User
Tags lowercase require
Note:
1, except the choice DOCTYPE statement must use the lowercase English letter writing. These include mouse actions generated by Macromedia Dreamweaver, such as OnMouseOver, which must also be modified to OnMouseOver.

2. XHTML regulations require that all logos must have a beginning and an end. For example, <body> and </body>, <p> and </p>, for a pair of identifiers, require a space in the logo and then a "/". For example <br> written <br/>, written as
3. All XML tags must be properly nested. If:<p><b></p></b> must be modified to:<p><b></b></p>, that is, a layer of nesting must be strictly symmetric.

4. All attributes must be enclosed in quotation marks "". such as:
5, all < and & special symbols expressed in code. For example: any less than (<), not part of the label, must be encoded as & L T; , any greater-than sign (>), which is not part of the label, must be encoded as & G T; , any number (&), which is not part of the entity, must be encoded as & a M p;. (no spaces between the letters)

6. Assign a value to all attributes. such as: <td nowrap> <input type= "checkbox" name= "Shirt" value= "medium" checked> must be modified to: &LT;TD nowrap= "nowrap" > <input type= "checkbox" name= "Shirt" value= "Medium" checked= "checked" >.

7, do not use "--" in the annotation content. such as:<!--here is the annotation-----------here is the annotation--> can replace the inner dotted line with an equal sign or a space <!--here is the annotation ============ here is the annotation-->.

The first part is the specification of the file header:

CODE:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "<a href=\" http://www.w3.org/TR/xhtml 1/dtd/xhtml1-transitional.dtd\ "target=\" _blank\ ">http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd </a> ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta http-equiv= "Content-language" content= "Utf-8"/>
<meta content= "All" name= "robots"/>
<meta name= "Author" content= "Siyizhu3722@msn.com,siyizhu"/>
<meta name= "Copyright" content= "Siyizhu's Simplelife, reprinted this site article please add the copyright"/>
<meta name= "description" content= "Siyizhu"/>
<meta content= "siyizhu,qq:87654080, Chu, Chinese, Hubei, China" name= "keywords"/>
[Copy to Clipboard]



In terms of the definition of CSS, it is worth recommending a common font setting, which reads as follows:
CODE:
Body {font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, song, Sans-serif; }
[Copy to Clipboard]


Fonts are selected in the order listed. If the user's computer contains Lucida Grande fonts, the document is specified as Lucida Grande. If not, it is specified as a Verdana font, and if there is no Verdana, specify the Lucida font, and so on;

Lucida Grande fonts for Mac OS X;

Verdana fonts are suitable for all Windows systems;

Lucida for UNIX users;

"Song body" suitable for Chinese simplified users;

If none of the fonts listed are available, the default Sans-serif font guarantees the invocation.


CSS uses four pseudo classes to define the style of the links, respectively: 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;}

But when writing must pay attention to the order, the correct order is: LVHA, if not so, it is likely that the effect is not the same as you expected.

The layout normalization of the middle part and the non-tabular implementation of the menu need to be guided by practice, not to write anything here first. Write a note about the code checksum below.

XHTML checksum common error reason tables:
No DOCTYPE found! Falling back to HTML 4.01 transitional--undefined doctype.

No Character Encoding found! Falling back to utf-8.--does not have a defined language encoding.

End tag for "IMG" omitted, but Omittag no is specified--picture label is not added "/" off.

An attribute value specification must a attribute value literal unless Shorttag YES is specified--property values must be quoted.

Element "div" Undefined---div tag cannot be capitalized, to be converted to lowercase div.

Required attribute "alt" not specified---picture requires an Alt property.

Required attribute "Type" is not specified---JS or the label of the CSS call misses the Type property.

CSS2 Check Common error reason tables:
(warning) Invalid number: color909090 is not a color value: 909090---Hexadecimal color value must be added with the "#" number, that is #909090
(warning) Invalid number: Margin-topunknown dimension:6pixels---Pixels is not a unit value, the correct spelling 6px
(warning) Property Scroll_bar-face-color does not exist: #eeeeee---Defines a nonstandard property of the scroll bar color
Warning line:0 font-family: It is recommended that you designate a family of species as the final option--w3c suggest font definitions, and end up with a category of fonts, such as "Sans-serif" to ensure that, under different operating systems, page fonts can be displayed
Warning Line:0 can ' t find the warning messages for Otherprofile--Indicates that there are non-standard attributes or values in the code, and that the validator is unable to determine and provide the appropriate 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.