有一天，學到了什麼

Linda Hamilton原創: 2024-12-24 05:03:13908瀏覽

Day , what did learn

我正在學習C 成為一名遊戲開發人員，但我想為什麼不用它來學習網絡開發，所以我開始學習前端並將發布我的旅程現在開始。

這裡有一個單頁前端開發備忘錄供快速參考：

HTML（超文本標記語言）

基本結構：

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

元素：

基本標籤：

、、

-

、

、、有一天，學到了什麼、、

、

通用屬性：
- id、類別、src、href、alt、樣式

CSS（層疊樣式表）

文法：

  selector {
    property: value;
  }

選擇器：
- 元素、.class、#id、元素.class、元素#id
- 偽類：:hover、:active、:focus
- 偽元素：::before, ::after

版面技巧：

彈性盒：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row; /* or column */
}

網格：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

定位：
- 靜態、相對、絕對、固定、黏性
盒子模型：
- 邊距、填充、邊框、內容

  div {
    margin: 10px;
    padding: 20px;
    border: 1px solid #000;
  }

媒體查詢（回應性）：

  @media screen and (max-width: 768px) {
    .container {
      display: block;
    }
  }

JavaScript

變數：

  let variable = "value"; // Mutable
  const constant = "value"; // Immutable

功能：

  function myFunction() {
    console.log("Hello");
  }

  const myArrowFunction = () => console.log("Hello");

DOM 操作：

存取和修改元素：

const el = document.getElementById('id');
el.style.color = "red";
el.innerHTML = 'New Content';

事件處理：

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

陣列方法：
- 映射（），過濾器（），減少（），forEach（）

  selector {
    property: value;
  }

React.js（基礎）

建立組件：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row; /* or column */
}

JSX 語法：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

狀態與道具：

  div {
    margin: 10px;
    padding: 20px;
    border: 1px solid #000;
  }

使用效果掛鉤：

  @media screen and (max-width: 768px) {
    .container {
      display: block;
    }
  }

版本控制 (Git)

基本指令：
- git init - 初始化儲存庫
- git status - 檢查目前狀態
- git 新增 . - 暫存所有變更
- git commit -m "Message" - 提交更改
- git push - 推送到遠端儲存庫
- git pull - 取得更新

常用工具

npm（節點套件管理器）指令：
- npm install ; - 安裝軟體包
- npm start - 啟動應用程式
程式碼格式化程式：
- Prettier - 自動格式化程式碼
- ESLint - 檢查潛在錯誤

以上是有一天，學到了什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css html npm Static Array for foreach format catch Filter auto class Event map JS dom href margin padding border ul li git Access Game

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何在 JavaScript 中有效比較物件的相等性？下一篇：如何在 JavaScript 中有效比較物件的相等性？

看更多