add HTML/CSS/JS daily challenge for web department

This commit is contained in:
Pjc
2026-09-10 22:58:30 +08:00
commit a664c18d1b
15 changed files with 910 additions and 0 deletions
+41
View File
@@ -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 打开(含插件栏)+ 开发者工具的**截图**贴在当日工单评论里。
+74
View File
@@ -0,0 +1,74 @@
# Day_1 · HTML 文档结构与常用标签
> 预计耗时:20~30 分钟
> HTML 是网页的"骨架"。今天认识一个页面的基本结构,和几个最常用的标签。
## 今日知识点
- HTML 文档结构:`<!DOCTYPE html>`、`<html>`、`<head>`、`<body>`
- 常用标签:标题 `<h1>`~`<h6>`、段落 `<p>`、链接 `<a>`、图片 `<img>`
- 盒子标签:`<div>`(块级容器)、`<span>`(行内容器)
## 先学(教程)
- 菜鸟教程 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. 完整文档结构(`<!DOCTYPE html>`、`<html>`、`<head>`、`<body>` 一个不少)[注:打一个!再按tab键可以直接补齐html骨架]
2. 一个 `<h1>` 主标题、两个 `<p>` 段落介绍自己
3. 一个 `<a>` 链接(用 `target="_blank"`)、一张 `<img>` 图片
4. 用 `<div>` 包住一段内容、用 `<span>` 给一句话占位(今天先不写样式)
示例骨架:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>关于我</title>
</head>
<body>
<h1>我叫张三</h1>
<div>
<p>我是web部的新成员。</p>
<span>这句话稍后要变色。</span>
</div>
</body>
</html>
```
> `lang="zh"` 表示中文,`<meta charset="UTF-8">` 防止中文乱码。
## 完成标准
- [ ] 页面能正常打开,中文不乱码
- [ ] h1/p/a/img/div/span 都用到了
- [ ] 能说出 `<head>` 和 `<body>` 分别放什么
**提交方式**:把 `about.html` 代码贴在当日工单评论里。
## 参考解答(先做再看)
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>关于我</title>
</head>
<body>
<h1>我叫张三</h1>
<div>
<p>我是web部的新成员,来自青岛,喜欢写代码。</p>
<p>这是我做的第一个网页。</p>
</div>
<a href="https://www.runoob.com" target="_blank">我的学习资料</a>
<img src="https://www.runoob.com/wp-content/uploads/2013/12/react.png" alt="图片" width="200">
</body>
</html>
```
+57
View File
@@ -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--;
}
```
+58
View File
@@ -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("张三"));
```
+59
View File
@@ -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) { ... }` 叫"回调函数",
> 数组会把它套在**每一个元素**上各执行一次。先按这种写法记,后面会学更简短的箭头函数写法。
+62
View File
@@ -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,请期待后面的课程。
+64
View File
@@ -0,0 +1,64 @@
# Day_2 · HTML 表单与输入控件
> 预计耗时:20~30 分钟
> 网页要能"填":登录、注册、搜索都靠表单。今天认识最常用的输入控件。
## 今日知识点
- 表单容器 `<form>`
- 输入框 `<input type="text">`、密码 `type="password"`、单选 `type="radio"`、多选 `type="checkbox"`
- 按钮 `<button>`、下拉框 `<select>` + `<option>`、多行文本 `<textarea>`
## 先学(教程)
- 菜鸟教程 HTML(看"HTML 表单"):https://www.runoob.com/html/html-forms.html
- MDN·你的第一个表单:https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Your_first_form
- B站视频(黑马程序员,看讲"表单、input/select/textarea"的几集,选看):https://www.bilibili.com/video/BV14J4114768/
## 任务(后做)
新建 `signup.html`,做一个简单的**报名表单**,包含:
1. 姓名(text)、密码(password)
2. 性别(radio 两个,`name` 相同才能单选)
3. 意向方向(select 下拉:前端 / 后端)
4. 一个提交按钮(button)
> 提示:`name` 属性是给输入框"起名字",表单提交时用来区分不同字段(比如 `name="gender"` 表示这是性别那一项)。
## 完成标准
- [ ] 表单能显示并填写
- [ ] radio 能单选
- [ ] 用了 input / select / button
**提交方式**:把 `signup.html` 代码贴在当日工单评论里。
## 参考解答(先做再看)
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>报名</title>
</head>
<body>
<form>
<p>姓名:<input type="text" name="name"></p>
<p>密码:<input type="password" name="pwd"></p>
<p>性别:
<label><input type="radio" name="gender" value="男">男</label>
<label><input type="radio" name="gender" value="女">女</label>
</p>
<p>方向:
<select name="direction">
<option value="frontend">前端</option>
<option value="backend">后端</option>
</select>
</p>
<button type="submit">提交</button>
</form>
</body>
</html>
```
+72
View File
@@ -0,0 +1,72 @@
# Day_3 · CSS 选择器与颜色字体
> 预计耗时:20~30 分钟
> HTML 是骨架,CSS 是衣服。今天学会用**选择器**找到元素,再设置颜色和字体。
## 今日知识点
- CSS 三种写法:内联 `style="..."`、内部 `<style>`、外部 `<link>`(推荐外部)
- 选择器:标签选择器 `h1`、类选择器 `.类名`、id 选择器 `#id`
- 常用属性:`color` 文字颜色、`font-size` 字号、`background-color` 背景色、`text-align` 对齐
## 先学(教程)
- 菜鸟教程 CSS(看"CSS 语法"和"CSS 选择器"):https://www.runoob.com/css/css-tutorial.html
- MDN·CSS 基础:https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics
- B站视频(黑马程序员,看讲"CSS 语法、标签/类/id 选择器、颜色字体"的几集,选看):https://www.bilibili.com/video/BV14J4114768/
## 任务(后做)
新建 `style.css` 和 `styled.html`,用**外部样式表**给 Day_1 的自我介绍页面加样式:
1. `<head>` 里用 `<link rel="stylesheet" href="style.css">` 引入
2. 标签选择器:给 `body` 设背景色、`h1` 设文字颜色
3. 类选择器:定义 `.highlight` 背景高亮,给某段文字加上
4. id 选择器:定义 `#title`,给标题设更大字号、居中
## 完成标准
- [ ] 外部样式表生效(改 style.css 页面就变)
- [ ] 标签/类/id 三种选择器都用到了
- [ ] 能说出 `.类名` 和 `#id` 的区别
**提交方式**:把 `styled.html` 和 `style.css` 代码贴在当日工单评论里。
## 参考解答(先做再看)
```html
<!-- styled.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>关于我</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="title">我叫张三</h1>
<p class="highlight">我是web部的新成员。</p>
<p>这是加过样式的页面。</p>
</body>
</html>
```
```css
/* style.css */
body {
background-color: #f0f0f0;
}
h1 {
color: #2c7be5;
}
#title {
font-size: 40px;
text-align: center;
}
.highlight {
background-color: yellow;
}
```
+65
View File
@@ -0,0 +1,65 @@
# Day_4 · CSS 盒模型:每个元素都是一个"盒子"
> 预计耗时:20~30 分钟
> 布局最核心的概念:每个元素都是个盒子,由内容、内边距、边框、外边距四层组成。
## 今日知识点
- 四层(由内到外):`content`(内容)→ `padding`(内边距)→ `border`(边框)→ `margin`(外边距)
- 常用:`margin`、`padding`、`border: 1px solid 颜色`、`border-radius`(圆角)
## 先学(教程)
- 菜鸟教程 CSS(看"CSS 盒子模型"):https://www.runoob.com/css/css-boxmodel.html
- MDN·盒模型:https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model
- B站视频(黑马程序员,看讲"盒子模型、padding/border/margin"的几集,选看):https://www.bilibili.com/video/BV14J4114768/
## 任务(后做)
新建 `box.html`:
1. 写两个 `div`(class 为 `box1`、`box2`),各放一句话
2. 给 `.box1` 设 `width: 200px`、`padding: 20px`、`border: 5px solid black`、`margin: 30px`
3. 用 F12 看看它的**总宽度**是多少(200 + 20×2 + 5×2 = 250)
4. 给 `.box2` 加 `border-radius: 10px` 圆角和背景色
## 完成标准
- [ ] 能说清楚 padding / border / margin 各自作用
- [ ] 能算出盒子总宽度 250
- [ ] 圆角效果正常
**提交方式**:把 `box.html` 代码 + 你算出的总宽度,贴在当日工单评论里。
## 参考解答(先做再看)
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
.box1 {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 30px;
background-color: lightblue;
}
.box2 {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 30px;
background-color: lightcoral;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="box1">盒子 1</div>
<div class="box2">盒子 2(圆角)</div>
</body>
</html>
```
+78
View File
@@ -0,0 +1,78 @@
# Day_5 · Flexbox:让元素乖乖排成一行
> 预计耗时:20~30 分钟
> 现在最常用的布局方式。今天学会用 flex 把几个元素排成一行、居中对齐。
## 今日知识点
- `display: flex` 开启弹性布局
- 主轴方向:`flex-direction: row`(横向,默认)/ `column`(纵向)
- 对齐:`justify-content`(center / space-between)、`align-items`(center)
- 间距:`gap`
## 先学(教程)
- 阮一峰·Flex 布局教程(图文并茂,重点看):https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
- 菜鸟教程 CSS 弹性盒子:https://www.runoob.com/css/css3-flexbox.html
- B站视频(黑马程序员,看讲"flex 布局、justify-content/align-items"的几集,选看):https://www.bilibili.com/video/BV14J4114768/
## 任务(后做)
新建 `flex.html`:
1. 一个 `display: flex` 容器,里面放 3 个彩色方块
2. 用 `justify-content: space-between` 让它们两端对齐、均匀分布
3. 用 `gap: 20px` 拉开间距
4. 再做一个容器,用 `justify-content: center` + `align-items: center` 让一个方块**水平垂直居中**
## 完成标准
- [ ] 3 个方块能排成一行并均匀分布
- [ ] 能做出水平垂直居中
- [ ] 能说出 justify-content 和 align-items 分别管什么
**提交方式**:把 `flex.html` 代码 + 效果截图,贴在当日工单评论里。
## 参考解答(先做再看)
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Flexbox</title>
<style>
.row {
display: flex;
justify-content: space-between;
gap: 20px;
background-color: #eee;
padding: 10px;
}
.box {
background-color: steelblue;
color: white;
padding: 20px;
}
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #ddd;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="row">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="center">
<div class="box">我居中了</div>
</div>
</body>
</html>
```
+68
View File
@@ -0,0 +1,68 @@
# Day_6 · 响应式基础 + 看懂一个 AI 页面(第一周小测)
> 预计耗时:25~30 分钟
> 手机屏幕窄、电脑宽,页面要"自适应"。今天学媒体查询,然后**不手写**,试着看懂一段 AI 生成的页面。
## 今日知识点
- 媒体查询:`@media (min-width: 768px) { ... }` —— 屏幕 ≥768px(桌面)时套用;`max-width` 则是"≤768px(手机)时套用"
- viewport:`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
- 第一周目标:**不要求独立手写,能看懂 AI 生成的 HTML/CSS 即可**
## 先学(教程)
- 菜鸟教程 CSS 响应式:https://www.runoob.com/css/css-rwd-viewport.html
- MDN·响应式设计入门:https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design
- B站视频(黑马程序员,看讲"视口、媒体查询、响应式"的几集,选看):https://www.bilibili.com/video/BV14J4114768/
## 任务(后做)
1. 给一个容器加 `viewport` meta,卡片默认一列,`@media (min-width: 768px)` 时排成一行(参考解答可看,今天看懂为主)
2. **重点任务**:用 AI 生成一个"个人主页"页面(HTML+CSS),然后**逐块说出**它是怎么实现的:
- 导航栏是怎么两端对齐的?
- 卡片区是用什么布局排成一行的?
- 哪个选择器、哪些属性在起作用?
把你说出来的理解写在工单评论里(不用你写代码,能讲明白就行)
## 完成标准
- [ ] 加了 viewport,媒体查询能切换布局
- [ ] 能说清楚 AI 页面里至少 3 处用到的 CSS 知识点
**提交方式**:把响应式页面的截图 + 你对 AI 页面的**文字理解**(50 字以上),贴在当日工单评论里。
## 参考解答(先做再看)
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式</title>
<style>
.cards {
display: flex;
flex-direction: column; /* 手机:一列 */
gap: 20px;
}
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
}
@media (min-width: 768px) { /* 桌面:一行 */
.cards { flex-direction: row; }
.card { flex: 1; }
}
</style>
</head>
<body>
<div class="cards">
<div class="card">卡片 1</div>
<div class="card">卡片 2</div>
<div class="card">卡片 3</div>
</div>
</body>
</html>
```
+57
View File
@@ -0,0 +1,57 @@
# Day_7 · JavaScript 入门:变量与数据类型
> 预计耗时:20~30 分钟
> 进入第二周。JavaScript(JS)是网页的"大脑",负责交互。今天先学会在浏览器里运行 JS,认识变量和数据类型。
## 今日知识点
- 在浏览器里运行 JS:打开任意网页 → F12 → 控制台(Console),直接输入代码回车
- 变量:`let` 声明变量、`const` 声明常量
- 数据类型:`string`(字符串)、`number`(数字)、`boolean`(true/false)
- 输出:`console.log(...)`
## 先学(教程)
- 菜鸟教程 JS(看"JS 简介""JS 输出""JS 变量"):https://www.runoob.com/js/js-tutorial.html
- MDN·JS 第一步:https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps
- B站视频(黑马程序员,看讲"变量、常量、数据类型"的几集,选看):https://www.bilibili.com/video/BV1Y84y1L7Nn/
## 任务(后做)
打开浏览器 F12 控制台,逐行输入并回车:
1. `let name = "张三";` 回车,再输入 `console.log(name);`
2. `let age = 18;` 再 `console.log(age);`
3. `const PI = 3.14;` 再 `console.log(PI);`
4. `let isStudent = true;` 再 `console.log(isStudent);`
5. 试试 `typeof name` 和 `typeof age`,看看它们是什么类型
> 每次重新打开控制台,之前定义的变量会清空。
> 注意:`let` 不能重复声明同名变量,若报 `has already been declared`,刷新控制台再继续。
## 完成标准
- [ ] 能在控制台输出字符串、数字、布尔值
- [ ] 会用 `typeof` 查看类型
- [ ] 能说出 `let` 和 `const` 的区别(const 不能重新赋值)
**提交方式**:把控制台的**截图**(能看到你输入的代码和输出)贴在当日工单评论里。
## 参考解答(先做再看)
```javascript
let name = "张三";
console.log(name); // 张三
let age = 18;
console.log(age); // 18
const PI = 3.14;
console.log(PI); // 3.14
let isStudent = true;
console.log(isStudent); // true
typeof name; // "string"
typeof age; // "number"
```
+44
View File
@@ -0,0 +1,44 @@
# Day_8 · 数据类型转换与运算符
> 预计耗时:20~30 分钟
> 用户输入到网页里的都是字符串,要做计算得先"转换类型"。今天学转换和算术运算。
## 今日知识点
- 字符串 → 数字:`Number("18")`;数字 → 字符串:`String(18)`
- 算术:`+` `-` `*` `/` `%`(取余)
- 注意:`+` 用在字符串上是**拼接**,不是相加
## 先学(教程)
- 菜鸟教程 JS(看"JS 运算符"和"JS 类型转换"):https://www.runoob.com/js/js-operators.html
- MDN·数字与字符串:https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Math
- B站视频(黑马程序员,看讲"类型转换、运算符"的几集,选看):https://www.bilibili.com/video/BV1Y84y1L7Nn/
## 任务(后做)
在控制台里逐行运行并**先猜结果,再对答案**:
1. `"1" + "2"` 结果是?
2. `1 + 2` 结果是?
3. `Number("18") + 1` 结果是?
4. `"18" + 1` 结果是?(字符串拼接)
5. `10 % 3` 结果是?
## 完成标准
- [ ] 能说出 `"1" + "2"` 为什么是 `"12"` 而不是 `3`
- [ ] 会用 `Number()` 把字符串转数字
- [ ] 理解 `%` 取余
**提交方式**:把控制台截图(含你的输入和输出)贴在当日工单评论里。
## 参考解答(先做再看)
```javascript
"1" + "2" // "12" —— 字符串拼接
1 + 2 // 3 —— 数字相加
Number("18") + 1 // 19 —— 转成数字再相加
"18" + 1 // "181" —— 数字被转成字符串拼接
10 % 3 // 1 —— 10 除以 3 余 1
```
+63
View File
@@ -0,0 +1,63 @@
# Day_9 · 条件判断 if/else
> 预计耗时:20~30 分钟
> 让程序"会判断":满足条件做一件事,否则做另一件事。
## 今日知识点
- `if (条件) { ... }` 满足才执行
- `else { ... }` 不满足时执行
- `else if` 多个分支
- 比较:`>` `<` `>=` `<=` `===`(等于)`!==`(不等于)
## 先学(教程)
- 菜鸟教程 JS(看"JS 条件语句"):https://www.runoob.com/js/js-if-else.html
- MDN·条件判断:https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals
- B站视频(黑马程序员,看讲"if/else 条件判断"的几集,选看):https://www.bilibili.com/video/BV1Y84y1L7Nn/
## 任务(后做)
> 从今天起,我们改用"写 `.js` 文件 + `node 文件名.js`"的方式运行代码(比控制台更正规,代码能保存、复用)。
新建 `day9.js`,用 VS Code 写,然后在终端里 `node day9.js` 运行(Day_0 已装好 Node):
1. 判断成年:
```javascript
let age = 18;
if (age >= 18) {
console.log("成年");
} else {
console.log("未成年");
}
```
2. 分数评级:≥90 输出"优秀"、≥60 输出"及格"、否则"不及格"(用 `else if`)
3. 把 `age` 改成 15,再运行一遍,观察输出变化
## 完成标准
- [ ] 能写出 if/else 判断成年
- [ ] 能写出多分支分数评级
- [ ] 知道 `===` 和 `=` 的区别(一个是比较,一个是赋值)
**提交方式**:把 `day9.js` 代码 + 运行结果截图,贴在当日工单评论里。
## 参考解答(先做再看)
```javascript
let age = 18;
if (age >= 18) {
console.log("成年");
} else {
console.log("未成年");
}
let score = 75;
if (score >= 90) {
console.log("优秀");
} else if (score >= 60) {
console.log("及格");
} else {
console.log("不及格");
}
```
+48
View File
@@ -0,0 +1,48 @@
# DailyChallenge_WebFrontend
web部2026纳新每日一题(前两周:HTML / CSS / JavaScript)
请克隆仓库以获取每日一题
## 学习方式
每天一个文件夹(Day_0 ~ Day_13),**先看教程再动手做**,每天控制在 **30 分钟以内**:
1. 打开当天文件夹的 `README.md`
2. 先点开"先学(教程)"里的链接学习(文字教程为主,B站视频选看、卡住再点开)
3. 再做"任务",卡住才看"参考解答"
4. 把运行结果(截图或代码)贴在**当日工单**的评论里
## 提交方式
请在该工单下方"撰写"处提交你的文件然后点击"评论",如果显示"登录 并参与到对话中"就请点击"登录"并注册你的账户
## 课程安排(前两周)
| 目录 | 内容 | 前置要求 |
| --- | --- | --- |
| Day_0 | 环境配置:VS Code + 终端 + 浏览器 | 无 |
| Day_1 | HTML 文档结构与常用标签 | 完成 Day_0 |
| Day_2 | HTML 表单与输入控件 | 承接 Day_1 |
| Day_3 | CSS 选择器与颜色字体 | 承接 Day_2 |
| Day_4 | CSS 盒模型 | 承接 Day_3 |
| Day_5 | Flexbox 布局 | 承接 Day_4 |
| Day_6 | 响应式基础 + 看懂一个 AI 页面(第一周小测) | 承接 Day_5 |
| Day_7 | JS 入门:变量与数据类型 | 承接 Day_6 |
| Day_8 | 数据类型转换与运算符 | 承接 Day_7 |
| Day_9 | 条件判断 if/else | 承接 Day_8 |
| Day_10 | 循环 for/while | 承接 Day_9 |
| Day_11 | 函数 | 承接 Day_10 |
| Day_12 | 数组方法 push/filter/map/forEach | 承接 Day_11 |
| Day_13 | 对象 Object 与 JSON(第二周小测) | 承接 Day_12 |
每个目录包含:当日题目(`README.md`,含教程链接、任务、参考解答)。
> 定位目标:前两周**不要求独立手写**,能**看懂 AI 生成的 HTML/CSS/JS 代码**就算达成。
> 难度递进:环境 → HTML → CSS → 布局 → JavaScript 基础
## 环境准备(Day_0 会详细讲)
- 编辑器:VS Code(https://code.visualstudio.com/)
- 浏览器:Chrome / Edge(自带的 F12 开发者工具是前端调试利器)
- 运行环境:Node.js(https://nodejs.org/ ,第二周 JS 需要用 `node` 命令运行脚本)