Mencipta pemapar HTML, CSS dan JS secara langsung-tutorial js-php.cn

Mencipta pemapar HTML, CSS dan JS secara langsung

Susan Sarandon

Lepaskan： 2025-01-16 12:51:00

asal

792 orang telah melayarinya

Pelajari pembangunan web dengan membina projek! Walaupun tanpa pengetahuan HTML, CSS atau JavaScript, tutorial ini akan membimbing anda membuat pemapar kod langsung, serupa dengan CodePen tetapi dengan sentuhan yang unik. Mari mulakan perjalanan yang menarik ini!

HTML: Asas Laman Web

HTML (HyperText Markup Language) membentuk tulang belakang struktur tapak web. Ia mentakrifkan kandungan halaman (teks, imej, butang) menggunakan tag—arahan untuk penyemak imbas.

Struktur HTML: Pecahan Terperinci

(Langkau bahagian ini jika anda sudah biasa dengan HTML.)

<!DOCTYPE html>: Pengisytiharan ini menandakan dokumen HTML5 kepada penyemak imbas.
<html lang="en">: Bekas akar untuk semua elemen halaman. lang="en" menentukan bahasa sebagai bahasa Inggeris.
<head>: Mengandungi metadata (maklumat tentang halaman, bukan kandungan yang boleh dilihat). Selalunya digunakan untuk SEO.
<meta charset="UTF-8">: Menentukan set aksara (UTF-8 menyokong kebanyakan aksara).
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Memastikan penskalaan yang betul pada peranti berbeza.
<title>Sleek HTML/CSS/JS Displayer</title>: Tajuk dipaparkan dalam tab penyemak imbas.
<link href="style.css" rel="stylesheet">: Memautkan fail CSS luaran untuk penggayaan.
<link href="https://cdnjs.cloudflare.com/.../all.min.css" rel="stylesheet">: Memautkan fail CSS Font Awesome untuk ikon.
</head>: Menutup bahagian kepala.
<body>: Mengandungi kandungan halaman yang boleh dilihat.
<div class="app-container">: Bekas utama untuk reka letak aplikasi.
...(Elemen HTML lanjut yang mentakrifkan editor kod, anak tetingkap pratonton, dll. Lihat kod lengkap di bawah.)
</body>: Menutup bahagian badan.
</html>: Menutup dokumen HTML.

CSS: Menggayakan Ciptaan Anda

CSS (Cascading Style Sheets) menggayakan dan membentangkan halaman web, mengawal warna, fon, jarak dan penampilan visual. Anggap ia sebagai lapisan estetik tapak web.

Penjelasan Kod CSS (Ringkasan):

Kod CSS (ditunjukkan di bawah) menggunakan pemilih (cth., body, .app-header) untuk menyasarkan elemen HTML tertentu dan menggunakan sifat (cth., color, background-color) dan nilai untuk menggayakannya. Ia termasuk gaya untuk mod gelap, reka bentuk responsif dan pelbagai elemen UI.

JavaScript: Menambah Interaktiviti

JavaScript menambah interaktiviti, menjadikan tapak web anda dinamik. Ia membolehkan interaksi pengguna, kemas kini kandungan tanpa muat semula halaman dan banyak lagi.

Penjelasan Kod JavaScript (Ringkasan):

Kod JavaScript (ditunjukkan di bawah) memanipulasi DOM (Model Objek Dokumen), menambahkan pendengar acara untuk mengendalikan input pengguna (menaip, klik), mengemas kini anak tetingkap pratonton, mengurus nombor baris, melaksanakan fungsi nyahpantun untuk kecekapan dan mengawal mod gelap dan kefungsian skrin penuh.

Kod Lengkap:

<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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

Creating a live HTML, CSS and JS displayer

(Nota: Kod HTML, CSS dan JavaScript yang lengkap akan terlalu luas untuk disertakan di sini. Coretan yang disediakan memberikan gambaran keseluruhan struktur dan penjelasan utama. Kod penuh akan tersedia dalam sumber asal.)

Atas ialah kandungan terperinci Mencipta pemapar HTML, CSS dan JS secara langsung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!