diff --git a/README.md b/README.md index 3735fb6..844ddad 100644 --- a/README.md +++ b/README.md @@ -9,9 +9,9 @@ 👉 点这里看题目：[题目.md](./题目.md) -- 一、选择题 12 题 -- 二、填空题 8 题 -- 三、写页面题（拔高题） +- 一、选择题 12 题（必做） +- 二、填空题 8 题（必做） +- 三、写页面题（选做 · 拔高题） ## 提交方式 diff --git a/参考图/05_05_2940.jpg b/参考图/05_05_2940.jpg new file mode 100644 index 0000000..4b40690 Binary files /dev/null and b/参考图/05_05_2940.jpg differ diff --git a/参考图/05_05_2941.jpg b/参考图/05_05_2941.jpg new file mode 100644 index 0000000..10b5b90 Binary files /dev/null and b/参考图/05_05_2941.jpg differ diff --git a/参考图/05_05_2942.jpg b/参考图/05_05_2942.jpg new file mode 100644 index 0000000..28a6f4a Binary files /dev/null and b/参考图/05_05_2942.jpg differ diff --git a/参考图/Page05-450.jpg b/参考图/Page05-450.jpg new file mode 100644 index 0000000..eccae92 Binary files /dev/null and b/参考图/Page05-450.jpg differ diff --git a/参考图/示例效果.png b/参考图/示例效果.png new file mode 100644 index 0000000..ef9bd46 Binary files /dev/null and b/参考图/示例效果.png differ diff --git a/题目.html b/题目.html new file mode 100644 index 0000000..e14374c --- /dev/null +++ b/题目.html @@ -0,0 +1,404 @@ + + + + + 一、选择题（12 题，每题只有一个正确答案） + + + + + + + + + + + + + +

国庆任务 · 题目

+
+

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

+
+
+

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

+
    +
  1. +

    一个网页文件里，用来告诉浏览器"这是 HTML5 标准文档"的第一行代码是？ +A. <html> +B. <!DOCTYPE html> +C. <head> +D. <meta charset="UTF-8">

    +
    2. +
  2. +

    下面哪个标签用来显示一张图片？ +A. <a> +B. <img> +C. <link> +D. <image>

    +
    3. +
  3. +

    想让一个链接点击后在新标签页打开，<a> 标签要加哪个属性？ +A. href +B. src +C. target="_blank" +D. alt

    +
    4. +
  4. +

    表单里两个单选框（radio）要能"只能选一个"，必须保证它们的哪个属性相同？ +A. value +B. id +C. name +D. type

    +
    5. +
  5. +

    用 CSS 选中"所有 class 为 box 的元素"，写法是？ +A. #box +B. .box +C. box +D. *box

    +
    6. +
  6. +

    盒模型从内到外的顺序是？ +A. margin → border → padding → content +B. content → padding → border → margin +C. content → margin → padding → border +D. padding → content → margin → border

    +
    7. +
  7. +

    一个 div 设置 width: 200px; padding: 20px; border: 5px solid black;（没有设置 box-sizing: border-box），它的实际总宽度是？ +A. 200px +B. 230px +C. 250px +D. 240px

    +
    8. +
  8. +

    用 Flex 让子元素在主轴方向"两端对齐、均匀分布"，应该用？ +A. align-items: center +B. justify-content: space-between +C. justify-content: center +D. flex-direction: column

    +
    9. +
  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. +
  10. +

    下面哪个关键字声明的变量"不能被重新赋值"？ +A. let +B. var +C. const +D. function

    +
    11. +
  11. +

    表达式 "1" + 2 的结果是？ +A. 3 +B. "12" +C. "3" +D. 会报错

    +
    12. +
  12. +

    想把数组 [1, 2, 3] 里每个元素都乘以 2 并得到一个新数组，应该用哪个方法？ +A. forEach +B. filter +C. map +D. push

    +
    13. +
+
+

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

+
    +
  1. +

    补全下面的 HTML 文档骨架：

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

    写出 CSS：让页面上所有 h1 的文字颜色是红色、并且水平居中。

    +
    /* 在这里写 */
+
    +
    3. +
  3. +

    盒模型一共有四层，从内到外依次是：content（内容）→ ____（内边距）→ border（边框）→ ____（外边距）。

    +
    4. +
  4. +

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

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

    补全变量声明（声明一个可以重新赋值的变量 age，值为 18）：

    +
    ____ age = 18;
+
    +
    6. +
  6. +

    补全判断条件（当 age 大于或等于 18 时，输出"成年"）：

    +
    if (age ____ 18) {
+  console.log("成年");
+}
+
    +
    7. +
  7. +

    补全函数，使它返回 a 与 b 的和：

    +
    function add(a, b) {
+  ____ a + b;
+}
+
    +
    8. +
  8. +

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

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

三、写页面题（拔高题）

+

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

+

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

+

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

+

参考效果图

+

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

+

原版参考

+

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

+

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

+
    +
  1. 顶部栏（左右分布） + +
    2. +
  2. 版面导航条 + +
    3. +
  3. 内容导航 + +
    4. +
  4. 文章区 + +
    5. +
  5. 底部版权栏 + +
    6. +
+

加分项

+ +

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

+
+

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

+
+
<!-- 列表 <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 分钟。负责人表示："我们不要求大家一下子学会，只希望每天进步一点点。"
+
+据悉，系列活动将持续整个学期，欢迎感兴趣的同学加入。
+
+ + + + + \ No newline at end of file diff --git a/题目.md b/题目.md index 6344fd9..d1293e8 100644 --- a/题目.md +++ b/题目.md @@ -1,4 +1,4 @@ -·# 国庆任务 · 题目 +# 国庆任务 · 题目 > 选择、填空题**必做**；写页面题是**拔高题**，建议都看一看。 > 提交方式见 [README.md](./README.md)。 @@ -147,6 +147,14 @@ 参考页面：http://epaper.legaldaily.com.cn/fzrb/content/20260920/Articel05002GN.htm （打不开也没关系，按下面的结构要求做即可。） +参考效果图（照着它来做，样式可自行发挥）： + +![参考效果图](参考图/示例效果.png) + +原版参考（《法治日报》该版整版截图，可对照）： + +![原版参考](参考图/Page05-450.jpg) + **主题自拟**（校园新闻、科技新闻、你感兴趣的任何题材都行）。 ### 结构要求（含知识点提示）