An experienced driver teaches you how to write a page with good compatibility

Before writing a page with good compatibility, you must first learn HTML and HTML5, and then have a certain grasp of CSS and CSS3.

Normally, after different types of websites have been typesetting seriously, they will have a certain degree of mastery of the front end, and writing static pages will not be a big problem. As for the number, it’s more than 3 complete websites.

Reminder: If you want to write a page with very good compatibility, js is essential. This is a bit difficult for beginners to learn the front-end, but don’t be timid. , learn according to the learning progress, first learn HTML+CSS, then learn HTML5+CSS3, after learning a certain program, then learn javascript, even if it is self-study, HTML+CSS will take about 2 months, and javascript will take one month. It can be learned.

If you still don’t know how to do the above, go and learn it: HTML video tutorial, HTML5 tutorial, CSS video tutorial, CSS3 video tutorial, javascript video tutorial.

I’ve said too much, let’s talk about how to write a web page with good compatibility:

1. Document declaration is indispensable:

Actually, this has no direct relationship with WCAG at all, but for a page with better compatibility, especially backward compatibility, this thing must be written:

2. Try not to use

if there is a compatibility label. During the learning process, you will already have some compatibility. If you want Use it, except that you only want the effect of this tag to be effective in certain browsers, especially H5. Now many tags are not uniformly valid in all browsers.

3. Be sure to clear the format before writing CSS

Clearing the tag format is necessary because most tags are compatible but must be used, for example The ul tag has outer margins by default under IE6 and 7, and has inner margins by default under IE8, Firefox, and Google.

4. Common browser bugs should be avoided

For example: in nested p, if the outer p does not have a border, the margin-top of the inner p will Invalid, it will directly act on the outer DIV (that is, the effect of the outer p margin-top)

5. The child element is floating and the parent element cannot wrap the child element by default

This situation is generally handled with the if method:

1. Add overflow: hidden; to the parent element; but in this case you have to ensure that the parent element will not be available in the future. The element to be displayed, otherwise it will not be displayed.

<style type="text/css">
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
.p2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<p class="p1">
<p class="left">Left</p>
<p class="right">Right</p>
</p>
<p class="p2">
p2 
</p>

2. Add a clear floating element after the last floating child element

<style type="text/css">
.p1{background:#000080;border:1px solid red}
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat{clear:both}
</style>
<p class="p1">
<p class="left">Left</p>
<p class="right">Right</p>
<p class="clearfloat"></p>
</p>
<p class="p2">
p2 
</p>

3. The parent p defines pseudo-classes: after and zoom

/*清除浮动代码*/ 
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1}

Principle : After is only supported by IE8 and above and non-IE browsers. The principle is somewhat similar to method 2. zoom (IE converted with attributes) can solve the floating problem of ie6 and ie7

4. The parent element also floats 5. Parent level p defines overflow:auto 6. Parent p defines display:table

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} 
.p2{background:#800080;border:1px solid red;height:100px;width:98%;} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

6. Typesetting structure problem

If you want the website to have good compatibility, it is like building a house. If you want a house to be built solidly, a solid frame is fundamental. Therefore, if you want the website to have good compatibility, the frame structure must be good so that it has good scalability. This applies to both the front and back offices.

How should the front-end framework be established? I think we can pay attention to the following aspects:

The hierarchical structure needs to be analyzed briefly, that is, there are the concepts of upper, middle, lower, left, middle, and right layers.

The structure should be made big first, then small. For example, if there is left and right in the middle of the web page, it is best to have a big one in the middle, then left, then right.

The best order is First up then down, first left then right, first outside then inside, first whole then part

7. Regarding positioning and floating etc

When some students are doing layout , when there is a deviation in the structure, he will add positioning or floating attributes to the elements at will. Suddenly he finds that it is fine. It can only be said that it has achieved what he thinks is a visual effect, but he does not know whether the web page compatibility is good or not. .

This is a bit like using a butcher's knife to kill a chicken. It is overqualified and used very inappropriately. So, use what should be used and don't just position it or float it.

8. CSS writing issues

Try to use the parent-child relationship to define, for example: #top .left img{}, this will improve scalability and will not occur in the future The new class="left" conflicts with this left. As long as the id is not defined repeatedly, it will be OK.