Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > Tag, was habe ich gelernt

Tag, was habe ich gelernt

Linda Hamilton

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

Original

899 Leute haben es durchsucht

Day , what did learn

Ich lerne C , um Spieleentwickler zu werden, aber ich dachte, warum nicht damit auch Webentwickler lernen, also habe ich angefangen, Frontend zu lernen, und werde meine Reise von hier aus veröffentlichen jetzt am .

Hier ist ein Einzelseitiger Front-End-Entwicklungs-Spickzettel zum schnellen Nachschlagen:

HTML (HyperText Markup Language)

Grundstruktur:

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

Nach dem Login kopieren

Nach dem Login kopieren

Elemente:
- Grundlegende Tags:
  ,
  ,
  -
  ,
  , , ,
CSS (Cascading Style Sheets)
- Syntax:
```
  selector {
    property: value;
  }
```
Nach dem Login kopieren
Nach dem Login kopieren
- Selektoren:
  - element, .class, #id, element.class, element#id
  - Pseudoklassen: :hover, :active, :focus
  - Pseudoelemente: ::before, ::after
- Layout-Techniken:
  - Flexbox:
  .container { display: flex; justify-content: center; align-items: center; flex-direction: row; /* or column */ }
  Nach dem Login kopieren
  Nach dem Login kopieren
  - Raster:
  .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  Nach dem Login kopieren
  Nach dem Login kopieren
- Positionierung:
  - statisch, relativ, absolut, fest, klebrig
- Box-Modell:
  - Rand, Abstand, Rand, Inhalt
```
  div {
    margin: 10px;
    padding: 20px;
    border: 1px solid #000;
  }
```
Nach dem Login kopieren
Nach dem Login kopieren
- Medienabfragen (für Reaktionsfähigkeit):
```
  @media screen and (max-width: 768px) {
    .container {
      display: block;
    }
  }
```
Nach dem Login kopieren
Nach dem Login kopieren
JavaScript
- Variablen:
```
  let variable = "value"; // Mutable
  const constant = "value"; // Immutable
```
Nach dem Login kopieren
- Funktionen:
```
  function myFunction() {
    console.log("Hello");
  }

  const myArrowFunction = () => console.log("Hello");
```
Nach dem Login kopieren
- DOM-Manipulation:
  - Auf Elemente zugreifen und diese ändern:
```
const el = document.getElementById('id');
el.style.color = "red";
el.innerHTML = 'New Content';
```
  Nach dem Login kopieren
- Ereignisbearbeitung:
```
  <!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>
```
Nach dem Login kopieren
Nach dem Login kopieren
- Array-Methoden:
  - map(), filter(), Reduce(), forEach()
```
  selector {
    property: value;
  }
```
Nach dem Login kopieren
Nach dem Login kopieren
React.js (Grundlagen)
- Erstellen einer Komponente:
```
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row; /* or column */
}
```
Nach dem Login kopieren
Nach dem Login kopieren
- JSX-Syntax:
```
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
```
Nach dem Login kopieren
Nach dem Login kopieren
- Zustand und Requisiten:
```
  div {
    margin: 10px;
    padding: 20px;
    border: 1px solid #000;
  }
```
Nach dem Login kopieren
Nach dem Login kopieren
- useEffect Hook:
```
  @media screen and (max-width: 768px) {
    .container {
      display: block;
    }
  }
```
Nach dem Login kopieren
Nach dem Login kopieren
Versionskontrolle (Git)
- Grundlegende Befehle:
  - git init – Repository initialisieren
  - Git-Status – Überprüfen Sie den aktuellen Status
  - git add . - Alle Änderungen inszenieren
  - git commit -m „Message“ – Änderungen übernehmen
  - git push – Push an Remote-Repository
  - git pull – Updates abrufen
Allgemeine Tools
- npm (Node Package Manager) Befehle:
  - npm install - Installieren Sie ein Paket
  - npm start – Starten Sie die Anwendung
- Codeformatierer:
  - Hübscher – Code automatisch formatieren
  - ESLint – Linting, um potenzielle Fehler zu erkennen
Das obige ist der detaillierte Inhalt vonTag, was habe ich gelernt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：dev.to

Vorheriger Artikel：Wie kann ich Objekte in JavaScript effektiv auf Gleichheit vergleichen? Nächster Artikel：Wie kann ich mit jQuery AJAX ein Formular mit allen Eingaben senden?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

0

3

2282

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

0

11

2416

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

0

1

2032

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

0

1

1917

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

1991

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage