Maison  >  Article  >  interface Web  >  Quelles sont les trois parties que comprend le front-end Web ?

Quelles sont les trois parties que comprend le front-end Web ?

青灯夜游
青灯夜游original
2022-08-23 16:53:437034parcourir

Trois parties du front-end Web : 1. La couche structurelle, qui est le squelette de la page Web, créée par le langage de balisage HTML ou XHTML, utilisée pour construire la structure du document et définir le contenu de la page Web, tels que le titre, le texte, les images, etc. 2. Représentation Le calque est le style de la page Web, créé par CSS, et est utilisé pour définir l'effet de présentation du document, tel que la couleur, la police, l'arrière-plan, etc. ; 3. La couche de comportement est le comportement de la page Web, créé par le langage JavaScript, et peut mettre à jour le contenu de la page Web en temps réel, par exemple, l'obtention de données du serveur et leur mise à jour sur la page Web peuvent faire la page Web plus vivante.

Quelles sont les trois parties que comprend le front-end Web ?

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

Trois parties du front-end Web

W3C fait référence au World Wide Web Consortium (World Wide Web Consortium), créé en octobre 1994. L'émergence du W3C consiste à personnaliser les normes de développement Web, afin qu'une même page Web puisse avoir le même effet dans différents navigateurs. Nos pages Web personnalisées doivent donc suivre les spécifications du W3C.

Selon les standards du W3C, une page web est principalement composée de trois parties : la couche structure (HTNL), la couche présentation (CSS) et la couche comportement (JavaScript).

Couche structurelle

La couche structurelle est le squelette de la page, créé par le langage de balisage HTML ou XHTML, et utilisé pour construire la structure du document.

HTML est utilisé pour définir le contenu d'une page Web, tel que le titre, le texte, les images, etc.

Couche de présentation

La couche de présentation est le style de la page, qui est créé par CSS (Cascading Feuille de style) et est utilisée pour définir l'effet de présentation du document.

CSS est utilisé pour contrôler l'apparence des pages Web, comme les couleurs, les polices, les arrière-plans, etc.

Couche de comportement

La couche de comportement est le comportement de la page, créée par le langage JavaScript, et utilisée pour implémenter le comportement du document.

JavaScript est utilisé pour mettre à jour le contenu de la page Web en temps réel, comme obtenir des données du serveur et les mettre à jour sur la page Web, modifier le style de certaines balises ou leur contenu, etc., ce qui peut rendre le page Web plus vivante.

En termes simples, JavaScript, HTML et CSS constituent ensemble les pages Web que nous voyons

  • HTML est utilisé pour définir le contenu des pages Web, tel que les titres, le texte, les images, etc.

  • CSS ; est utilisé pour contrôler l'apparence de la page Web, comme la couleur, la police, l'arrière-plan, etc. ;

  • JavaScript est utilisé pour mettre à jour le contenu de la page Web en temps réel, comme obtenir des données du serveur et mettre à jour sur la page Web, en modifiant le style de certaines balises ou le contenu, etc., vous pouvez rendre les pages Web plus vivantes.

HTML est HyperText Markup Language, un langage de balisage standard utilisé pour créer des pages Web. HTML est responsable de la structure des trois composants d'une page Web. HTML utilise des balises pour identifier les différents composants d'une page Web. Ce qu'on appelle l'hypertexte fait référence à des hyperliens qui nous permettent de passer d'une page à une autre.

CSS fait référence aux feuilles de style en cascade. Les styles définissent la manière d'afficher les éléments HTML et sont utilisés pour contrôler l'apparence des pages Web. CSS est responsable des performances des trois composants d'une page Web et les styles sont généralement enregistrés dans des fichiers .css externes. Il suffit de modifier un simple document CSS pour modifier la mise en page et l'apparence de toutes les pages.

JavaScript est un langage de script ("JS" en abrégé), un langage de programmation léger utilisé pour contrôler le comportement des pages Web. JavaScript est responsable du comportement des trois composants d'une page Web. Il peut être inséré dans le code de programmation de la page HTML. Une fois JavaScript inséré dans la page HTML, il peut être exécuté par tous les navigateurs modernes.

Comment apprendre le HTML, CSS, JavaScript

1 L'apprentissage systématique du HTML et du CSS

Le HTML et le CSS sont relativement simples, mais ils nécessitent néanmoins un apprentissage systématique.

2. Compréhension approfondie de Javascript

Un excellent programmeur front-end doit comprendre en profondeur les principes, les mécanismes, les origines et la nature basée sur les objets de Javascript. Il est recommandé de lire davantage de projets open source. Après tout, la pratique apporte de vraies connaissances.

La technologie de développement Web front-end suit le processus de facile à difficile, ce qui nécessite que les techniciens de développement Web front-end maîtrisent l'apprentissage de la technologie de développement Web de base, l'embellissement des performances du site Web, le référencement et des connaissances de base sur le côté serveur ; D'un autre côté, les développeurs ont également des exigences spécifiques, comme être capables d'utiliser divers outils avec compétence et flexibilité pour aider au développement.

Dans le même temps, il est nécessaire de maîtriser les théories de base des connaissances pertinentes, parmi lesquelles figurent : la maintenabilité du code, les modèles sémantiques hiérarchiques, la facilité d'utilisation des composants, etc. La technologie de développement front-end couvre le Javascript traditionnel, le CSS, etc. Technologie et Adobe RIA, Google Gears, conception interactive conceptuelle et conception visuelle avec une forte couleur artistique, etc.

En utilisant Internet comme analogie, tout ce qui va du navigateur à l'ordinateur client est collectivement appelé technologie front-end. Ce qui est stocké côté serveur est collectivement appelé technologie back-end. Les technologies front-end comprennent : les technologies « traditionnelles » telles que JavaScript, ActionScript, CSS, xHTML, Adobe AIR, Google Gears, ainsi que la conception interactive conceptuelle et le visuel artistique. conception. Etc. Il existe de nombreux postes dans le développement front-end Web. Tout d'abord, prenons comme exemples les trois postes d'« ingénieur de développement front-end », d'« ingénieur de développement front-end senior » et d'« architecte front-end ». responsabilités respectives.

Ingénieur de développement front-end (ou "production de pages web", "ingénieur de production à propos de pages web", "ingénieur de production front-end", "ingénieur en reconstruction de sites web"), la principale responsabilité d'un tel poste est de travailler avec des designers d'interaction, Les concepteurs visuels travaillent ensemble pour innover et utilisent HTML et CSS pour compléter la production de pages de sites Web basées sur les dessins de conception. Sur cette base, il est nécessaire d'effectuer une maintenance de base sur la page complétée et d'optimiser en conséquence les performances front-end du site Web.

De plus, un ingénieur de développement front-end qualifié doit avoir son propre ensemble de cognitions en termes d'esthétique et son propre ensemble d'idées en opérations artistiques. Ce n’est qu’ainsi que la collaboration visuelle pourra être réussie. Avoir une certaine capacité esthétique et une capacité de base en matière d'opération artistique sont des capacités indispensables pour les ingénieurs. La technologie de développement front-end couvre un large éventail de domaines, tels que le génie logiciel et d'autres domaines. Lors de l'analyse réelle de la technologie de développement front-end, nous pouvons utiliser Internet pour comprendre et analyser la technologie de développement front-end, c'est-à-dire que tant que l'ordinateur suit la conception du navigateur jusqu'à l'utilisateur, cette technologie peut être collective. appelée technologie frontale. Le contenu principal de la technologie back-end est la technologie qui doit être stockée côté serveur.

Le 5 décembre 2015, les informations fournies dans le « Rapport sur l'indice de pénurie de talents (TSI) de l'industrie Internet de Guangzhou » ont montré que les ingénieurs de développement front-end sont devenus les postes les plus demandés dans l'industrie Internet de Guangzhou.

La technologie de développement front-end couvre un large éventail de domaines, tels que le génie logiciel et d'autres domaines. Lors de l'analyse réelle de la technologie de développement frontal, nous pouvons utiliser Internet pour comprendre et analyser la technologie de développement frontal, c'est-à-dire que tant qu'elle suit l'ordinateur du navigateur jusqu'à la conception de l'utilisateur final, cette technologie peut être utilisée. collectivement appelé technologie front-end. Le contenu principal de la technologie back-end est la technologie qui doit être stockée côté serveur. Le 5 décembre 2015, les informations fournies dans le rapport « Guangzhou Internet Industry Talent Shortage Index (TSI) Report » ont montré que les ingénieurs de développement front-end sont devenus les postes les plus demandés dans l'industrie Internet de Guangzhou.

La tâche du développement front-end Web se concentre en outre sur le développement de logiciels, l'analyse de la convivialité du site Web et l'optimisation des zones problématiques dans la conception frontale du site Web sur la base des informations renvoyées par les utilisateurs. Dans ce processus, grâce à la trinité de la technologie Javascript, flashactionscript3.0 et HTML CSS, la page peut aider les utilisateurs à offrir une meilleure expérience après optimisation. Par exemple, la fonction de navigation dans les images dans l'espace QQ permettait auparavant de parcourir les images uniquement après avoir pris des photos, et d'être également affichées dans des catégories sur la page Web. Désormais, la navigation dans les images directement sur la page Web est l'une des fonctions développées par Front. ingénieurs de développement finaux. De plus, il existe divers sites Web d'informations pouvant afficher des effets de diapositives, la technologie ajax, etc.

Lors du démarrage du front-end Web, la conception de l'architecture frontale et la transmission de données sous-jacente seront utilisées. Par conséquent, le développement du front-end Web nécessite des compétences en programmation plus basiques que le précédent, et nécessite également une certaine compréhension de l'arrière du site Web. -fin d'apprendre la langue. Au stade actuel, la technologie de développement front-end se développe très rapidement, ce qui impose des exigences plus strictes aux praticiens. Il est nécessaire de maîtriser les nouvelles technologies de développement front-end tout en clarifiant l'orientation future du monde front-end. Il sera difficile de combiner les avantages de la technologie avec des fonctions pleinement exploitées.

La famille Xunfa de technologie frontale est un condensé du développement et des changements qui accompagnent Internet lui-même. Dans sa phase initiale, la technologie HTML n'est utilisée que pour simplement afficher des pages. Si vous souhaitez mettre en œuvre des fonctions de maintenance et de mise à jour, vous serez directement confronté à de gros problèmes. L'article analyse et appréhende progressivement la future voie de développement d'Internet du Web 1.0, du Web 2.0, du Web 3.0 au Web 4.0. Web1.0 se caractérise par une édition de base. Une fois que l'éditeur du site Web a effectué les opérations d'édition et de traitement, le site Web fournit aux utilisateurs le contenu correspondant et les utilisateurs peuvent exercer leur droit de navigation. Ce processus de transition du site Web à l'utilisateur est un comportement à sens unique. À l'ère du Web 1.0, les trois principaux portails Sina, Sohu et NetEase ont joué le rôle des trois géants.

Web 2.0, mise à niveau d'un niveau par rapport à l'étape précédente. L'interaction entre le site Web et ses utilisateurs a été renforcée. Le contenu du site Web peut provenir de ce que les utilisateurs fournissent au site Web. De cette manière, les utilisateurs peuvent mieux participer à la construction des multiples fonctions du site Web. entre le site Web et les utilisateurs a changé. Grâce à la communication bidirectionnelle, la relation de participation entre les utilisateurs peut être réalisée. Contrairement au Web 1.0, l'interactivité du Web 2.0 est la clé de son potentiel. À l’ère du Web 2.0, Blog China, Yiyou Dating et Liaison sont devenus des représentants exceptionnels. Les utilisateurs de ce type de site Web disposent de leur propre référentiel de données, entièrement basé sur le Web, et le navigateur peut implémenter toutes les fonctions.

Web3.0, un nouveau concept proposé par Microsoft, a déposé avec succès de nombreux brevets. Sur divers sites Web Web 3.0, les informations peuvent être échangées et interagies directement. Dans le même temps, des plateformes d'informations tierces peuvent également intégrer et classer les riches informations fournies par différents sites Web. Grâce au système Web 3.0, les utilisateurs peuvent également disposer de leurs propres données sur Internet. Ce qui est plus avancé que le Web 2.0, c'est que les utilisateurs peuvent utiliser ces données sur différents sites Web. La réalisation des fonctions est entièrement basée sur le Web et diverses opérations qui ne peuvent être effectuées que par des programmes système complexes peuvent être réalisées en utilisant simplement un navigateur.

Web 4.0, semblable à un dîner à plusieurs, le Web 4.0 connectera tout le monde et intégrera les ressources appartenant à chacun. Chacun pourra choisir parmi le propriétaire de la ressource en fonction de ses propres besoins. La plateforme joue un rôle de connexion. Cette plateforme est un accord plutôt qu'un site Web. Chaque utilisateur doit respecter cet accord. Le site Web est un utilisateur qui entoure l'accord si chaque utilisateur a son propre site Web et s'articule autour du protocole. , l'humanité peut véritablement entrer dans l'ère d'Internet, qui doit être une ère composée de nombreux sites Web.

Lorsque les normes Web ont été formulées pour la première fois, les recherches sur le développement front-end avaient déjà commencé, mais les progrès étaient très lents. Le développement front-end n'a progressé davantage qu'après que Javascript soit progressivement devenu un langage mature pour le développement front-end Web. Avec l'application du Web 4.0 et l'émergence de produits tels que Weibo, les blogs, les jeux Web, les réseaux sociaux et les sites Web vidéo, les utilisateurs ont mis en avant des exigences plus élevées pour les pages Web. Par conséquent, les concepteurs doivent prendre en compte davantage de problèmes lors du processus de développement. Actuellement, le langage Javascript est très important dans le développement Web, et le développement frontal Web actuel marqué par Javascript se développe très rapidement.

Actuellement, le développement Web front-end est devenu un sujet de recherche brûlant. Afin de répondre aux exigences d'utilisabilité des différents sites et d'améliorer l'expérience utilisateur des produits, diverses équipes « expérience utilisateur » se sont développées rapidement et la division du travail dans l'équipe de développement est devenue plus claire.Par exemple, les concepteurs d'interactions, les analystes de l'expérience utilisateur, les ingénieurs de développement front-end, les concepteurs Web, etc. conçoivent et développent principalement des applications frontales solides.

Pour les développeurs Web front-end, ils doivent maîtriser les compétences et technologies suivantes : familiarité avec les standards du W3C, une compréhension approfondie de la sémantique Web, des performances et de la séparation des données, etc.; PHP/Java, etc.), les algorithmes et les structures de données, etc. ; Familiarisé avec l'architecture et la mise en page des pages, maîtrisant CSS, HTML/XHTML et d'autres technologies de production de pages Web, et maîtrisant Ajax, Javascript et d'autres technologies de développement Web.

Avec le développement de la technologie, la technologie de développement front-end continuera de s'améliorer. HTML5, CSS 4.0 et d'autres technologies deviendront la technologie dominante du développement front-end. Même si HTML5 devient une réalité, davantage de technologies de développement front-end le feront. apparaissent. Faites toujours attention aux dernières technologies en matière de développement front-end.

À l'heure actuelle, la technologie de développement front-end vient de mûrir. Au cours des prochaines années, on pense que la demande pour ses talents va encore augmenter. Mais lorsqu’une demande est saturée, la saturation de la demande de talents est également le signe d’une véritable maturité du développement front-end. À l'avenir, les développeurs front-end disposeront d'un espace de développement plus large, de plus grands défis et d'un stade plus élevé pour que les gens puissent montrer leur force. Dans le même temps, les chercheurs scientifiques doivent continuer à améliorer leurs propres capacités et développer davantage de produits répondant aux besoins des utilisateurs.

(Partage de vidéos d'apprentissage : web front-end)

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn