社群學習工具庫休閒

繁体中文

首頁 > web前端 > js教程 > 有一天，學到了什麼

有一天，學到了什麼

Linda Hamilton

發布： 2024-12-24 05:03:13

原創

903 人瀏覽過

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中文網其他相關文章！

來源：dev.to

上一篇：如何在 JavaScript 中有效比較物件的相等性？下一篇：如何使用 jQuery AJAX 提交包含所有輸入的表單？

本網站聲明

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

作者最新文章

最新問題

function_exists()無法判定自訂函數 function test() { return true; } if (function_exists('TEST')) { ech...

來自於 2024-04-29 11:01:01

0

3

2284

google 瀏覽器手機版顯示的怎麼實現老師您好，google 瀏覽器怎麼變成手機版樣式的？

來自於 2024-04-23 00:22:19

0

11

2421

子窗口操作父窗口，輸出沒反應前兩句可執行，最後一句沒辦法應

來自於 2024-04-19 15:37:47

0

1

2036

父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出'); ...

來自於 2024-04-18 23:52:34

0

1

1919

關於CSS心智圖的課件在哪？課件

來自於 2024-04-16 10:10:18

0

0

1994

相關專題

更多>

熱門推薦

熱門教學

更多>

相關教學

熱門推薦

最新課程

最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

1424400
php入門教程之一週學會PHP

4270738
JAVA 初級入門影片教學

2549232
小甲魚零基礎入門學習Python影片教學

508220
PHP 零基礎入門教學

863746

最新下載

更多>

網站特效

網站源碼

網站素材

前端模板