[Chinese New Year notes]

After staying at home for a day, I also read the book website reconstruction-web standard design (PS: stop and take a look at it. It's just today, not a day ). After reading this book, I feel that this book is not very suitable for beginners. This book is good for those who have worked in Internet companies or have some experience. First, this book is not an ABC Book. Second, many examples in the book are problems encountered by the author in practice. People who have never experienced it cannot understand these problems, third, some content in the book records a development history of web design. html <br> layout, table layout, GIF transparent image layout, CSS layout, and the development process of CSS support by various browsers. It is not a basic book. It introduces the background of web development. From the author's understanding of the Web development process, we can see the author's strength (PS: the author was originally a Daniel ).

Chapter 1 ~ Chapter 4

They all introduce background knowledge. Personal comments do not like, and some of them want to go to bed. "99% of websites are outdated", poor HTML layout, browser compatibility, maintenance costs for table nested tables, and the benefits of CSS layout are coming in a new era. It is such a text. However, the background knowledge is still needed, because the reason why the Internet has evolved to the present (simply speaking, it has evolved to use CSS for layout) has gone through the previous "painful" experience. When I think about the shipping system, the company's consultant said, "you need to understand the business, but you need to understand some background knowledge, from this background, you will understand why it has evolved into today. There is a reason for the standard of the number of containers .". Next, let's take a look: With these background knowledge, you can better understand the problem. The new employee does not understand why our website does not use controls, so they have to build HTML on their own.CodeSame. Existence is reasonable * (^_^ )*

Chapter 5

10 reasons for switching to XHTML (p119 ). Add the following addresses to favorites:

Http://validator.w3.org check web code compliance W3C specifications

Http://jigsaw.w3.org/css-validator/ CSS standard validation service

Http://www.htmlhelp.com/tools/validator/ Markup Language validation service

Chapter 6

Basic XHTML knowledge. (Nothing to say)

XHTML rules(You can remember)

• Start with the correct doctype namespace
• Declare your content encoding language using Meta content elements
• Write All element and attribute names in lower case letters (PS: doctype must be in upper case or not recognized by the browser)
• Quote all attribute values
• Assign a value to all attributes
• Close all labels
• Close empty tags with spaces and slashes (PS: it is best to end empty tags with <span> </span>. We have encountered <SPAN/> incompatibility)
• Do not use "--" in the comment content
• Make sure that & lt; and & amp; are used to indicate the minor signs and the minor signs (PS: You can view the special characters in HTML)

Add:

• Do not use <font>
• Use H1 H2 and other structured, semantic tags
• Use <strong> instead of <B>

Chapter 7

Div, Id introduction, this part is relatively basic. Important:DivitisAndClassitisIn fact, this situation is excessive or even misuse of Div and class. Take a look at the actual example (the example of referencing the original book p149 ):

Classitis

<P class = "noindent"> This is a bad way to design web pages. </P>
<P class = "indentnomargintop"> there is no need for all these classes. </P>
<P class = "indentnomargintop"> classy designers avoid this. </P>
<P class = "indentnomargintop"> Class dismissed. </P>

Divitis

<Div class = "primarycontent">
<Div class = "yellowbox">
<Div class = "heading">
<SPAN class = "biggertext"> welcome </span> to the member page!
</Div>
<Div class = "bodytext"> welcome returning members </div>
</Div>
<Div class = "warning1"> if you are not a member <a href = "/gohere/" class = "warning2"> go here </a>! </Div>
</Div>

I have personally experienced this. When I just switched from the table structure to Div CSS, I didn't know how to control the page display effect very well. Basically, it was a div set of Div, then, each Div defines a class. Such code is also messy and difficult to maintain. "In the websites suffering from classitis, all the tags to be processed are surrounded by its own expanded, junk class. Classitis is marked as paralysis, which means that unnecessary content is added to any page. This distress first came from early designers who knew CSS ". "A childlike misunderstanding of CSS ". The author's points are really critical. Even today, it is difficult for us to avoid this situation in our website design, but we are making progress and improving. This also reminds me of the saying that "table cannot appear on our website". I think this is why I have not understood the essence.In fact, whether it is table, Div, or CSS, our final result is to ensure that the website page structure is clear.Do not think that DIV + CSS is used, and you will be standardized.

Chapter 8 ~ Chapter 10

These three chapters start with specific technical implementation, and it does not seem so boring. I will focus on some of my concerns.

• Use absolute path instead of relative path

Cause:

1: The relative path cannot be used due to the change of the referenced file path.

2: The browser interprets the relative path in different ways. The relative path is different in different browsers.

• Do not use Px after 0

Recommended usage:. Main {width: 0;} Not recommended usage:. Main {width: 0px ;}

• Add a semicolon to the end of the CSS style(For details, see p176)

Recommended usage:. Main {width: 0; padding: 25px 0;} It is not recommended that the end of. Main {width: 0; padding: 25px 0} has no semicolon.

• Is CSS case sensitive??

The answer should be as follows: CSS itself is case-insensitive, but the category and ID names are case-sensitive when associated with HTML.

• @ Import link do not use the style sheet, @ Import is only valid in version 5.0 and later.
• Block-level and inline-level elements. Block-level elements exist in their own "Boxes", followed by a hidden carriage return. An inline element is a part of a stream and is not followed by a carriage return.
• A. Link and other pseudo classes are ordered. Please write CSS in a certain order. Otherwise, A may not be displayed normally.(For details, see p197)

I found this problem in the "Level 2 page project", but I keep wondering. A. Link A. visited a. Hover A. Active they appear in the CSS file in this order. Http://meyerweb.com/eric/css/link-specificity.html specific can refer to here. The author also provides a technique to remember this order.LOVE-Ha(PS: I don't quite understand)

Google Tag: Chinese New Year notes, 2008 Chinese New Year, website Reconstruction

-- =Happy reading= --