一天，学到了什么

Linda Hamilton原创: 2024-12-24 05:03:13903浏览

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

上一篇：How Can I Effectively Compare Objects for Equality in JavaScript?下一篇：How Can I Submit a Form with All Inputs Using jQuery AJAX?

查看更多