From a664c18d1b41881df99569b03a921e9a2e2c1f0e Mon Sep 17 00:00:00 2001 From: Pjc <2121542413@qq.com> Date: Thu, 10 Sep 2026 22:58:30 +0800 Subject: [PATCH] add HTML/CSS/JS daily challenge for web department --- Day_0/README.md | 41 +++++++++++++++++++++++++ Day_1/README.md | 74 +++++++++++++++++++++++++++++++++++++++++++++ Day_10/README.md | 57 +++++++++++++++++++++++++++++++++++ Day_11/README.md | 58 +++++++++++++++++++++++++++++++++++ Day_12/README.md | 59 ++++++++++++++++++++++++++++++++++++ Day_13/README.md | 62 ++++++++++++++++++++++++++++++++++++++ Day_2/README.md | 64 +++++++++++++++++++++++++++++++++++++++ Day_3/README.md | 72 ++++++++++++++++++++++++++++++++++++++++++++ Day_4/README.md | 65 ++++++++++++++++++++++++++++++++++++++++ Day_5/README.md | 78 ++++++++++++++++++++++++++++++++++++++++++++++++ Day_6/README.md | 68 +++++++++++++++++++++++++++++++++++++++++ Day_7/README.md | 57 +++++++++++++++++++++++++++++++++++ Day_8/README.md | 44 +++++++++++++++++++++++++++ Day_9/README.md | 63 ++++++++++++++++++++++++++++++++++++++ README.md | 48 +++++++++++++++++++++++++++++ 15 files changed, 910 insertions(+) create mode 100644 Day_0/README.md create mode 100644 Day_1/README.md create mode 100644 Day_10/README.md create mode 100644 Day_11/README.md create mode 100644 Day_12/README.md create mode 100644 Day_13/README.md create mode 100644 Day_2/README.md create mode 100644 Day_3/README.md create mode 100644 Day_4/README.md create mode 100644 Day_5/README.md create mode 100644 Day_6/README.md create mode 100644 Day_7/README.md create mode 100644 Day_8/README.md create mode 100644 Day_9/README.md create mode 100644 README.md diff --git a/Day_0/README.md b/Day_0/README.md new file mode 100644 index 0000000..270a211 --- /dev/null +++ b/Day_0/README.md @@ -0,0 +1,41 @@ +# Day_0 · 配置开发环境(VS Code + Node.js + 终端 + 浏览器) + +> 预计耗时:20~30 分钟 +> 前端一切从工具开始。今天装好编辑器 VS Code 和运行环境 Node.js,学会用终端,认识浏览器开发者工具。 + +## 今日知识点 + +- VS Code:写代码的编辑器,装几个常用插件 +- Node.js:让你能在电脑上运行 JavaScript(第二周会用 `node` 命令跑脚本) +- 终端(命令行):执行命令的地方,Windows 上是 PowerShell / CMD +- 浏览器开发者工具:按 F12 打开,前端调试全靠它 + +## 先学(教程) + +- VS Code 官方文档·入门:https://code.visualstudio.com/docs +- MDN·浏览器开发者工具入门:https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools +- B站视频(黑马程序员,看讲"软件下载、VSCode 使用"的几集,选看):https://www.bilibili.com/video/BV14J4114768/ + +## 任务(后做) + +1. 下载安装 VS Code:https://code.visualstudio.com/ ,一路下一步 +2. 在 VS Code 扩展商店(左侧方块图标)搜索并安装四个插件: + - **Live Server**(预览网页用,安装好之后可以通过在文件页点击鼠标右键选择“open with live server”的方式在浏览器实时观看你所写的静态网页) + - **Chinese (Simplified)**(中文界面,可选) + - **Prettier**(自动格式化代码) + - **HTML CSS Support** +3. 下载安装 Node.js:https://nodejs.org/ (选 **LTS** 版本,一路下一步), + 装好后打开终端运行 `node --version`,能看到版本号即成功 +4. 打开终端(Windows 按 `Win + R` 输入 `cmd` 回车),运行 `ver` 或 `dir`,看看能输出什么 +5. 随便打开一个网页,按 F12,认识"元素"和"控制台"两个面板 + +> 小贴士:终端里输入命令后回车才会执行;VS Code 底部也能打开内置终端。 + +## 完成标准 + +- [ ] VS Code 安装成功,四个插件装好 +- [ ] `node --version` 能输出版本号 +- [ ] 终端能运行命令 +- [ ] 能按 F12 打开开发者工具 + +**提交方式**:把 VS Code 打开(含插件栏)+ 开发者工具的**截图**贴在当日工单评论里。 diff --git a/Day_1/README.md b/Day_1/README.md new file mode 100644 index 0000000..630aed5 --- /dev/null +++ b/Day_1/README.md @@ -0,0 +1,74 @@ +# Day_1 · HTML 文档结构与常用标签 + +> 预计耗时:20~30 分钟 +> HTML 是网页的"骨架"。今天认识一个页面的基本结构,和几个最常用的标签。 + +## 今日知识点 + +- HTML 文档结构:``、``、``、`` +- 常用标签:标题 `

`~`

`、段落 `

`、链接 ``、图片 `` +- 盒子标签:`

`(块级容器)、``(行内容器) + +## 先学(教程) + +- 菜鸟教程 HTML(看"HTML 简介"和"HTML 元素"):https://www.runoob.com/html/html-tutorial.html +- MDN·HTML 基础:https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics +- B站视频(黑马程序员,看讲"HTML 结构、标题/段落/div/span/图像/链接标签"的几集,选看):https://www.bilibili.com/video/BV14J4114768/ + +## 任务(后做) + +新建 `about.html`,写一个自我介绍页面: + +1. 完整文档结构(``、``、``、`` 一个不少)[注:打一个!再按tab键可以直接补齐html骨架] +2. 一个 `

` 主标题、两个 `

` 段落介绍自己 +3. 一个 `` 链接(用 `target="_blank"`)、一张 `` 图片 +4. 用 `

` 包住一段内容、用 `` 给一句话占位(今天先不写样式) + +示例骨架: +```html + + + + + 关于我 + + +

我叫张三

+
+

我是web部的新成员。

+ 这句话稍后要变色。 +
+ + +``` + +> `lang="zh"` 表示中文,`` 防止中文乱码。 + +## 完成标准 + +- [ ] 页面能正常打开,中文不乱码 +- [ ] h1/p/a/img/div/span 都用到了 +- [ ] 能说出 `` 和 `` 分别放什么 + +**提交方式**:把 `about.html` 代码贴在当日工单评论里。 + +## 参考解答(先做再看) + +```html + + + + + 关于我 + + +

我叫张三

+
+

我是web部的新成员,来自青岛,喜欢写代码。

+

这是我做的第一个网页。

+
+
我的学习资料 + 图片 + + +``` diff --git a/Day_10/README.md b/Day_10/README.md new file mode 100644 index 0000000..0b4656b --- /dev/null +++ b/Day_10/README.md @@ -0,0 +1,57 @@ +# Day_10 · 循环 for / while + +> 预计耗时:20~30 分钟 +> 让程序"会重复":把同一件事做很多遍,不用复制粘贴。 + +## 今日知识点 + +- `for (let i = 0; i < 5; i++) { ... }` 重复执行固定次数 +- `while (条件) { ... }` 满足条件就一直执行 +- 循环里用 `i` 计数 + +## 先学(教程) + +- 菜鸟教程 JS(看"JS 循环"):https://www.runoob.com/js/js-loop.html +- MDN·循环:https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Looping_code +- B站视频(黑马程序员,看讲"for/while 循环"的几集,选看):https://www.bilibili.com/video/BV1Y84y1L7Nn/ + +## 任务(后做) + +新建 `day10.js`: + +1. 用 `for` 打印 1 到 5: + ```javascript + for (let i = 1; i <= 5; i++) { + console.log(i); + } + ``` +2. 用 `for` 打印 1 到 10 里的**偶数**(提示:`if (i % 2 === 0)`) +3. 用 `while` 从 10 倒数到 1 + +## 完成标准 + +- [ ] for 循环打印 1~5 +- [ ] 能筛出偶数 +- [ ] while 循环能倒数 + +**提交方式**:把 `day10.js` 代码 + 运行结果截图,贴在当日工单评论里。 + +## 参考解答(先做再看) + +```javascript +for (let i = 1; i <= 5; i++) { + console.log(i); +} + +for (let i = 1; i <= 10; i++) { + if (i % 2 === 0) { + console.log(i); // 2 4 6 8 10 + } +} + +let n = 10; +while (n >= 1) { + console.log(n); + n--; +} +``` diff --git a/Day_11/README.md b/Day_11/README.md new file mode 100644 index 0000000..85656e8 --- /dev/null +++ b/Day_11/README.md @@ -0,0 +1,58 @@ +# Day_11 · 函数:把代码装进"盒子"反复用 + +> 预计耗时:20~30 分钟 +> 把一段代码打包,起个名字,之后随时调用。函数是写程序的必备技能。 + +## 今日知识点 + +- 定义:`function 名字(参数) { ... return 结果; }` +- 调用:`名字(参数)` +- `return` 返回结果,没有就返回 `undefined` + +## 先学(教程) + +- 菜鸟教程 JS(看"JS 函数"):https://www.runoob.com/js/js-functions.html +- MDN·函数:https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions +- B站视频(黑马程序员,看讲"函数定义、参数、返回值"的几集,选看):https://www.bilibili.com/video/BV1Y84y1L7Nn/ + +## 任务(后做) + +新建 `day11.js`: + +1. 加法函数: + ```javascript + function add(a, b) { + return a + b; + } + console.log(add(3, 5)); // 8 + ``` +2. 写一个 `isAdult(age)`,年龄 ≥18 返回 `true`,否则 `false`,并调用打印 +3. 写一个 `greet(name)`,返回 `"你好," + name` + +## 完成标准 + +- [ ] 会用参数和 return +- [ ] 能调用自己写的函数 +- [ ] 能说出 return 和 console.log 的区别 + +**提交方式**:把 `day11.js` 代码 + 运行结果截图,贴在当日工单评论里。 + +## 参考解答(先做再看) + +```javascript +function add(a, b) { + return a + b; +} +console.log(add(3, 5)); // 8 + +function isAdult(age) { + return age >= 18; +} +console.log(isAdult(20)); // true +console.log(isAdult(15)); // false + +function greet(name) { + return "你好," + name; +} +console.log(greet("张三")); +``` diff --git a/Day_12/README.md b/Day_12/README.md new file mode 100644 index 0000000..8e77622 --- /dev/null +++ b/Day_12/README.md @@ -0,0 +1,59 @@ +# Day_12 · 数组方法 push / filter / map / forEach + +> 预计耗时:20~30 分钟 +> 数组是一串数据的列表。今天学 4 个最常用的数组方法,后续做项目全靠它们。 + +## 今日知识点 + +- `push(x)`:往数组末尾加一个 +- `forEach(fn)`:遍历每个元素,挨个处理 +- `map(fn)`:把每个元素变一下,得到新数组 +- `filter(fn)`:筛出满足条件的元素 + +## 先学(教程) + +- 菜鸟教程 JS(看"JS 数组"和"JS 数组方法"):https://www.runoob.com/js/js-array-methods.html +- MDN·数组:https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Arrays +- B站视频(黑马程序员,看讲"数组操作、forEach/map"的几集,选看):https://www.bilibili.com/video/BV1Y84y1L7Nn/ + +## 任务(后做) + +新建 `day12.js`: + +1. `let nums = [1, 2, 3];` 用 `push(4)` 再打印,看结果 +2. 用 `forEach` 遍历 `[1, 2, 3, 4, 5]`,打印每个元素(写法:`[1,2,3,4,5].forEach(function(n){ console.log(n); })`) +3. 用 `map` 把 `[1, 2, 3]` 变成 `[2, 4, 6]`(每个乘 2,写法:`[1,2,3].map(function(n){ return n * 2; })`) +4. 用 `filter` 从 `[1, 2, 3, 4, 5, 6]` 里筛出偶数 + +## 完成标准 + +- [ ] 会用 push 加元素 +- [ ] 会用 forEach / map / filter +- [ ] 能说出 map 和 forEach 的区别(map 返回新数组) + +**提交方式**:把 `day12.js` 代码 + 运行结果截图,贴在当日工单评论里。 + +## 参考解答(先做再看) + +```javascript +let nums = [1, 2, 3]; +nums.push(4); +console.log(nums); // [1, 2, 3, 4] + +[1, 2, 3, 4, 5].forEach(function (n) { + console.log(n); +}); + +const doubled = [1, 2, 3].map(function (n) { + return n * 2; +}); +console.log(doubled); // [2, 4, 6] + +const even = [1, 2, 3, 4, 5, 6].filter(function (n) { + return n % 2 === 0; +}); +console.log(even); // [2, 4, 6] +``` + +> 传给 forEach / map / filter 的那个 `function (n) { ... }` 叫"回调函数", +> 数组会把它套在**每一个元素**上各执行一次。先按这种写法记,后面会学更简短的箭头函数写法。 diff --git a/Day_13/README.md b/Day_13/README.md new file mode 100644 index 0000000..c5bcdf2 --- /dev/null +++ b/Day_13/README.md @@ -0,0 +1,62 @@ +# Day_13 · 对象 Object 与 JSON(第二周小测) + +> 预计耗时:20~30 分钟 +> 对象把一组相关的数据打包在一起(比如一个人的姓名、年龄、爱好)。JSON 是前后端传数据的通用格式。今天认识它们。 + +## 今日知识点 + +- 对象:`{ 键: 值, 键: 值 }`,用 `对象.键` 取值 +- JSON:本质是"字符串形式的对象",常用于接口传数据 +- `JSON.stringify(对象)` 转字符串;`JSON.parse(字符串)` 转回对象 + +## 先学(教程) + +- 菜鸟教程 JS(看"JS 对象"和"JS JSON"):https://www.runoob.com/js/js-json.html +- MDN·JSON:https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/JSON +- B站视频(黑马程序员,看讲"对象、JSON"的几集,选看):https://www.bilibili.com/video/BV1Y84y1L7Nn/ + +## 任务(后做) + +新建 `day13.js`: + +1. 建一个对象: + ```javascript + let person = { + name: "张三", + age: 18, + hobbies: ["代码", "篮球"] + }; + console.log(person.name); + console.log(person.hobbies[0]); + ``` +2. 用 `JSON.stringify(person)` 转成字符串,打印看看长什么样 +3. 用 `JSON.parse` 把这段字符串转回对象,再打印 `.age` + +## 完成标准 + +- [ ] 会用 `对象.键` 取值 +- [ ] 会 JSON 字符串和对象的互相转换 +- [ ] 能说出对象和 JSON 字符串的区别 + +**提交方式**:把 `day13.js` 代码 + 运行结果截图,贴在当日工单评论里。 + +## 参考解答(先做再看) + +```javascript +let person = { + name: "张三", + age: 18, + hobbies: ["代码", "篮球"] +}; +console.log(person.name); // 张三 +console.log(person.hobbies[0]); // 代码 + +const json = JSON.stringify(person); +console.log(json); +// {"name":"张三","age":18,"hobbies":["代码","篮球"]} + +const obj = JSON.parse(json); +console.log(obj.age); // 18 +``` + +> 恭喜!两周的基础都走完了。下一步进入 DOM 操作、事件、异步和 Vue,请期待后面的课程。 diff --git a/Day_2/README.md b/Day_2/README.md new file mode 100644 index 0000000..18f2a7e --- /dev/null +++ b/Day_2/README.md @@ -0,0 +1,64 @@ +# Day_2 · HTML 表单与输入控件 + +> 预计耗时:20~30 分钟 +> 网页要能"填":登录、注册、搜索都靠表单。今天认识最常用的输入控件。 + +## 今日知识点 + +- 表单容器 `
` +- 输入框 ``、密码 `type="password"`、单选 `type="radio"`、多选 `type="checkbox"` +- 按钮 `