国庆任务 · 题目

选择、填空题必做；写页面题是拔高题，建议都看一看。提交方式见 README.md。

一、选择题（12 题，每题只有一个正确答案）

一个网页文件里，用来告诉浏览器"这是 HTML5 标准文档"的第一行代码是？ A. <html> B. <!DOCTYPE html> C. <head> D. <meta charset="UTF-8">
下面哪个标签用来显示一张图片？ A. <a> B. <img> C. <link> D. <image>
想让一个链接点击后在新标签页打开，<a> 标签要加哪个属性？ A. href B. src C. target="_blank" D. alt
表单里两个单选框（radio）要能"只能选一个"，必须保证它们的哪个属性相同？ A. value B. id C. name D. type
用 CSS 选中"所有 class 为 box 的元素"，写法是？ A. #box B. .box C. box D. *box
盒模型从内到外的顺序是？ A. margin → border → padding → content B. content → padding → border → margin C. content → margin → padding → border D. padding → content → margin → border
一个 div 设置 width: 200px; padding: 20px; border: 5px solid black;（没有设置 box-sizing: border-box），它的实际总宽度是？ A. 200px B. 230px C. 250px D. 240px
用 Flex 让子元素在主轴方向"两端对齐、均匀分布"，应该用？ A. align-items: center B. justify-content: space-between C. justify-content: center D. flex-direction: column
为了让页面在手机上正常自适应，通常要在 <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">
下面哪个关键字声明的变量"不能被重新赋值"？ A. let B. var C. const D. function
表达式 "1" + 2 的结果是？ A. 3 B. "12" C. "3" D. 会报错
想把数组 [1, 2, 3] 里每个元素都乘以 2 并得到一个新数组，应该用哪个方法？ A. forEach B. filter C. map D. push

二、填空题（8 题，必做）

补全下面的 HTML 文档骨架：

<!DOCTYPE html>
<____ lang="zh">
  <head>
    <meta charset="____">
    <title>我的页面</title>
  </head>
  <body></body>
</html>

写出 CSS：让页面上所有 h1 的文字颜色是红色、并且水平居中。
```
/* 在这里写 */
```
盒模型一共有四层，从内到外依次是：content（内容）→ ____（内边距）→ border（边框）→ ____（外边距）。

用 Flex 让容器里的子元素"水平垂直都居中"，补全容器样式：

.box {
  display: flex;
  justify-content: ____;
  align-items: ____;
}

补全变量声明（声明一个可以重新赋值的变量 age，值为 18）：
```
____ age = 18;
```
补全判断条件（当 age 大于或等于 18 时，输出"成年"）：
```
if (age ____ 18) {
  console.log("成年");
}
```
补全函数，使它返回 a 与 b 的和：
```
function add(a, b) {
  ____ a + b;
}
```

补全 JSON 转换（对象 ←→ 字符串）：

// 把对象转成 JSON 字符串
const str = JSON.____(obj);
// 把 JSON 字符串转回对象
const back = JSON.____(str);

三、写页面题（拔高题）

题目：仿照《法治日报》电子报的一篇文章页，用 HTML + CSS 做一个"新闻阅读页"。

参考页面：http://epaper.legaldaily.com.cn/fzrb/content/20260920/Articel05002GN.htm （打不开也没关系，按下面的结构要求做即可。）

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

参考效果图

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

原版参考

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

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

顶部栏（左右分布）
- 左边：网站名 / logo 文字；右边：日期（或一个"搜索"）
- 💡 提示：用 Flex 做左右分布 display: flex; justify-content: space-between;
版面导航条
- 如"第 05 版 · 校园文化"，右边放"上一篇 / 下一篇 / 返回目录"三个链接
- 💡 提示：用 <a> 写链接；导航条本身用 padding 和 background-color 撑出条状
内容导航
- 竖排列出本页 3~4 篇文章的标题（可点击）
- 💡 提示：用列表标签 <ul> + <li>（见下方补充示例）
文章区
- 大标题：<h1>
- 作者 / 来源行：形如"□ 本报记者小 A"，字号小一点、颜色浅一点
  - 💡 提示：用 <p>，配 font-size 和 color
- 正文：至少 3 段
  - 💡 提示：用 <p>，加上首行缩进和行高（见下方补充示例）
- 小标题：至少 2 个 <h2>
- 图片：至少 1 张 <img src="..." alt="...">（可用占位图，如 https://via.placeholder.com/600x300，也可以自由发挥）
底部版权栏
- 💡 提示：用 <div> / <p>，居中、浅色背景

加分项

响应式：窄屏（手机）时用 @media 调整布局（如顶部栏改成竖排）。
排版：整页换成衬线字体，更像报纸（见下方补充示例）。

补充：几个"没学过但会用到"的属性（用法示例）

下面这些前两周没讲，但做这个页面会用到。只给出最小用法示例，具体怎么放进你的页面，自己组合。

<!-- 列表 <ul> + <li>：做"内容导航"里竖排的文章标题 -->
<ul>
  <li>文章标题一</li>
  <li>文章标题二</li>
</ul>

/* 字体 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;
}

素材文案（可以自己找，不强制要求用这个）

你可以直接用下面这段，也可以换成自己找的内容。

标题：我校 web 部举办前端入门分享会
作者：□ 本报记者 小 A

近日，我校 web 部在大学生活动中心举办了一场前端入门分享会，吸引了近百名同学参加。活动旨在帮助零基础的同学了解网页开发，迈出前端学习的第一步。

【小标题】从"看得懂"开始
分享会上，部长先带大家认识了 HTML、CSS 和 JavaScript 三者的分工：HTML 搭骨架、CSS 穿衣服、JavaScript 管交互。随后，同学们动手写出了自己的第一个网页，并为页面加上了颜色和布局。

【小标题】两周，每天 30 分钟
为了让同学们能持续学习，部门还推出了"每日一题"，涵盖教程与练习，每天只需 20 到 30 分钟。负责人表示："我们不要求大家一下子学会，只希望每天进步一点点。"

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