Applying web standards for website design-website reconstruction Reading Notes

Topic 1: Why do we need to create Web Pages Based on Web standards?
dozens of pages in the book indicate that "99.9% of webpages are outdated". The reasons for applying web standards are as follows:
1. One write, normally displayed everywhere. (Abandon the original practice of writing different CSS/html/script versions for different browsers)
2. Backward compatibility. (So that your website is rarely updated and can live longer)
3. save costs. (Restructured the page design with Code to reduce the page size and save bandwidth)

Question 2: How does one apply web standards?
1. Speak bye to your favorite HTML language! Your new love is XHTML.
A. Why xhmtl?
A) XHTML is the standard currently used to replace html4.
B) XHTML is a branch of XML and can interact well with other XML data;
C) XHTML has better consistency than HTML because it is the product of learning from HTML inconsistency.
d) XHTML is a development trend.
E) Old browsers can adapt to XHTML like HTML;
F) XHTML can work well on wireless devices and screen readers, just like running on a desktop browser. Therefore, good

after a good design, your website can meet the needs of mobile phone visitors without the WAP version.
G) It is a member of web standards.
H) It helps you express your habits of writing data together.
B. How do you do it from HTML to XHTML?
A) Use doctype and namespace. XHTML needs this thing as its DTD. As we have mentioned above, XHTML is a descendant of XML. Different doctype defines different standards, which directly affects the browser's parsing of Page code. Now we have three DTD types:
strict --- no labels and attributes of the presentation layer can be used, including width;
frameset --- adapted to the Framework page;
transitional-the criteria of the filter type, to a large extent, tolerate your persistent bad habits. In fact, this is what we are most familiar with. Open the code generated on the Asp.net page generated by you using vs.net, and you will see this header

<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en"

Http://www.w3.org/TR/html4/loose.dtd" >
< Html >
< Head >
..

This header is generated on the page of the blog garden I used to edit this article ). We can see the transitional keyword. Therefore, vs.net ide uses the filter standard by default. Unfortunately, the code generated by vs.net 2002 is incomplete. That is to say, the browser does not actually apply the XHTML standard.

<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en" >
< Html >
< Head >

However, the real insurance is.

<! Doctype HTML public "-// W3C // dtd xhtml 1.0
Transitional // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< Html Xmlns = "Http://www.w3.org/1999/xhtml" >

< Head >

< Title > Conforming XHTML 1.0 transitional Template </ Title >

</ Head >

< Body >


</ Body >
</ Html >

B) Write All tags in lowercase letters;
C) enclose all attribute values with quotation marks. Replace the single and double quotation marks with & apos; and & quot;. The attribute must be

Separate them with spaces;
D) All attributes must have values, for example, <TD nowrap = "nowrap"> <input... checked = "checked"/>;
E) All labels must be closed. For example, <p> Yes </P> or even <br/>, <input/> (note/there must be a space before)
F) do not use "--" in the comments. It can only be used at the beginning and end of the comments;
G) <= & lt; & = & amp; >=& GL;
2. Realize that the <center> <font> <embed> and other tags are illegal, and <br/> are meaningless. Correct use of CSS to control fonts, colors, and spaces.
3. Use as few tables as possible to control the layout, and use CSS to avoid multi-layer nesting of tables. And apply structured labels to replace tables.
I was frustrated that I used to use tables to control the layout. Even when I was writing a page, I used to write tables first, however, the problem is that the table cannot be expressed, so there is a data structure, such as the menu, in fact, the use of <ul> <li> menu1 </LI> <li> menu2 </LI> </ul> can better reflect the organizational structure of its data, and the rational use of CSS styles, we can also make various dazzling effects. For example, in the past, I used tables to control the gap between texts and transparent small GIF images to achieve the effect of continued white space, these codes are really convenient to achieve what I want, but these codes themselves do not mean anything. They just make your page code messy and bloated. Now, we can consider defining reasonable section styles such as P, H1, H2 to achieve the same display effect. At the same time, the data structure on your page is clear and clear, files are also reduced a lot-by the way, this is called structured element-free replacement of data and mixed representation. If these structured elements cannot meet your requirements, you can use Div and float attribute to control the arrangement relationship between Divs, the most remarkable result is that it is very convenient to change the positions of two "blocks" without having to get lost in nested tables! In addition, every element of your life has a meaningful and short ID. The meaning of "significance" is known to everyone on the earth. The brief is to save bandwidth and save money for your boss. Then, you can use # yourelementid {......} in CSS {......} to precisely define the style of an element. Finally, we would like to remind you not to use Div and cssclass too much. (You don't have to use fireworks to slice images. Laugh !)
4. Use dom-based ecmascript to precisely control page objects. Unfortunately, if you want to adapt to navigator4.0, which is an old thing that some people are using, you may still need to write code branches, because it does not support Dom.
5. accessibility. (I may not do some work for this purpose until the website is legally required to take care of blind people's access)

Question 3: CSS details.
1. Javascript is not needed where CSS can be used (because this is in line with the principle of code extraction), such:

< IMG SRC Using 'a.gif' Onmouseover = "This.src+' B .gif '" Onmouseout = "This.src+'a.gif '" Onclick = "Specified parameter location='xx.htm '"   />

Change

< A Href Using 'xx.htm' ID = "Mya" > & Nbsp; </ A > < Style > A # Mya {} { Width : 100px ; Height : 25px ; Background : URL ("a.gif ") ; Background-repeat : No-repeat ; ; } A # MYA: hover {}{Background:URL ("B .gif ");Background-repeat:No-repeat;} </ Style >

2. Different Versions of browsers have different levels of support for CSS. We can use external links and import for a classification.
As long as the browser supports CSS, General CSS effects are placed in the external style sheet for all browsers to use, write the CSS effects supported by browsers of higher versions in the imported style sheet. The Code is as follows:

< Link REL = "Stylesheet" Href = "/Allstyles.css" Type = "Text/CSS" Media = "All"   />
< Style Type = "Text/CSS" Media = "All" > @ Import "/advstyles.css "; </ Style >

3. Box Model (a page block like a table like a box) Bug
Ie5.x/window and most of us have such a bug. We only care about the size of each box when considering how to install many small boxes in a large box, I don't care about the size of things in the box. This is correct, but in the CSS standard, this is a bug, because width in CSS refers to the width of the content of the box !!! That is to say, if you specify a div whose width is 100px, the Border width of this div is 1px, And the margin and padding values are both 0, the final width of this DIV in ie5/win is 100px, while in other places such as IE6/win, ie5/Macintosh, ns6, 7, Mozilla, Safari, opera5, 6, and 7 finally occupy an area of PX in width. Now you are dizzy. The solution is to write your CSS table like this:

Div. boxclass1 {
Border: 20px solid;
Padding: 30px;
Background: # FFC;
Width: 400px;/* false value for IE4-5. */win */
Voice-family :"\"}"\"";
Voice-family: Inherit;
Width: 300px;/* Actual value for conformant browsers */
}
HTML> body. boxclass1 {
Width: 300px;/* Be nice to opera */
}

The principle is: IE4-5. */win and opera7 cannot be understood when reading the sound attribute, so stop reading and set the width value to 400px. However, opera's understanding of the box model is consistent with that of the CSS standard pair, therefore, the subsequent section specifically sets the value to 300px.
4. Space bug in IE/win
In the IE/win environment,
<TD> </TD>
And
<TD>

</TD>
The results are different. The second paragraph of XHTML code will generate redundant spaces. The solution is simple. Remove unnecessary spaces!
5. Float bug on IE6/win
The calculated height of a block that uses the float attribute layout in IE6/win is incorrect. If the content in the block is too high, IE6 deletes the content and the scroll bar disappears, you must press F11 twice to restore the scroll bar. You can use the following JS fix:

If (Document. All && Window. attachevent)
Window. attachevent ( " Onload " , Fixwinie );
Function Fixwinie ()
{
  If (Document. Body. scrollheight < Document. All. yourfloatbox. offsetheight)
{
Document. All. yourfloatbox. style. Display = 'Block ';
}
}

But it is best not to use float. Try it.

Position: absolute; left: 0

Combination
6. relative values in css2

P + P {} {
Text-indent:2em;
}
IMG + h3 {} {
Margin-top:15px;
}

What do you mean? The first line of P added after P is Indented by two characters, and the H3 after the figure is left blank with 15px.
7. Sliding Door Technology
Http://www.alistapart.com/articles/slidingdoors/

Topic 4: Others
Embedded Multimedia object
W3C advocates using <Object> but we are used to using <embed>. <Embed> currently, HTML and XHTML standard labels are not valid. The XHTML standard flash syntax is

< Object Type = "Application/X-Shockwave-flash" Data = "Movie.swf" Width = "400" Height = "300" >
< Param Name = "Movie" Value = "Movie.swf"   />
</ Object >

It is a pity that this standard-compliant writing method cannot be played continuously in IE/win, so the following standards and methods of normal use are available:

< Script Type = " Text/JavaScript " >
// <! [CDATA [
If (Navigator. minetypes && Navigator. mimetypes [ " Application/X-Shockwave-flash " ])
{
Document. Write (' < Embed SRC = " Movie.swf "