Questions et réponses courantes pour les entretiens HTML et CSS

1. Comprendre les éléments HTML sémantiques et vides

Les éléments HTML sémantiques améliorent la structure des pages Web et le référencement. Ils donnent du sens au contenu, améliorant à la fois l’interprétation du navigateur et la lisibilité du code. Les exemples incluent <header></header>, <footer></footer>, <article></article>, <section></section>, <nav></nav>, <aside></aside> et <main></main>.

Les éléments vides (également appelés éléments void) ne contiennent aucun contenu entre les balises d'ouverture et de fermeture. Ils contrôlent efficacement la mise en page. Les exemples incluent <img alt="Questions et réponses courantes pour les entretiens HTML et CSS" >, <br>, <hr>, <meta>, <link> et <source></source>.

2. div contre span en HTML

L'élément <div> est un élément de niveau bloc, créant des blocs ou des sections distincts dans la mise en page d'une page Web. Il constitue la base de la structure des pages, contenant souvent des paragraphes, des images et d'autres éléments. Il est également fréquemment stylisé avec CSS. <p>L'élément <code><span></span> est un élément en ligne, utilisé pour styliser des parties spécifiques de texte au sein d'une ligne. Contrairement à <div>, cela ne crée pas de saut de ligne. Il est principalement utilisé avec CSS pour appliquer des styles à des parties de texte, comme changer la police ou la couleur. <p><strong>3. GET vs POST dans les formulaires HTML</strong></p> <p>Les méthodes GET et POST envoient des données à un serveur. GET ajoute des données à l'URL, limitant la taille des données (généralement 2 048 caractères) et exposant potentiellement des informations sensibles. Les navigateurs et les serveurs mettent souvent en cache les requêtes GET.</p> <p>POST envoie les données séparément de l'URL, améliorant ainsi la sécurité, en particulier pour les données sensibles telles que les informations de connexion. Chaque soumission POST crée une URL unique, empêchant la mise en favoris.</p> <p><strong>4. Stockage local vs stockage de session</strong></p> <p>Le stockage local conserve les données dans le navigateur de l'utilisateur, même après la fermeture et la réouverture du navigateur. Il est stocké sous forme de paires clé-valeur, spécifiques au domaine d'un site Web.</p> <p>Le stockage des sessions est similaire mais temporaire ; les données sont effacées lorsque l'onglet ou la fenêtre du navigateur est fermé. C'est également spécifique au domaine.</p> <p><strong>5. La propriété Z-index en CSS</strong></p> <p>La propriété <code>z-index contrôle l'ordre d'empilement des éléments HTML qui se chevauchent. Les éléments avec des valeurs z-index plus élevées apparaissent au-dessus des éléments avec des valeurs plus faibles. Ceci est crucial pour gérer la superposition visuelle dans les conceptions Web complexes.

6. Optimisation du chargement CSS

Optimisez le chargement CSS par :

• Placement du CSS critique dans la section .
• Réduire et compresser les fichiers CSS pour réduire leur taille.
• Diviser les gros fichiers CSS en modules plus petits et gérables et charger paresseux des feuilles de style non critiques.

7. Le modèle de boîte CSS

Le modèle de boîte CSS est un concept fondamental définissant la façon dont les éléments sont rendus sur une page. Chaque élément est traité comme une boîte rectangulaire avec quatre composants principaux : contenu (le contenu réel de l'élément), remplissage (espace entre le contenu et la bordure), bordure (la bordure de l'élément) et marge (espace entre la bordure de l'élément et les autres éléments). . Ces propriétés contrôlent la taille et l'espacement d'un élément.

8. Pseudo-classes et pseudo-éléments CSS

Les pseudo-classes modifient les sélecteurs en fonction de l'état de l'élément (par exemple, :hover, :active, :visited, :focus). Ils sont ajoutés à un sélecteur à l'aide de deux-points (:) avant le nom de la pseudo-classe.

Les pseudo-éléments stylisent des parties spécifiques d'un élément sans nécessiter de code HTML supplémentaire (par exemple, ::before, ::after). Ils utilisent un double deux-points (::) avant le nom du pseudo-élément.

9. Sprites CSS

Les sprites CSS combinent plusieurs images en un seul fichier image. Cela réduit le nombre de requêtes HTTP, améliorant ainsi les temps de chargement et les performances des pages. Les images individuelles sont ensuite sélectionnées à l'aide de CSS background-position pour afficher la partie correcte du sprite.

10. Requêtes multimédias CSS

Les requêtes multimédias permettent aux développeurs d'appliquer différents styles en fonction des caractéristiques de l'appareil (taille de l'écran, orientation, résolution, etc.). Cela permet une conception Web réactive, adaptant la mise en page et l'apparence d'un site Web à différentes tailles d'écran et appareils.