Création d'un afficheur HTML, CSS et JS en direct-js tutoriel-php.cn

Création d'un afficheur HTML, CSS et JS en direct

Susan Sarandon

Libérer： 2025-01-16 12:51:00

original

792 Les gens l'ont consulté

Apprenez le développement Web en créant des projets ! Même sans connaissances en HTML, CSS ou JavaScript, ce didacticiel vous guidera dans la création d'un afficheur de code en direct, similaire à CodePen mais avec une touche unique. Embarquons pour ce voyage passionnant !

HTML : la base du site Web

Le HTML (HyperText Markup Language) constitue l'épine dorsale structurelle d'un site Web. Il définit le contenu de la page (texte, images, boutons) à l'aide de balises — instructions pour le navigateur.

Structure HTML : une ventilation détaillée

(Ignorez cette section si vous êtes déjà familier avec le HTML.)

<!DOCTYPE html> : Cette déclaration signale un document HTML5 au navigateur.
<html lang="en"> : Le conteneur racine de tous les éléments de la page. lang="en" spécifie la langue comme anglais.
<head> : Contient des métadonnées (informations sur la page, contenu non visible). Souvent utilisé pour le référencement.
<meta charset="UTF-8"> : Spécifie le jeu de caractères (UTF-8 prend en charge la plupart des caractères).
<meta name="viewport" content="width=device-width, initial-scale=1.0"> : garantit une mise à l'échelle appropriée sur différents appareils.
<title>Sleek HTML/CSS/JS Displayer</title> : Le titre affiché dans l'onglet du navigateur.
<link href="style.css" rel="stylesheet"> : Lie un fichier CSS externe pour le style.
<link href="https://cdnjs.cloudflare.com/.../all.min.css" rel="stylesheet"> : Lie un fichier CSS Font Awesome pour les icônes.
</head> : Ferme la section d'en-tête.
<body> : Contient le contenu de la page visible.
<div class="app-container"> : Un conteneur principal pour la mise en page de l'application.
...(Autres éléments HTML définissant l'éditeur de code, le volet d'aperçu, etc. Voir le code complet ci-dessous.)
</body> : Ferme la section corps.
</html> : Ferme le document HTML.

CSS : styliser votre création

CSS (Cascading Style Sheets) stylise et présente les pages Web, en contrôlant les couleurs, les polices, l'espacement et l'apparence visuelle. Considérez-le comme la couche esthétique du site Web.

Explication du code CSS (résumé) :

Le code CSS (illustré ci-dessous) utilise des sélecteurs (par exemple, body, .app-header) pour cibler des éléments HTML spécifiques et applique des propriétés (par exemple, color, background-color) et des valeurs pour les styliser. Il comprend des styles pour le mode sombre, un design réactif et divers éléments d'interface utilisateur.

JavaScript : ajout d'interactivité

JavaScript ajoute de l'interactivité, rendant votre site Web dynamique. Il permet l'interaction des utilisateurs, les mises à jour de contenu sans rechargement de page, et bien plus encore.

Explication du code JavaScript (Résumé) :

Le code JavaScript (illustré ci-dessous) manipule le DOM (Document Object Model), ajoute des écouteurs d'événements pour gérer les entrées de l'utilisateur (saisie, clics), met à jour le volet d'aperçu, gère les numéros de ligne, implémente une fonction anti-rebond pour plus d'efficacité et contrôle mode sombre et fonctionnalité plein écran.

Code complet :

<code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sleek HTML/CSS/JS Displayer</title>
  <link href="style.css" rel="stylesheet">
  <link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" referrerpolicy="no-referrer" rel="stylesheet">
</head>
<body>
  <div class="app-container">
    <!-- ... (rest of the HTML structure, as described above) ... -->
  </div>
  <script src="script.js"></script> </body>
</html></code>

Copier après la connexion

<code class="language-css">/* ... (CSS code as described above) ... */</code>

Copier après la connexion

<code class="language-javascript">/* ... (JavaScript code as described above) ... */</code>

Copier après la connexion

Creating a live HTML, CSS and JS displayer

(Remarque : le code HTML, CSS et JavaScript complet serait trop complet pour être inclus ici. Les extraits fournis donnent un aperçu structurel et des explications clés. Le code complet serait disponible dans la source d'origine.)

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!