Maison > Article > interface Web > Trois points auxquels vous devez prêter attention lors de l'écriture de code HTML
Trois points auxquels vous devez prêter attention lors de l'écriture de code HTML
- php中世界最好的语言original
- 2018-01-22 10:48:371786parcourir
Cette fois, je vais vous apporter trois points auxquels vous devez faire attention lors de l'écriture de code html. Quelles sont les précautions lors de l'écriture de code html. Ce qui suit est un cas pratique, jetons un coup d'oeil.
Les points de mise en garde dont je souhaite parler dans cet article n'ont rien à voir avec la compatibilité des navigateurs. Ils sont principalement un résumé de plusieurs petits problèmes que j'ai rencontrés dans le projet. Bien que les problèmes soient mineurs, ils sont parfois très importants. gênant. Je les enregistrerai ici, je continuerai à l'ajouter ici s'il y a de tels problèmes plus tard.
1. Espace entre les balises en ligne
Normalement, lors de l'écriture de code HTML, il existe des habitudes telles que les sauts de ligne et l'indentation, telles que
<head>
<meta charset="utf-8">
<style>
html,body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
margin: 0;
padding:0;
}
#myDIV {
width: 200px;
height: 200px;
background-color: #ff0;
}
#myDIV > p{
width: 50px;
height: 50px;
display: inline-block;
background-color: #f00;
}
</style>
</head>
<body>
<p id="myDIV">
<p>p1</p>
<p>p2</p>
</p>
</body>Il y a un espace vide au milieu. La raison en est que s'il y a des espaces continus, des retours chariot et des sauts de ligne entre deux balises en ligne (ou un affichage défini : inline ou inline-block), ces symboles seront traités comme un symbole d'espace par défaut.
Par exemple, si nous ajoutons « ddd dd d d » entre deux balises p, l'effet est le suivant Quel que soit le nombre de symboles d'espacement connectés, l'effet final ne sera qu'un seul caractère d'espace
.Cela revient à écrire une classe de caractères directement dans un élément en ligne
mais à l'intérieur des éléments liés, les caractères d'espacement de début et de fin seront supprimés.
Ce que vous devez donc rappeler :
Lors de l'organisation des éléments en ligne, si vous devez éviter les espaces entre les balises, vous devez garder les balises étroitement liées.
Essayez d'utiliser .innerText ou .textContent lors du remplissage du contenu des éléments en ligne (Firefox ne prend pas en charge innerText, mais prend en charge cet attribut).
Si vous devez écrire des espaces dans le code HTML, veuillez utiliser la méthode de représentation des espaces de HTML
Cela dit, je pense que certaines personnes ont une compréhension biaisée des éléments en ligne. Ce qu'on appelle le "inline" est à l'opposé du soi-disant "bloc". Les éléments en ligne ne sont pas constitués de blocs et donnent l'impression que de l'eau coule lorsqu'ils rencontrent des obstacles. Par exemple, le contenu du code source
<p id="myDIV">
<p>p1</p> ddd dd d <p>p2</p>
<span> d dd d </span>
</p>span est divisé en deux paragraphes et ne constitue plus un bloc complet.
2. La bordure de marge par défaut de la balise body
Il n'y a rien à dire à ce sujet. Le corps des navigateurs modernes (supportant CSS3) et IE8 ont tous deux par défaut une marge de style CSS : 8px. . Certains autres labels l’ont également, je ne donnerai donc pas d’exemple ici. Souvent, nous n'en avons pas besoin. Nous avons besoin d'un paramètre similaire au début du style général du projet.
html,body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
margin: 0;
padding:0;
}3. Les caractères d'espacement spéciaux provoquent des anomalies d'affichage
Par exemple, il ne semble y avoir aucun problème dans le code source ci-dessous
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html,body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
margin: 0;
padding:0;
}
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#myDIV {
width: 200px;
height: 40px;
background-color: #ff0;
}
#myDIV a{
float: left;
width: 200px;
background-color: #f00;
}
</style>
</head>
<body>
<p class="tabbable" id="tabs" style="border:none;">
<!-- 页面标签列表 -->
<p id="myDIV" style="">
<a data-toggle="tab" href="#tab-content-0" >test0</a>
</p>
</p>
</body>
</html>En fait, dans devant la balise a Il y a un espace blanc anormal
La largeur de a doit être la même que la largeur de #myDIV, et a est flottant, mais l'affichage l'effet est le retour à la ligne, ce qui l'est aussi. C'est fou, n'est-ce pas ?
L'effet d'affichage normal est
Jetons un coup d'œil à ce qu'est ce blanc anormal.
Le premier est un espace anormal, et son composant URI est codé comme "%E3%80%80"
Le second est des espaces normaux, son code de composant URI est "%20"
Le troisième est une construction d'onglet normale, son code de composant URI est "%20%20%20%20", qui est en fait 4 espaces.
Vous pouvez le voir. Par conséquent, des performances anormales du code copié sur le site Web peuvent parfois être causées par cette raison.
Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Exemples détaillés de formatage de texte HTML
Bases de l'édition HTML (une lecture incontournable pour les novices)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!