Vous voulez bien apprendre le front-end Web ? Que devez-vous maîtriser d'autre ?

Comment démarrer avec le front-end web, nous devons d'abord commencer par ce qu'est un ingénieur web front-end junior :

Selon mon idée, je divise les ingénieurs front-end en quatre catégories : niveau d'entrée, junior, intermédiaire et senior,

Le niveau d'entrée fait référence à la compréhension de ce qu'est le front-end (beaucoup de gens ne savent toujours pas ce qu'est le front-end) et à la compréhension du HTML de base. , syntaxe css et javascript (recherchez simplement ces éléments de langage sur Internet. Il y en a beaucoup, beaucoup. La syntaxe de base est la chose la plus importante dans tout le système technique. Les principaux didacticiels sur la technologie Web), vous pouvez créer des pages basées sur les dessins de conception du concepteur. sans tenir compte de la compatibilité. Vous avez découvert certains frameworks (tels que jQuery, zepto, bootstrap, etc. qui sont mauvais mais toujours géniaux).

Après avoir franchi l'étape d'entrée de gamme, vous avez compris ce que fait le front-end, vous avez appris la syntaxe de base et pouvez créer quelques pages simples de manière indépendante, vous devez alors continuer à apprendre pour atteindre Le niveau d'un ingénieur front-end junior. Les ingénieurs front-end juniors doivent en savoir beaucoup. Ils doivent avoir une compréhension claire de l'ensemble du front-end et maîtriser diverses technologies.

Ingénieur front-end junior : la première chose que vous devez savoir est comment gérer la compatibilité des différents navigateurs (par exemple, quelle est la différence entre createElement dans le navigateur IE, etc.). Maintenant, pratiquement tous. l'entreprise recrute Lorsqu'ils travailleront, ils devront maîtriser html5, css3 et javascript. Cette maîtrise signifie qu'ils peuvent être récupérés du bout des doigts.

Ce qui suit parlera des connaissances spécifiques que les ingénieurs front-end juniors devraient acquérir, puis ils doivent comprendre divers préprocesseurs et post-processeurs CSS, ainsi que l'utilisation de frameworks MV* front-end communs. (angularjs, backbone, reactjs, etc.) et connaître les principes de ces frameworks. De plus, vous devez maîtriser l'utilisation de nodejs, être capable d'utiliser divers outils de construction front-end basés sur node (grunt, gulp, etc.) , maîtriser l'utilisation de github ou gitlab et être familier avec la modularisation et la composantisation, l'ingénierie et la sémantique. Enfin, vous devez savoir comment développer des pages mobiles et comment optimiser les performances d'une page.

Système technique pour ingénieurs web front-end juniors

1.Partie HTML

La première chose est de maîtriser l'utilisation de certaines balises courantes et leurs différents attributs. J'ai résumé ces balises couramment utilisées comme suit :

html : l'élément racine de la page. head : La balise head de la page, qui est le conteneur de tous les éléments head. body : La balise principale de la page, où est placé le contenu affiché sur la page. title : Le titre de la page. méta : situé en tête du document, il fournit des méta-informations sur la page, notamment des mots-clés, des descriptions, etc. lien : Définir la relation entre le document et les ressources externes. L'utilisation la plus courante consiste à introduire des feuilles de style. script : balise de script Vous pouvez placer du code de script js dans cette balise, ou vous pouvez utiliser l'attribut src de cette balise pour introduire une balise externe. style : balise de style, du code CSS peut être écrit dans cette balise. a : Lien hypertexte, l'attribut href représente le lieu auquel être lié et l'attribut target représente la méthode d'ouverture. img : balise d'image, l'attribut src indique l'emplacement de l'image. form : l'élément de formulaire, son entrée interne, sa sélection, sa zone de texte et ses autres balises sont relativement importants. div : définissez la partition ou la section dans le document. Vous pouvez utiliser div pour effectuer la mise en page et d'autres opérations. De plus, les balises telles que ul, li, p, button, iframe, p et table sont également couramment utilisées. Les balises sémantiques telles que nav, section, article, header, side et footer doivent également être comprises.

En plus de comprendre les balises ci-dessus, vous devez également avoir une certaine compréhension de certaines nouvelles API HTML5 :

balises audio et vidéo.

Canvas : définissez des graphiques, tels que des graphiques et d'autres images.

L'attribut d'acceptation de la balise d'entrée, de l'e-mail, du téléphone, de l'URL et d'autres types.

getElementByClassName obtient un nœud d'élément basé sur le nom de la classe.

Sélection de fichiers multiples, attributs de sélection de fichiers multiples.

importation HTML, modèle

balise de processus, webGL et autres contenus.

Il y a quelques points de connaissances que vous devez connaître :

1. Le rôle du doctype. 2. Les principes et les différences entre Unicode, utf8 et autres encodages. 3. Comment optimiser les performances des pages. 4. Différents avantages des formats d'image tels que png, jpg, webp et gif. 5. La différence entre les éléments HTML en ligne et les éléments de niveau bloc. 6. Balises head couramment utilisées dans le développement Web mobile. 7. Sémantique Web. 8. Principe de mise en cache dans les navigateurs.

2. Partie CSS

Concernant le css, mon avis est de télécharger un manuel de référence css au format chm en ligne, puis de taper chacun selon ce qui est écrit dans le manuel.

css est grossièrement divisé selon les points de connaissance suivants :

① Disposition du positionnement

1. Les 7 valeurs de l'attribut de position (statique | relatif | absolu. | fixe | centre | page collante) Quelles sont les fonctions et les différences ?

2. Implémentez une disposition en glyphes ou en trois colonnes (les largeurs gauche et droite sont fixes et le milieu s'adapte à l'écran).

3. Méthodes de flottement et de compensation des flotteurs, disposition flexible, disposition en grille.

② Modèle de boîte

1. La marge, le remplissage et la bordure sont les trois attributs.

2. Contenu lié à la boîte rétractable.

3.Modèle de mise en page multi-colonnes du module de mise en page multi-colonnes.

③ Police du texte

1. Forcer le retour à la ligne ou pas de retour à la ligne, effacer l'espace blanc.

2. Alignement du texte, taille (comment définir des polices Chrome inférieures à 12 px), indentation et conversion.

3. Unité (em, rem, px, etc.), couleur (rgb, rgba, hls).

④ Transformation, transition et animation

1. Le rôle et la compatibilité des différentes valeurs de transformation.

2.Type d'animation de transition, principe de la courbe de Bézier.

3. Divers paramètres d'animation, règles @keyframes.

4. Redessiner et redistribuer le navigateur.

⑤ Sélecteur

1. Le classement, le poids et la priorité du sélecteur.

2. Quels attributs peuvent être hérités et quels attributs ne peuvent pas être hérités.

3. Que sont les pseudo-classes et les pseudo-éléments, et quelles sont leurs fonctions.

Ce qui précède sont toutes des choses de base. En plus de ces contenus de base, vous devez comprendre moins, Sass, Stylus et autres préprocesseurs CSS. Cela améliorera considérablement l'efficacité de votre développement CSS. Post-processeurs CSS tels que Autoprefixer et PostCSS.

3. Partie JavaScript

Je ne parlerai pas ici des connaissances de base de js, je mets js selon le. niveau de syntaxe et Les niveaux utilisés sont divisés en deux parties.

Selon le niveau de syntaxe :

Le premier est l'aspect orienté objet de JavaScript : implémentation de l'encapsulation, de l'héritage et du polymorphisme en JavaScript.

① Encapsulation : en js, l'encapsulation peut être réalisée via des fermetures, des portées et des chaînes de portées, le rôle des const et let d'ES6. ② Héritage : héritage basé sur une chaîne de prototypes, héritage basé sur un constructeur, héritage combiné, héritage parasite, etc., ainsi que les mots-clés de la classe ES6, prototype et __proto__. ③ Polymorphisme : En JavaScript, le polymorphisme est implémenté à l'aide d'arguments. De nombreux contenus seront dérivés des arguments : 1. Le rôle de l'appelant, de l'appelé et d'autres méthodes d'arguments. 2. Les fonctions des méthodes apply et call sont différentes. 3. Utilisez Array.prototype.slice.call pour convertir un objet tableau en tableau. 4. Diverses méthodes de tableau, telles que décalage, épissure, poussée, filtre, cartographie, réduction, forEach, etc.

Ensuite, il y a les modèles de conception Js, tels que les trois modèles d'usine, les modèles de constructeur, etc.

Enfin, qu'est-ce que cela signifie dans différentes situations.

Selon le niveau d'utilisation :

La première et la plus importante chose est ajax, le principe d'ajax, et la méthode cross-domain d'ajax : jsonp, location.hash utilisant iframe, postMessageAPI, websocket, agents serveur et plus encore.

Ensuite, il y a les en-têtes de protocole, les codes d'état et autres contenus du protocole TCP, du protocole udt et du protocole http. Cache du navigateur, contenu de stockage client : stockage local, stockage de sessions, indexDB, cookies, etc.

Enfin, il existe de nouvelles API js, telles que la lecture de fichiers (fileReader), la récupération, Promise, Web Sockets, etc. Vous pouvez aller sur caniuse pour voir quelles sont les nouveautés.

Ce que j'ai dit ci-dessus ne sont que quelques concepts généraux. J'ai répertorié certaines des choses qui doivent être maîtrisées en HTML, CSS et Javascript front-end. Il y a encore beaucoup de connaissances que nous devons connaître. dans le domaine front-end. Cela nécessite que chacun le résume lui-même dans le processus d'apprentissage et de travail.

Si vous rencontrez des problèmes pendant le processus d'apprentissage ou si vous souhaitez obtenir des ressources d'apprentissage, vous êtes invités à rejoindre le groupe d'échange d'apprentissage

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!