Quelle est la structure à trois niveaux du front-end Web ?

La structure à trois couches du front-end Web est la suivante : 1. La couche de structure, qui est créée par des langages de balisage​​tels que HTML ou XHTML et est utilisée pour stocker tout le contenu que les clients souhaitent lire ou vue. Il peut inclure du texte, des images, des hyperliens et du multimédia (vidéo, audio, etc.). 2. La couche de présentation, créée par CSS, contient des instructions de style sur la façon d'afficher les documents Web dans un navigateur Web. 3. Couche comportementale, chargée de répondre à la question « comment le contenu doit réagir aux événements » et de rendre le site Web interactif, permettant aux pages de répondre aux actions des utilisateurs ou de changer en fonction d'un ensemble de conditions.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ordinateur Dell G3.

Le front-end Web est la page Web affichée aux utilisateurs, c'est-à-dire la partie frontale du site Web.

L'idée du développement Web front-end est de diviser les pages Web en trois niveaux, à savoir : la couche de structure, la couche de présentation (style) et la couche de comportement.

• La couche structurelle (couche structurelle) est créée par un langage de balisage tel que HTML ou XHTML. Les balises, ces mots qui apparaissent entre crochets, décrivent la signification sémantique du contenu Web, mais ces balises ne contiennent aucune information sur la façon d'afficher le contenu. Par exemple, la balise P exprime une telle sémantique : « Ceci est un paragraphe de texte. » La couche de présentation est créée par CSS. CSS répond à la question de savoir comment afficher un contenu pertinent.

• La couche comportementale est chargée de répondre à la question "comment le contenu doit réagir aux événements". Il s'agit d'un domaine dominé par le langage Javascript et le DOM.

• La couche de présentation et la couche de comportement d'une page Web existent toujours, même si nous ne donnons pas explicitement d'instructions spécifiques. À ce stade, le navigateur Web appliquera ses styles et gestionnaires d'événements par défaut à la couche structurelle de la page Web. Par exemple, les navigateurs laisseront des marges de page lors du rendu d'un élément "segment de texte". Certains navigateurs afficheront une boîte de dialogue indiquant la valeur de l'attribut title de l'élément lorsque l'utilisateur passe le pointeur de la souris sur un élément, etc.

HTML : Couche structurelle

La couche structurelle ou de contenu d'une page Web est le code HTML sous-jacent de la page. Tout comme la structure d’une maison constitue une base solide pour le reste de la maison, une base solide en HTML crée une plate-forme sur laquelle un site Web peut être créé. La couche structurelle est utilisée pour stocker tout le contenu que le client souhaite lire ou visualiser. La structure HTML peut contenir du texte et des images, ainsi que des hyperliens que les visiteurs utilisent pour naviguer sur le site Web. Ceci est codé en HTML5 conforme aux normes et peut inclure du texte, des images et du multimédia (vidéo, audio, etc.).

CSS : Couche de style

Cette couche dicte l'apparence d'un document HTML structuré pour les visiteurs du site Web et est définie par CSS (Cascading Style Sheets). Ces fichiers contiennent des instructions de style sur la façon d'afficher le document dans un navigateur Web. La couche de style comprend généralement des requêtes multimédias qui modifient l'affichage du site en fonction de la taille de l'écran et de l'appareil. Tous les styles visuels de votre site Web doivent être dans des feuilles de style externes. Vous pouvez utiliser plusieurs feuilles de style, mais gardez à l'esprit que chaque fichier CSS nécessite une requête HTTP pour le récupérer, ce qui affecte les performances du site.

JavaScript : couche comportementale

La couche comportementale rend un site Web interactif, permettant aux pages de répondre aux actions des utilisateurs ou de changer en fonction d'un ensemble de conditions. JavaScript est le langage le plus couramment utilisé pour la couche comportementale, mais CGI et PHP sont également fréquemment utilisés. Lorsque les développeurs font référence aux couches comportementales, la plupart font référence aux couches qui sont activées directement dans le navigateur Web. Vous pouvez utiliser cette couche pour interagir directement avec le DOM (Document Object Model). L'écriture de code HTML valide dans la couche de contenu est très importante pour l'interaction DOM dans la couche comportementale. Lors de la création de couches comportementales, les fichiers de script externes doivent être utilisés tout comme CSS pour optimiser la vitesse et les performances.

Développer les connaissances : les avantages de la superposition

1. Ressources partagées : Lorsque vous écrivez un fichier CSS ou JavaScript externe, n'importe quelle page du site peut utiliser le fichier. Si vous devez apporter des modifications à ce fichier, par exemple en mettant à jour certains styles de typographie sur votre site, chaque page utilisant cette feuille de style recevra les modifications. Il n’est pas nécessaire de modifier chaque page de votre site Web individuellement, ce qui peut s’avérer une tâche fastidieuse pour les grands sites Web.

2. Vitesse de téléchargement plus rapide :

Une fois le script ou la feuille de style téléchargé par le client pour la première fois, le navigateur Web le mettra en cache. Étant donné que ces ressources partagées sont désormais incluses dans le cache du navigateur, les autres pages demandées dans le navigateur se chargent plus rapidement, améliorant ainsi la vitesse et les performances globales des pages.

3. Équipes composées de plusieurs personnes :

Si plusieurs personnes travaillent sur le site en même temps, vous pouvez utiliser un système qui permet d'archiver et d'extraire les fichiers pour vous assurer que tout le monde utilise la dernière version. C'est encore plus difficile si le style et le comportement sont étroitement liés à la documentation structurelle.

4. Optimisation des moteurs de recherche :

Un site Web qui sépare clairement le style et la structure est susceptible de mieux fonctionner avec les moteurs de recherche, car ils peuvent explorer le contenu et comprendre la page plus efficacement sans s'enliser dans le style visuel et les informations comportementales.

5. Accessibilité :

Les feuilles de style et les fichiers de script externes sont plus accessibles aux personnes et aux navigateurs. Les logiciels tels que les lecteurs d'écran peuvent travailler plus facilement avec le contenu d'une couche structurelle sans avoir à gérer des styles qui sont de toute façon inutilisables.

6. Compatibilité ascendante :

Les sites conçus avec une couche de développement distincte sont plus susceptibles d'être rétrocompatibles, car les navigateurs et les appareils qui ne peuvent pas utiliser certains styles CSS ou dont JavaScript est désactivé peuvent toujours afficher le HTML. Vous pourrez ensuite enrichir progressivement votre site internet en utilisant les fonctionnalités des navigateurs qui les supportent.

(Partage de vidéos d'apprentissage : Démarrer avec le front-end Web)

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!