社区学习工具库休闲

简体中文

首页 > web前端 > js教程 > 一天，学到了什么

一天，学到了什么

Linda Hamilton

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

原创

899 人浏览过

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

2282

google 浏览器手机版显示的怎么实现老师您好，google 浏览器怎么变成手机版样式的？

来自于 2024-04-23 00:22:19

0

11

2416

子窗口操作父窗口，输出没反应前两句可执行，最后一句没法应

来自于 2024-04-19 15:37:47

0

1

2032

父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出'); ...

来自于 2024-04-18 23:52:34

0

1

1917

关于CSS思维导图的课件在哪？课件

来自于 2024-04-16 10:10:18

0

0

1991

相关专题

更多>

热门推荐

热门教程

更多>

相关教程

热门推荐

最新课程

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

1424335
php入门教程之一周学会PHP

4270623
JAVA 初级入门视频教程

2548457
小甲鱼零基础入门学习Python视频教程

508001
PHP 零基础入门教程

863660

最新下载

更多>

网站特效

网站源码

网站素材

前端模板