Un chauffeur expérimenté vous apprend à rédiger une page avec une bonne compatibilité

Avant d'écrire une page avec une bonne compatibilité, vous devez d'abord apprendre le HTML et le HTML5, puis avoir une certaine maîtrise du CSS et du CSS3.

Habituellement, une fois que les différents types de sites Web ont été soigneusement composés, ils ont un certain degré de maîtrise du front-end, et l'écriture de pages statiques n'est pas un gros problème. Quant au nombre, c’est plus de 3 sites complets.

Rappel : Si vous souhaitez écrire une page très compatible, js est indispensable. C'est un peu difficile pour les débutants d'apprendre le front-end, mais ne soyez pas timide, apprenez. en fonction des progrès de l'apprentissage, apprenez d'abord le HTML CSS, puis apprenez le HTML5 CSS3, puis apprenez le JavaScript. Même si vous êtes autodidacte, vous pouvez certainement apprendre le HTML CSS en 2 mois environ et le JavaScript en un mois. de.

Si vous ne connaissez toujours pas ce qui précède, allez apprendre : Tutoriel vidéo HTML, Tutoriel HTML5 , Tutoriel vidéo CSS, Tutoriel vidéo CSS3, Tutoriel vidéo javascript.

Assez parlé, parlons de la façon d'écrire une page web avec une bonne compatibilité :

1. La déclaration du document est essentielle :

En fait, cela n'a aucun rapport direct avec les WCAG, mais pour le bien d'une page avec une meilleure compatibilité, notamment une rétrocompatibilité, cette chose doit être écrite :

< !doctype>

2. Essayez de ne pas utiliser de balises de compatibilité

Pendant le processus d'apprentissage, vous disposez déjà d'une certaine compatibilité si vous souhaitez l'utiliser, sauf que vous seul. Je souhaite que l'effet de cette balise soit efficace dans certains navigateurs, en particulier H5. Désormais, de nombreuses balises ne sont pas uniformément valables dans tous les navigateurs.

3. Assurez-vous d'effacer le format avant d'écrire du CSS.

Effacer le format de la balise est nécessaire car la plupart des balises sont compatibles mais doivent être utilisées, par exemple La balise ul a des marges extérieures par défaut sous IE6 et 7, et des marges intérieures par défaut sous IE8, Firefox et Google.

4. Les bugs courants du navigateur doivent être évités

Par exemple : dans un p imbriqué, si le p externe n'a pas de bordure, la marge supérieure du inner p sera invalide, cela affectera directement le DIV externe (c'est-à-dire l'effet du p externe margin-top)

5 L'élément enfant flotte et l'élément parent ne peut pas envelopper l'enfant. élément par défaut

Cette situation est généralement gérée avec la méthode if :

1 Ajoutez overflow:hidden à l'élément parent; Il faut s'assurer que l'élément parent ne sera pas disponible à l'avenir. L'élément à afficher, sinon il ne sera pas affiché.

<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. Ajouter un élément flottant clair après le dernier élément enfant flottant

<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 Le parent p définit des pseudo-classes : après et zoom

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

Principe : seuls les navigateurs IE8 et supérieurs et non-IE prennent en charge :after. Le principe est quelque peu similaire à la méthode 2. Le zoom (IE converti avec des attributs) peut résoudre le problème flottant de ie6 et ie7

4. . Élément parent Également flottant 5. Parent p définit le débordement : auto 6. Parent p définit l'affichage : 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. Problème de structure de composition

Si vous le souhaitez. le site Web doit être compatible Une bonne compatibilité, c'est comme construire une maison solidement, une charpente solide est la base. Par conséquent, si vous voulez que le site Web ait une bonne compatibilité, la structure de la charpente doit être bonne pour que. il a une bonne évolutivité. Cela s’applique à la fois au front et au back-office.

Comment établir le cadre front-end ? Je pense que nous pouvons prêter attention aux aspects suivants :

La structure hiérarchique doit être analysée brièvement, c'est-à-dire qu'il y a les concepts de couches supérieure, centrale, inférieure, gauche, centrale et droite

La structure doit d'abord être grande, puis petite. Par exemple, s'il y a des couches gauche et droite au milieu d'une page Web, elle l'est. il est préférable d'en avoir un grand au milieu, puis à gauche, puis à droite

Le meilleur ordre est d'abord en haut puis en bas, d'abord à gauche puis à droite, d'abord à l'extérieur puis à l'intérieur, d'abord le tout puis la partie

7. Concernant le positionnement et le flottement, etc.

Lorsque certains étudiants font la mise en page, lorsqu'il y a un écart dans la structure, il ajoutera soudainement des attributs de positionnement ou de flottement aux éléments. il trouve que tout va bien. On peut seulement dire qu'il a obtenu ce qu'il pense être un effet visuel, mais il ne sait pas si la compatibilité des pages Web est bonne ou non.

C'est un peu comme utiliser un couteau de boucher pour tuer un poulet. C'est surqualifié et utilisé de manière très inappropriée. Alors, utilisez ce qui doit être utilisé, et ne vous contentez pas de le positionner, de le faire flotter, etc.

8. Problèmes d'écriture CSS

Essayez d'utiliser la relation parent-enfant pour définir, par exemple : #top .left img{} Cela améliorera l'évolutivité et ne se produira pas dans le futur. La nouvelle classe="left" est en conflit avec cette gauche. Tant que l'identifiant n'est pas défini à plusieurs reprises, tout ira bien.