Les trois fondements du front-end sont : 1. Hypertext Markup Language HTML, qui est un langage de construction de pages Web ; 2. Cascading Style Sheet CSS, qui est un langage structurel pour définir des styles ; 3. Langage de script intégré Javascript ; Il s'agit d'un langage de script interprété utilisé pour établir une relation interactive dynamique en temps réel entre les utilisateurs et les pages Web.
L'environnement d'exploitation de ce tutoriel : système windows7, CSS3&&HTML5&&javascript version 1.8.5, ordinateur Dell G3.
De nos jours, la popularité du front-end dépasse l'imagination des développeurs. Il s'agit évidemment d'un simple développement de page, et ce n'est pas aussi populaire que ce qu'on dit sur le marché. En fait, les lignes sont séparées comme des montagnes. Souvent, lorsque nous nous tenons devant la porte, nous ne pouvons pas comprendre la situation réelle à l'intérieur de la porte.
La raison pour laquelle le front-end devient de plus en plus important est en fait que l'expérience utilisateur a été élevée à un niveau très élevé. C'est grâce au Gang Leader Qiao. Sans lui, nous pourrions encore avoir des difficultés dans le monde de Symbian. .
Le domaine du front-end, qui interagit directement avec les utilisateurs, a atteint des sommets à couper le souffle. Malgré cela, la fondation du front-end, c'est-à-dire la technologie de base du front-end, n'a pas changé.
Les langages qui composent le développement front-end quotidien sont toujours HTML, CSS et Javascript.
1. HTML - Hyper Text Markup Language
HTML (Hyper Text Markup Language) : C'est un langage de construction de pages Web (Tag) pour combiner des images, des sons, des images, du texte. , etc. Le contenu est affiché. Il stipule ses propres règles linguistiques et est utilisé pour exprimer des éléments de sens plus riches que le « texte ».
HTML5 : Le dernier standard pour HTML, formulé et publié en 2014. HTML5 ajoute de nouvelles balises sémantiques pour prendre en charge la vidéo, l'audio, le canevas/webgl et d'autres fonctionnalités.
Balises HTML de base : head, body, html, titre (h1-h7), paragraphe (p), lien (a), image (image), table (table), liste (ul, ol), etc.
La structure de base d'un document HTML :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello</title> </head> <body> <p>Hello</p> <a href="http://www.baidu.com"></a> </body> </html>
2. Feuille de style CSS en cascade
Bien qu'elle ait été développée depuis de nombreuses années, elle n'a toujours pas son mot à dire dans ce langage. résolvez le problème de gonflement des balises HTML (éléments de balises), et la conception du langage est vraiment géniale. Le cœur de CSS est la définition et le sélecteur du flux de documents. En redéfinissant les documents HTML, le concept de flux de documents est introduit et les balises gonflées d'origine peuvent être utilisées pour modifier le style du contenu de la page via des sélecteurs flexibles. Ce sur quoi il faut se concentrer est la définition du flux de documents, le modèle de boîte d'éléments, ainsi que la destruction et la modification du flux de documents.
CSS (Cascading Style Sheets) : feuilles de style en cascade, un langage structurel qui définit des styles, tels que les polices, les couleurs et le positionnement, qui décrivent comment formater et afficher les informations sur une page Web.
CSS3 : le dernier standard de CSS. CSS3 ajoute de nouvelles fonctionnalités telles que des animations et des sélecteurs. Un changement majeur dans l'évolution de CSS3 est la décision du W3C de diviser CSS3 en une série de modules. Il comprend principalement des modules tels que le modèle de boîte, le module de liste, la méthode des hyperliens, le module de langue, l'arrière-plan et la bordure, les effets de texte, la mise en page multi-colonnes, etc. Le diviser en plusieurs modules plus petits est plus pratique pour une mise à jour et une publication rapides des spécifications. Les fabricants peuvent également choisir de prendre en charge certaines fonctionnalités du module CSS3 pour faciliter la promotion de CSS3.
position d'écriture css en html :
1), écrite en ligne (non recommandée)
<h1 style="color:red">haha</h1>
2), écrite dans la balise de style en html (déconseillée)
<style>
h1{
color:red
}
</style>3), méthode de lien (recommandée)
<link rel="stylesheet" type="text/css" href="style.css">
3. Langage de script intégré à Javascript
Initialement, parce que Javascript s'exécute dans le navigateur, il est souvent appelé script intégré, mais cela n'empêche toujours pas Javascript de devenir un langage de programmation puissant. Ce langage implémente principalement le problème de réponse du comportement de l'utilisateur, il répond donc à différents résultats d'opération en fonction des événements de comportement de l'utilisateur. Ce langage est au centre du front-end car toutes les expériences utilisateur nécessitent la mise en œuvre de Javascript. Le langage devient de plus en plus complet et évolue progressivement vers le statique.
1), bibliothèque
Une bibliothèque est une implémentation d'encapsulation pour une fonction spécifique, telle qu'une implémentation d'encapsulation pour les scénarios de téléchargement de fichiers, appelée bibliothèque de classes de téléchargement de fichiers. Ceci est à titre d'exemple, mais sans s'y limiter.
2), framework
Le framework est une implémentation encapsulée pour résoudre plus de problèmes. Par exemple, le framework jQuery est un framework permettant d'obtenir la compatibilité de l'API du navigateur Javascript côté PC (Zepto est pour mobile), et du MVVM. Le cadre est destiné à une construction rapide. La mise en œuvre de l'encapsulation d'interface, en encapsulant les opérations DOM, réduit les opérations DOM manuelles et se concentre sur la mise en œuvre de la structure des données et de la logique métier.
Pour plus de connaissances sur la programmation, veuillez visiter : Vidéos de programmation ! !
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
