The transformation of thinking that hinders you from learning CSS. HTML structuring

Are you learning CSS layout? Isn't it possible to fully master the pure CSS layout? There are usually two ways to impede your learning:
The first possibility is that you have not understood the principle of CSS processing pages. Before you consider the overall performance of your page, you should first consider the semantics and structure of the content, and then add CSS for the semantics and structure. This article will show you how to structure HTML.

Another reason is that you are helpless with performance layer attributes that you are very familiar with (such as cellpadding, hspace, align = "left", and so on, I don't know what CSS statements to convert. When you solve the first problem and know how to structure your HTML, I will provide a list to list in detail what CSS is used to replace the original performance attribute.


Structured HTML

When we were just learning how to create a web page, we always thought about how to design the images, fonts, colors, and layout solutions. Then we use Photoshop or Fireworks to draw and cut into small images. Finally, you can edit HTML to restore all designs on the page.

If you want your HTML page to be displayed in CSS layout (CSS-friendly), you need to repeat it without considering the "appearance" first ", you must first consider the semantics and structure of your page content.

The appearance is not the most important. A well-structured HTML page can show any appearance. CSS Zen Garden is a typical example. CSS Zen Garden helps us realize the power of CSS.

HTML is not only read on computer screens. The images you carefully designed with photoshop may not be displayed on PDAs, mobile phones, and on-screen readers. However, a well-structured HTML page can be displayed anywhere on any network device through different CSS definitions.


Start thinking

First, we need to learn what is "structure". Some writers also call it "semantics ". This term means that you need to analyze your content block and the purpose of each content service, and then create an HTML structure based on the content.