上传文件至「/」
This commit is contained in:
@@ -0,0 +1,21 @@
|
||||
# 国庆任务 · 前端基础小测 + 仿报纸页面
|
||||
|
||||
> 国庆假期小练习，检验前两周（Day_0 ~ Day_13）学的 HTML / CSS / JS 基础。
|
||||
> **选择、填空题必做**；
|
||||
> **写页面题是拔高题**，建议都看一看思考一下，最好能动手写一点，不要求完美完成，最后评价会根据完成度完成。
|
||||
> 完成后**私发**（见下方"提交方式"），**不要**发到公开工单或群里，避免互相抄答案。
|
||||
|
||||
## 题目
|
||||
|
||||
👉 点这里看题目：[题目.md](./题目.md)
|
||||
|
||||
- 一、选择题 12 题（必做）
|
||||
- 二、填空题 8 题（必做）
|
||||
- 三、写页面题（选做 · 拔高题）
|
||||
|
||||
## 提交方式
|
||||
|
||||
- **私发，不要公开**：把答案打包成压缩包发送到`2121542413@qq.com`，**不要**发到公开工单或群里，避免被其他人看到、互相抄答案。
|
||||
- **打包命名**：选择题、填空题的答案写在 `答案.txt`，连同页面题的 `index.html`、`style.css`，一起打包成压缩包，命名为 `姓名-学号-国庆任务`（如 `张三-26010001001-国庆任务.zip`）。
|
||||
- **截止时间**：以群通知为准。
|
||||
- **抄袭处理**：若出现明显雷同的答案，涉及的双方均按未完成处理。
|
||||
@@ -0,0 +1,229 @@
|
||||
·# 国庆任务 · 题目
|
||||
|
||||
> 选择、填空题**必做**；写页面题是**拔高题**，建议都看一看。
|
||||
> 提交方式见 [README.md](./README.md)。
|
||||
|
||||
---
|
||||
|
||||
## 一、选择题（12 题，每题只有一个正确答案）
|
||||
|
||||
1. 一个网页文件里，用来告诉浏览器"这是 HTML5 标准文档"的第一行代码是？
|
||||
A. `<html>`
|
||||
B. `<!DOCTYPE html>`
|
||||
C. `<head>`
|
||||
D. `<meta charset="UTF-8">`
|
||||
|
||||
2. 下面哪个标签用来显示一张图片？
|
||||
A. `<a>`
|
||||
B. `<img>`
|
||||
C. `<link>`
|
||||
D. `<image>`
|
||||
|
||||
3. 想让一个链接点击后在新标签页打开，`<a>` 标签要加哪个属性？
|
||||
A. `href`
|
||||
B. `src`
|
||||
C. `target="_blank"`
|
||||
D. `alt`
|
||||
|
||||
4. 表单里两个单选框（radio）要能"只能选一个"，必须保证它们的哪个属性相同？
|
||||
A. `value`
|
||||
B. `id`
|
||||
C. `name`
|
||||
D. `type`
|
||||
|
||||
5. 用 CSS 选中"所有 class 为 box 的元素"，写法是？
|
||||
A. `#box`
|
||||
B. `.box`
|
||||
C. `box`
|
||||
D. `*box`
|
||||
|
||||
6. 盒模型从内到外的顺序是？
|
||||
A. margin → border → padding → content
|
||||
B. content → padding → border → margin
|
||||
C. content → margin → padding → border
|
||||
D. padding → content → margin → border
|
||||
|
||||
7. 一个 div 设置 `width: 200px; padding: 20px; border: 5px solid black;`（没有设置 `box-sizing: border-box`），它的实际总宽度是？
|
||||
A. 200px
|
||||
B. 230px
|
||||
C. 250px
|
||||
D. 240px
|
||||
|
||||
8. 用 Flex 让子元素在**主轴方向**"两端对齐、均匀分布"，应该用？
|
||||
A. `align-items: center`
|
||||
B. `justify-content: space-between`
|
||||
C. `justify-content: center`
|
||||
D. `flex-direction: column`
|
||||
|
||||
9. 为了让页面在手机上正常自适应，通常要在 `<head>` 里加哪一行？
|
||||
A. `<meta charset="UTF-8">`
|
||||
B. `<meta name="viewport" content="width=device-width, initial-scale=1.0">`
|
||||
C. `<title>我的页面</title>`
|
||||
D. `<link rel="stylesheet" href="style.css">`
|
||||
|
||||
10. 下面哪个关键字声明的变量"不能被重新赋值"？
|
||||
A. `let`
|
||||
B. `var`
|
||||
C. `const`
|
||||
D. `function`
|
||||
|
||||
11. 表达式 `"1" + 2` 的结果是？
|
||||
A. `3`
|
||||
B. `"12"`
|
||||
C. `"3"`
|
||||
D. 会报错
|
||||
|
||||
12. 想把数组 `[1, 2, 3]` 里每个元素都乘以 2 并得到一个新数组，应该用哪个方法？
|
||||
A. `forEach`
|
||||
B. `filter`
|
||||
C. `map`
|
||||
D. `push`
|
||||
|
||||
---
|
||||
|
||||
## 二、填空题（8 题，必做）
|
||||
|
||||
1. 补全下面的 HTML 文档骨架：
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<____ lang="zh">
|
||||
<head>
|
||||
<meta charset="____">
|
||||
<title>我的页面</title>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
2. 写出 CSS：让页面上**所有** `h1` 的文字颜色是红色、并且水平居中。
|
||||
```css
|
||||
/* 在这里写 */
|
||||
```
|
||||
|
||||
3. 盒模型一共有四层，从内到外依次是：content（内容）→ ____（内边距）→ border（边框）→ ____（外边距）。
|
||||
|
||||
4. 用 Flex 让容器里的子元素"水平垂直都居中"，补全容器样式：
|
||||
```css
|
||||
.box {
|
||||
display: flex;
|
||||
justify-content: ____;
|
||||
align-items: ____;
|
||||
}
|
||||
```
|
||||
|
||||
5. 补全变量声明（声明一个**可以重新赋值**的变量 age，值为 18）：
|
||||
```javascript
|
||||
____ age = 18;
|
||||
```
|
||||
|
||||
6. 补全判断条件（当 age **大于或等于** 18 时，输出"成年"）：
|
||||
```javascript
|
||||
if (age ____ 18) {
|
||||
console.log("成年");
|
||||
}
|
||||
```
|
||||
|
||||
7. 补全函数，使它**返回** a 与 b 的和：
|
||||
```javascript
|
||||
function add(a, b) {
|
||||
____ a + b;
|
||||
}
|
||||
```
|
||||
|
||||
8. 补全 JSON 转换（对象 ←→ 字符串）：
|
||||
```javascript
|
||||
// 把对象转成 JSON 字符串
|
||||
const str = JSON.____(obj);
|
||||
// 把 JSON 字符串转回对象
|
||||
const back = JSON.____(str);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 三、写页面题（拔高题）
|
||||
|
||||
**题目**：仿照《法治日报》电子报的一篇文章页，用 **HTML + CSS** 做一个"新闻阅读页"。
|
||||
|
||||
参考页面：http://epaper.legaldaily.com.cn/fzrb/content/20260920/Articel05002GN.htm
|
||||
（打不开也没关系，按下面的结构要求做即可。）
|
||||
|
||||
**主题自拟**（校园新闻、科技新闻、你感兴趣的任何题材都行）。
|
||||
|
||||
### 结构要求（含知识点提示）
|
||||
|
||||
1. **顶部栏**（左右分布）
|
||||
- 左边：网站名 / logo 文字；右边：日期（或一个"搜索"）
|
||||
- 💡 提示：用 Flex 做左右分布 `display: flex; justify-content: space-between;`
|
||||
2. **版面导航条**
|
||||
- 如"第 05 版 · 校园文化"，右边放"上一篇 / 下一篇 / 返回目录"三个链接
|
||||
- 💡 提示：用 `<a>` 写链接；导航条本身用 `padding` 和 `background-color` 撑出条状
|
||||
3. **内容导航**
|
||||
- 竖排列出本页 3~4 篇文章的标题（可点击）
|
||||
- 💡 提示：用列表标签 `<ul>` + `<li>`（见下方补充示例）
|
||||
4. **文章区**
|
||||
- 大标题：`<h1>`
|
||||
- 作者 / 来源行：形如"□ 本报记者 小 A"，字号小一点、颜色浅一点
|
||||
- 💡 提示：用 `<p>`，配 `font-size` 和 `color`
|
||||
- 正文：至少 3 段
|
||||
- 💡 提示：用 `<p>`，加上首行缩进和行高（见下方补充示例）
|
||||
- 小标题：至少 2 个 `<h2>`
|
||||
- 图片：至少 1 张 `<img src="..." alt="...">`（可用占位图，如 `https://via.placeholder.com/600x300`，也可以自由发挥）
|
||||
5. **底部版权栏**
|
||||
- 💡 提示：用 `<div>` / `<p>`，居中、浅色背景
|
||||
|
||||
### 加分项
|
||||
- **响应式**：窄屏（手机）时用 `@media` 调整布局（如顶部栏改成竖排）。
|
||||
- **排版**：整页换成衬线字体，更像报纸（见下方补充示例）。
|
||||
|
||||
### 补充：几个"没学过但会用到"的属性（用法示例）
|
||||
|
||||
> 下面这些前两周没讲，但做这个页面会用到。**只给出最小用法示例**，具体怎么放进你的页面，自己组合。
|
||||
|
||||
```html
|
||||
<!-- 列表 <ul> + <li>：做"内容导航"里竖排的文章标题 -->
|
||||
<ul>
|
||||
<li>文章标题一</li>
|
||||
<li>文章标题二</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
```css
|
||||
/* 字体 font-family：整页换成宋体/衬线，报纸感 */
|
||||
body {
|
||||
font-family: "SimSun", serif;
|
||||
}
|
||||
|
||||
/* 行高 line-height：正文行与行之间留点空隙，更好读 */
|
||||
p {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* 首行缩进 text-indent：中文段落空两格（2em = 两个字的宽度） */
|
||||
p {
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
/* 鼠标悬停 :hover：鼠标移到"上一篇/下一篇"链接上时变色 */
|
||||
a:hover {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
### 素材文案（可以自己找，不强制要求用这个）
|
||||
|
||||
> 你可以直接用下面这段，也可以换成自己找的内容。
|
||||
|
||||
```text
|
||||
标题：我校 web 部举办前端入门分享会
|
||||
作者：□ 本报记者 小 A
|
||||
|
||||
近日，我校 web 部在大学生活动中心举办了一场前端入门分享会，吸引了近百名同学参加。活动旨在帮助零基础的同学了解网页开发，迈出前端学习的第一步。
|
||||
|
||||
【小标题】从"看得懂"开始
|
||||
分享会上，部长先带大家认识了 HTML、CSS 和 JavaScript 三者的分工：HTML 搭骨架、CSS 穿衣服、JavaScript 管交互。随后，同学们动手写出了自己的第一个网页，并为页面加上了颜色和布局。
|
||||
|
||||
【小标题】两周，每天 30 分钟
|
||||
为了让同学们能持续学习，部门还推出了"每日一题"，涵盖教程与练习，每天只需 20 到 30 分钟。负责人表示："我们不要求大家一下子学会，只希望每天进步一点点。"
|
||||
|
||||
据悉，系列活动将持续整个学期，欢迎感兴趣的同学加入。
|
||||
```
|
||||
Reference in New Issue
Block a user