Standardize your web pages_CSS/HTML

Web standards are becoming more and more prominent. Nowadays, when building a website, it is important to comply with the standards and pass W3C's XHTML and CSS verification. So how can I make a website that meets the standards? The following is my BLOG reconstruction and production OSdev Some experiences in the Resource process^_^.

Go to Web Designer to read some articles about Web standards

Although w3.org is more authoritative, for those of us whose native language is Chinese, this is easier to understand:) Personally, I feel more comfortable than going to w3.org to read those E-texts that fill the screen. You can find many articles about XTHML, DIV+CSS layout, CSS techniques, etc. here. There is also a "Step by Step" tutorial written by the webmaster Ajie, which introduces step by step how to create a website that meets standards.

Discard the table and use div+css layout

This seems to be the first thing to do when designing a web page that meets standards:), DIV+CSS layout is also a trend. To use DIV+CSS layout, you can refer to w3cn.org’s articles: 16 examples of CSS basic layout, Typical three rows and two columns centered height adaptive layout.

Close tag

In the past, maybe we didn’t pay attention to the problem of closing tags, such as img, p, etc. When using these tags, we often only used the beginning without closing it correctly. Usually, we use img like this:

But in XHTML, such a situation is not allowed and should be turned off:

Furthermore, the paragraph mark

used to be used directly as

, but I never thought of adding

at the end of the paragraph, which is not allowed in XHTML.

Nest tags correctly

The fault tolerance of the browser allows us to get the correct display effect even if we write a web page that does not comply with the rules, such as using

sample

No problem, again, this is not allowed in XHTML. XHTML comes from XML, and XML must be structural, so when nesting tags, they must be nested layer by layer without interleaving.

Set the character set correctly

It doesn’t seem to matter much, but setting the character set is more conducive to the browser’s parsing of the document.

Alignment of pictures

In XHTML, the align attribute can only be one of the three values ​​​​of left, middle, right or top, middle, and bottom, and many times we need the image and text to be absolutely centered, that is, use absmiddle. After using XHTML, this attribute must be lost. What is the solution? I don’t know, but there is an article in Web Designer that mentions this problem. When I restructured the blog, I set the image alignment to top, and the display effect was acceptable.

handles &

in links

When using the GET method to pass parameters in a dynamic website, if there are multiple parameters, & will be used to connect each parameter. However, in XHTML, if there is an &, it means that the following is an entity, but no one should think that The parameter names should be nbsp, lt, gt. XHTML stipulates that all & that are not entities must be converted into &. If the conversion is not performed, an error will be reported during W3C verification and the entity cannot be found.

In fact, I personally feel that making a website according to standards is much easier than making a website according to traditional methods. Because the structure and content are separated, you don’t need to redo the entire page when changing the display effect. You only need to rewrite the style in CSS. . And it is convenient for future revisions. Moreover, like Fdream’s FBS, it can change skins without refreshing, which is a good thing~~