Voici quelques réflexions et gains que j'ai résumés. En raison de mes connaissances personnelles superficielles, s'il y a quelque chose qui ne va pas ou qui est inexact, veuillez me critiquer et me corriger.
Les noms des trois mousquetaires du développement front-end, HTML+CSS+JS, sont bien connus et constituent la base pour débuter avec les programmeurs front-end. utilisez ces trois composants pour former un grand nombre de pages Web. Cependant, lorsque vous apprenez pour la première fois, parce que vous ne pouvez pas comprendre rapidement tous les points de connaissance, vous vous sentez souvent comme une personne aveugle essayant de saisir l'éléphant lors de l'apprentissage - c'est-à-dire que vous ne savez pas grand-chose sur les fonctions et la division du travail de chaque composant. , et vous ne pouvez pas saisir la direction de l'apprentissage dans son ensemble, c'est donc difficile de former un système de connaissances complet. J'ai une caractéristique d'apprentissage. J'aime commencer par les connaissances de base, puis ajouter d'autres contenus couche par couche sur cette base, et enfin former un cadre complet. C'est comme ça que j'ai l'habitude d'apprendre.
Au début, j'avais encore un peu le vertige. Les points de connaissance se succédaient, et ils se chevauchaient également. L'avant était relié à l'arrière, et l'arrière était relié à l'avant. Il a quand même fallu beaucoup d’efforts pour comprendre. Mais après avoir lu l’intégralité du contenu deux ou trois fois, le cadre dans son ensemble devient beaucoup plus clair. En termes simples, la division du travail HTML+CSS+JS incarne le concept de superposition logicielle. La répartition générale des fonctions est la suivante : HTML est responsable de la description du contenu, CSS est responsable de la description du style des éléments et JS est responsable de la mise en œuvre des actions de la page Web. En fait, ce n’est pas assez clair et les novices ne peuvent pas très bien le comprendre. Je pense que nous pouvons comprendre pourquoi il existe ces trois divisions dans le processus de développement des pages Web.
Les premières pages Web étaient des pages Web statiques, et les éléments des pages Web n'avaient pratiquement aucune action. Les gens se connectaient principalement pour parcourir des informations, et les exigences d'interactivité des pages Web étaient également faibles. Nous pouvons jeter un œil au site Web de Yahoo en 1996 (photo prise sur Internet). Il y a des images, des hyperliens et des champs de recherche sur la page Web. La plupart d'entre eux utilisent le style par défaut. Le style et le contenu de ces pages Web sont mélangés. vous souhaitez modifier le style de la page Web, vous devez les modifier un par un, ce qui sera plus gênant. Alors comment résoudre ce problème ? Les pionniers du développement Web ont séparé le style du contenu et ont combiné toutes les instructions décrivant le style de la page Web dans un seul fichier. Ce fichier est appelé feuille de style en cascade, ou CSS en abrégé. Si nous voulons modifier le style, nous pouvons le modifier à partir de ce fichier. Grâce à certains sélecteurs, nous pouvons changer rapidement le style d'un certain élément ou d'un certain type d'élément, améliorant ainsi l'efficacité.
Après avoir supprimé le style de la page Web, le langage HTML se charge uniquement de décrire le contenu de la page Web. Qu'est-ce que cela signifie ? En HTML, nous utilisons l'élément
pour marquer le fichier d'en-tête, l'élément
pour marquer le nom de la page Web, l'élément <body> table> pour marquer le tableau, etc., en ajoutant ces éléments. En remplissant le contenu de l'élément, nous écrivons des nœuds avec des styles spécifiques. Tous ces nœuds HTML constituent le contenu de la page Web. La plupart de ces balises ont des styles par défaut. Si nous ne sommes pas satisfaits des styles par défaut, nous pouvons également les modifier dans le fichier CSS. </p>
<p> Après avoir terminé la séparation du contenu et de la présentation, nous devons expliquer les actions de la page Web. Un problème avec les pages statiques est que le contenu de la page Web ne changera pas après sa génération. Lorsque nous naviguons sur le Web, nous devons interagir. Nous devons nous connecter à Weibo pour commenter, aimer et transférer. Nous devons contrôler les actions des personnages lorsque nous jouons à des jeux Web. Ces fonctions sont toutes portées par JavaScript (JS). </p>
<p> JavaScript est un langage de programmation léger. Il n'a pas de réglementations strictes sur les types de données comme C/C++/JAVA, ni de pointeurs, de surcharge d'opérateurs, etc. En parlant de ça, le nom est très déroutant. Il y a Java dans le nom, mais tout le monde dit que cela n'a rien à voir avec Java. C'est vraiment un casse-tête. C'est comme faire un film intitulé "Je m'appelle Pan Jinlian" mais dire que vous n'avez rien à voir avec Pan Jinlian. (Rires) Je plaisante. Cependant, en comparaison, la syntaxe de JavaScript et de Java présente de nombreuses similitudes, mais JavaScript est beaucoup plus simple que Java. Contrairement à Java, JS est un langage de plateforme doté de divers composants et frameworks, étroitement lié au Web. JS est exécuté en l'insérant dans HTML. Grâce à JavaScript, nous pouvons écrire une sortie HTML, réagir aux événements, modifier le contenu HTML, les images, les styles, vérifier les entrées et d'autres fonctions. Fondamentalement, toutes les interactions sur la page Web sont implémentées via les fonctions JS. Cette partie est aussi la partie la plus difficile des Trois Mousquetaires, et je ne la maîtrise pas vraiment maintenant. Les articles ultérieurs développeront des points de connaissances spécifiques. </p>
<p> Les fichiers JS et CSS sont finalement appliqués au HTML. En HTML, nous pouvons insérer du code JS via l'élément <script>, qui peut être placé dans <head> Ou écrivez des fichiers JS en externe et référencez-les en HTML. Le code CSS est légèrement différent. Nous pouvons insérer du code CSS via l'élément <style> Ou écrivez un fichier CSS en externe et référencez-le en HTML. Vous pouvez également spécifier des styles CSS directement dans un élément, appelé style en ligne. </p>
<p> A travers cette dernière partie, nous pouvons tenter de résumer la relation entre ces trois parties. HTML est comme la fondation d'une maison, CSS et JS le sont, ces trois parties forment ensemble une belle maison. On ne peut pas les séparer et dire que certaines parties constituent une maison. Seules trois d’entre elles peuvent former une belle maison. </p>
<p>J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir. </p>
<p>Articles connexes : </p>
<p><a href="http://www.php.cn/js-tutorial-391103.html" target="_blank">p5.js Implémentation de l'arbre de Pythagore compétences code_javascript</a><br></p>
<p><a href="http://www.php.cn/js-tutorial-391064.html" target="_blank">Basé sur js Introduction à la valeur-clé de stockage paires et précautions dans les compétences _javascript</a><br></p>
<p><a href="http://www.php.cn/js-tutorial-391076.html" target="_blank">javascript compréhension approfondie des fermetures js</a><br></p><p>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!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>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</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Comment optimiser votre code JS (tutoriel graphique)" href="https://m.php.cn/fr/faq/396812.html">Comment optimiser votre code JS (tutoriel graphique)</a></span><span>Article suivant：<a class="dBlack" title="Comment optimiser votre code JS (tutoriel graphique)" href="https://m.php.cn/fr/faq/396816.html">Comment optimiser votre code JS (tutoriel graphique)</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="https://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/fr/faq/1609.html" title="Une analyse approfondie du composant de groupe de liste Bootstrap" class="aBlack">Une analyse approfondie du composant de groupe de liste Bootstrap</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/1640.html" title="Explication détaillée du currying de la fonction JavaScript" class="aBlack">Explication détaillée du currying de la fonction JavaScript</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/1949.html" title="Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)" class="aBlack">Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/2248.html" title="Angularjs intègre l'interface utilisateur WeChat (weui)" class="aBlack">Angularjs intègre l'interface utilisateur WeChat (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/2351.html" title="Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript" class="aBlack">Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p></div><div class="footermid"><a href="https://m.php.cn/fr/about/us.html">À propos de nous</a><a href="https://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="https://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
