# 国庆任务 · 题目

> 选择、填空题**必做**；写页面题是**拔高题**，建议都看一看。
> 提交方式见 [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
（打不开也没关系，按下面的结构要求做即可。）

参考效果图（照着它来做，样式可自行发挥）：

![参考效果图](参考图/示例效果.png)

原版参考（《法治日报》该版整版截图，可对照）：

![原版参考](参考图/Page05-450.jpg)

**主题自拟**（校园新闻、科技新闻、你感兴趣的任何题材都行）。

### 结构要求（含知识点提示）

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 分钟。负责人表示："我们不要求大家一下子学会，只希望每天进步一点点。"

据悉，系列活动将持续整个学期，欢迎感兴趣的同学加入。
```