masyarakat

Belajar

Perpustakaan Alatan

Alat AI

Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial js > Day , apa yang dipelajari

Day , apa yang dipelajari

Linda Hamilton

Lepaskan： 2024-12-24 05:03:13

asal

1001 orang telah melayarinya

Day , what did learn

saya sedang belajar C untuk menjadi pembangun permainan tetapi saya fikir mengapa tidak belajar pembangun web dengannya jadi saya mula belajar front end dan akan menyiarkan perjalanan saya dari sekarang .

Berikut ialah Helaian Penipuan Pembangunan Hujung Hadapan Satu Halaman untuk rujukan pantas:

HTML (Bahasa Penanda HyperTeks)

Struktur Asas:

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Title</title>
    </head>
    <body>
      <header></header>
      <main></main>
      <footer></footer>
    </body>
  </html>

Salin selepas log masuk

Salin selepas log masuk

Elemen:
- Teg Asas:
  ,
  ,
  -
  ,
  , , , ,
  ,
  ,
CSS (Lembaran Gaya Lata)
- Sintaks:
```
  selector {
    property: value;
  }
```
Salin selepas log masuk
Salin selepas log masuk
- Pemilih:
  - elemen, .class, #id, element.class, element#id
  - Kelas Pseudo: :hover, :active, :focus
  - Unsur Pseudo: ::sebelum, ::selepas
- Teknik Reka Letak:
  - Kotak Flex:
  .container { display: flex; justify-content: center; align-items: center; flex-direction: row; /* or column */ }
  Salin selepas log masuk
  Salin selepas log masuk
  - Grid:
  .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  Salin selepas log masuk
  Salin selepas log masuk
- Kedudukan:
  - statik, relatif, mutlak, tetap, melekit
- Model Kotak:
  - Margin, Padding, Sempadan, Kandungan
```
  div {
    margin: 10px;
    padding: 20px;
    border: 1px solid #000;
  }
```
Salin selepas log masuk
Salin selepas log masuk
- Pertanyaan Media (untuk Responsif):
```
  @media screen and (max-width: 768px) {
    .container {
      display: block;
    }
  }
```
Salin selepas log masuk
Salin selepas log masuk
JavaScript
- Pembolehubah:
```
  let variable = "value"; // Mutable
  const constant = "value"; // Immutable
```
Salin selepas log masuk
- Fungsi:
```
  function myFunction() {
    console.log("Hello");
  }

  const myArrowFunction = () => console.log("Hello");
```
Salin selepas log masuk
- Manipulasi DOM:
  - Akses dan ubah suai elemen:
```
const el = document.getElementById('id');
el.style.color = "red";
el.innerHTML = 'New Content';
```
  Salin selepas log masuk
- Pengendalian Acara:
```
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Title</title>
    </head>
    <body>
      <header></header>
      <main></main>
      <footer></footer>
    </body>
  </html>
```
Salin selepas log masuk
Salin selepas log masuk
- Kaedah Tatasusunan:
  - map(), filter(), reduce(), forEach()
```
  selector {
    property: value;
  }
```
Salin selepas log masuk
Salin selepas log masuk
React.js (Asas)
- Mencipta Komponen:
```
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row; /* or column */
}
```
Salin selepas log masuk
Salin selepas log masuk
- Sintaks JSX:
```
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
```
Salin selepas log masuk
Salin selepas log masuk
- Negeri dan Props:
```
  div {
    margin: 10px;
    padding: 20px;
    border: 1px solid #000;
  }
```
Salin selepas log masuk
Salin selepas log masuk
- useEffect Hook:
```
  @media screen and (max-width: 768px) {
    .container {
      display: block;
    }
  }
```
Salin selepas log masuk
Salin selepas log masuk
Kawalan Versi (Git)
- Perintah Asas:
  - git init - Mulakan repositori
  - status git - Semak status semasa
  - git add . - Peringkat semua perubahan
  - git commit -m "Message" - Komit perubahan
  - git push - Tekan ke repositori jauh
  - git pull - Ambil kemas kini
Alat Biasa
- npm (Pengurus Pakej Nod) Perintah:
  - npm pasang - Pasang pakej
  - npm start - Mulakan aplikasi
- Pemformat Kod:
  - Lebih cantik - Kod autoformat
  - ESLint - Linting untuk menangkap kemungkinan ralat
Atas ialah kandungan terperinci Day , apa yang dipelajari. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel sebelumnya：Bagaimanakah Saya Boleh Membandingkan Objek untuk Kesaksamaan dengan Berkesan dalam JavaScript? Artikel seterusnya：Bagaimanakah Saya Boleh Menghantar Borang dengan Semua Input Menggunakan jQuery AJAX?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Isu terkini

TypeScript untuk pemula, Bahagian 2: Jenis Data Asas

2025-03-19 09:10:13
Bagaimanakah saya menggunakan peta sumber untuk debug kod JavaScript minified?

2025-03-18 15:17:30
Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar?

2025-03-18 15:16:33
Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas?

2025-03-18 15:14:33
Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?

2025-03-18 15:12:30

Topik-topik yang berkaitan

Lagi>

Cadangan popular

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan