404 lines
16 KiB
HTML
404 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>一、选择题（12 题，每题只有一个正确答案）</title>
|
||
<style>
|
||
/* From extension vscode.github */
|
||
/*---------------------------------------------------------------------------------------------
|
||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||
*--------------------------------------------------------------------------------------------*/
|
||
|
||
.vscode-dark img[src$=\#gh-light-mode-only],
|
||
.vscode-light img[src$=\#gh-dark-mode-only],
|
||
.vscode-high-contrast:not(.vscode-high-contrast-light) img[src$=\#gh-light-mode-only],
|
||
.vscode-high-contrast-light img[src$=\#gh-dark-mode-only] {
|
||
display: none;
|
||
}
|
||
|
||
</style>
|
||
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
</style>
|
||
<style>
|
||
.task-list-item {
|
||
list-style-type: none;
|
||
}
|
||
|
||
.task-list-item-checkbox {
|
||
margin-left: -20px;
|
||
vertical-align: middle;
|
||
pointer-events: none;
|
||
}
|
||
</style>
|
||
<style>
|
||
:root {
|
||
--color-note: #0969da;
|
||
--color-tip: #1a7f37;
|
||
--color-warning: #9a6700;
|
||
--color-severe: #bc4c00;
|
||
--color-caution: #d1242f;
|
||
--color-important: #8250df;
|
||
}
|
||
|
||
</style>
|
||
<style>
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--color-note: #2f81f7;
|
||
--color-tip: #3fb950;
|
||
--color-warning: #d29922;
|
||
--color-severe: #db6d28;
|
||
--color-caution: #f85149;
|
||
--color-important: #a371f7;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
<style>
|
||
.markdown-alert {
|
||
padding: 0.5rem 1rem;
|
||
margin-bottom: 16px;
|
||
color: inherit;
|
||
border-left: .25em solid #888;
|
||
}
|
||
|
||
.markdown-alert>:first-child {
|
||
margin-top: 0
|
||
}
|
||
|
||
.markdown-alert>:last-child {
|
||
margin-bottom: 0
|
||
}
|
||
|
||
.markdown-alert .markdown-alert-title {
|
||
display: flex;
|
||
font-weight: 500;
|
||
align-items: center;
|
||
line-height: 1
|
||
}
|
||
|
||
.markdown-alert .markdown-alert-title .octicon {
|
||
margin-right: 0.5rem;
|
||
display: inline-block;
|
||
overflow: visible !important;
|
||
vertical-align: text-bottom;
|
||
fill: currentColor;
|
||
}
|
||
|
||
.markdown-alert.markdown-alert-note {
|
||
border-left-color: var(--color-note);
|
||
}
|
||
|
||
.markdown-alert.markdown-alert-note .markdown-alert-title {
|
||
color: var(--color-note);
|
||
}
|
||
|
||
.markdown-alert.markdown-alert-important {
|
||
border-left-color: var(--color-important);
|
||
}
|
||
|
||
.markdown-alert.markdown-alert-important .markdown-alert-title {
|
||
color: var(--color-important);
|
||
}
|
||
|
||
.markdown-alert.markdown-alert-warning {
|
||
border-left-color: var(--color-warning);
|
||
}
|
||
|
||
.markdown-alert.markdown-alert-warning .markdown-alert-title {
|
||
color: var(--color-warning);
|
||
}
|
||
|
||
.markdown-alert.markdown-alert-tip {
|
||
border-left-color: var(--color-tip);
|
||
}
|
||
|
||
.markdown-alert.markdown-alert-tip .markdown-alert-title {
|
||
color: var(--color-tip);
|
||
}
|
||
|
||
.markdown-alert.markdown-alert-caution {
|
||
border-left-color: var(--color-caution);
|
||
}
|
||
|
||
.markdown-alert.markdown-alert-caution .markdown-alert-title {
|
||
color: var(--color-caution);
|
||
}
|
||
|
||
</style>
|
||
|
||
</head>
|
||
<body class="vscode-body vscode-light">
|
||
<span id="markdown-mermaid" aria-hidden="true" data-config="{"darkModeTheme":"vscode","lightModeTheme":"vscode","maxTextSize":50000,"clickDrag":"alt","showControls":"onHoverOrFocus","resizable":true,"maxHeight":""}"></span>
|
||
<h1 id="国庆任务--题目">国庆任务 · 题目</h1>
|
||
<blockquote>
|
||
<p>选择、填空题<strong>必做</strong>；写页面题是<strong>拔高题</strong>，建议都看一看。
|
||
提交方式见 <a href="./README.html">README.md</a>。</p>
|
||
</blockquote>
|
||
<hr>
|
||
<h2 id="一选择题12-题每题只有一个正确答案">一、选择题（12 题，每题只有一个正确答案）</h2>
|
||
<ol>
|
||
<li>
|
||
<p>一个网页文件里，用来告诉浏览器"这是 HTML5 标准文档"的第一行代码是？
|
||
A. <code><html></code>
|
||
B. <code><!DOCTYPE html></code>
|
||
C. <code><head></code>
|
||
D. <code><meta charset="UTF-8"></code></p>
|
||
</li>
|
||
<li>
|
||
<p>下面哪个标签用来显示一张图片？
|
||
A. <code><a></code>
|
||
B. <code><img></code>
|
||
C. <code><link></code>
|
||
D. <code><image></code></p>
|
||
</li>
|
||
<li>
|
||
<p>想让一个链接点击后在新标签页打开，<code><a></code> 标签要加哪个属性？
|
||
A. <code>href</code>
|
||
B. <code>src</code>
|
||
C. <code>target="_blank"</code>
|
||
D. <code>alt</code></p>
|
||
</li>
|
||
<li>
|
||
<p>表单里两个单选框（radio）要能"只能选一个"，必须保证它们的哪个属性相同？
|
||
A. <code>value</code>
|
||
B. <code>id</code>
|
||
C. <code>name</code>
|
||
D. <code>type</code></p>
|
||
</li>
|
||
<li>
|
||
<p>用 CSS 选中"所有 class 为 box 的元素"，写法是？
|
||
A. <code>#box</code>
|
||
B. <code>.box</code>
|
||
C. <code>box</code>
|
||
D. <code>*box</code></p>
|
||
</li>
|
||
<li>
|
||
<p>盒模型从内到外的顺序是？
|
||
A. margin → border → padding → content
|
||
B. content → padding → border → margin
|
||
C. content → margin → padding → border
|
||
D. padding → content → margin → border</p>
|
||
</li>
|
||
<li>
|
||
<p>一个 div 设置 <code>width: 200px; padding: 20px; border: 5px solid black;</code>（没有设置 <code>box-sizing: border-box</code>），它的实际总宽度是？
|
||
A. 200px
|
||
B. 230px
|
||
C. 250px
|
||
D. 240px</p>
|
||
</li>
|
||
<li>
|
||
<p>用 Flex 让子元素在<strong>主轴方向</strong>"两端对齐、均匀分布"，应该用？
|
||
A. <code>align-items: center</code>
|
||
B. <code>justify-content: space-between</code>
|
||
C. <code>justify-content: center</code>
|
||
D. <code>flex-direction: column</code></p>
|
||
</li>
|
||
<li>
|
||
<p>为了让页面在手机上正常自适应，通常要在 <code><head></code> 里加哪一行？
|
||
A. <code><meta charset="UTF-8"></code>
|
||
B. <code><meta name="viewport" content="width=device-width, initial-scale=1.0"></code>
|
||
C. <code><title>我的页面</title></code>
|
||
D. <code><link rel="stylesheet" href="style.css"></code></p>
|
||
</li>
|
||
<li>
|
||
<p>下面哪个关键字声明的变量"不能被重新赋值"？
|
||
A. <code>let</code>
|
||
B. <code>var</code>
|
||
C. <code>const</code>
|
||
D. <code>function</code></p>
|
||
</li>
|
||
<li>
|
||
<p>表达式 <code>"1" + 2</code> 的结果是？
|
||
A. <code>3</code>
|
||
B. <code>"12"</code>
|
||
C. <code>"3"</code>
|
||
D. 会报错</p>
|
||
</li>
|
||
<li>
|
||
<p>想把数组 <code>[1, 2, 3]</code> 里每个元素都乘以 2 并得到一个新数组，应该用哪个方法？
|
||
A. <code>forEach</code>
|
||
B. <code>filter</code>
|
||
C. <code>map</code>
|
||
D. <code>push</code></p>
|
||
</li>
|
||
</ol>
|
||
<hr>
|
||
<h2 id="二填空题8-题必做">二、填空题（8 题，必做）</h2>
|
||
<ol>
|
||
<li>
|
||
<p>补全下面的 HTML 文档骨架：</p>
|
||
<pre><code class="language-html"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">____</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"zh"</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"____"</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>我的页面<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">body</span>></span><span class="hljs-tag"></<span class="hljs-name">body</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
|
||
</code></pre>
|
||
</li>
|
||
<li>
|
||
<p>写出 CSS：让页面上<strong>所有</strong> <code>h1</code> 的文字颜色是红色、并且水平居中。</p>
|
||
<pre><code class="language-css"><span class="hljs-comment">/* 在这里写 */</span>
|
||
</code></pre>
|
||
</li>
|
||
<li>
|
||
<p>盒模型一共有四层，从内到外依次是：content（内容）→ ____（内边距）→ border（边框）→ ____（外边距）。</p>
|
||
</li>
|
||
<li>
|
||
<p>用 Flex 让容器里的子元素"水平垂直都居中"，补全容器样式：</p>
|
||
<pre><code class="language-css"><span class="hljs-selector-class">.box</span> {
|
||
<span class="hljs-attribute">display</span>: flex;
|
||
<span class="hljs-attribute">justify-content</span>: ____;
|
||
<span class="hljs-attribute">align-items</span>: ____;
|
||
}
|
||
</code></pre>
|
||
</li>
|
||
<li>
|
||
<p>补全变量声明（声明一个<strong>可以重新赋值</strong>的变量 age，值为 18）：</p>
|
||
<pre><code class="language-javascript">____ age = <span class="hljs-number">18</span>;
|
||
</code></pre>
|
||
</li>
|
||
<li>
|
||
<p>补全判断条件（当 age <strong>大于或等于</strong> 18 时，输出"成年"）：</p>
|
||
<pre><code class="language-javascript"><span class="hljs-keyword">if</span> (age ____ <span class="hljs-number">18</span>) {
|
||
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"成年"</span>);
|
||
}
|
||
</code></pre>
|
||
</li>
|
||
<li>
|
||
<p>补全函数，使它<strong>返回</strong> a 与 b 的和：</p>
|
||
<pre><code class="language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">add</span>(<span class="hljs-params">a, b</span>) {
|
||
____ a + b;
|
||
}
|
||
</code></pre>
|
||
</li>
|
||
<li>
|
||
<p>补全 JSON 转换（对象 ←→ 字符串）：</p>
|
||
<pre><code class="language-javascript"><span class="hljs-comment">// 把对象转成 JSON 字符串</span>
|
||
<span class="hljs-keyword">const</span> str = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">____</span>(obj);
|
||
<span class="hljs-comment">// 把 JSON 字符串转回对象</span>
|
||
<span class="hljs-keyword">const</span> back = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">____</span>(str);
|
||
</code></pre>
|
||
</li>
|
||
</ol>
|
||
<hr>
|
||
<h2 id="三写页面题拔高题">三、写页面题（拔高题）</h2>
|
||
<p><strong>题目</strong>：仿照《法治日报》电子报的一篇文章页，用 <strong>HTML + CSS</strong> 做一个"新闻阅读页"。</p>
|
||
<p>参考页面：<a href="http://epaper.legaldaily.com.cn/fzrb/content/20260920/Articel05002GN.htm">http://epaper.legaldaily.com.cn/fzrb/content/20260920/Articel05002GN.htm</a>
|
||
（打不开也没关系，按下面的结构要求做即可。）</p>
|
||
<p>参考效果图（照着它来做，样式可自行发挥）：</p>
|
||
<p><img src="参考图/示例效果.png" alt="参考效果图"></p>
|
||
<p>原版参考（《法治日报》该版整版截图，可对照）：</p>
|
||
<p><img src="参考图/Page05-450.jpg" alt="原版参考"></p>
|
||
<p><strong>主题自拟</strong>（校园新闻、科技新闻、你感兴趣的任何题材都行）。</p>
|
||
<h3 id="结构要求含知识点提示">结构要求（含知识点提示）</h3>
|
||
<ol>
|
||
<li><strong>顶部栏</strong>（左右分布）
|
||
<ul>
|
||
<li>左边：网站名 / logo 文字；右边：日期（或一个"搜索"）</li>
|
||
<li>💡 提示：用 Flex 做左右分布 <code>display: flex; justify-content: space-between;</code></li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>版面导航条</strong>
|
||
<ul>
|
||
<li>如"第 05 版 · 校园文化"，右边放"上一篇 / 下一篇 / 返回目录"三个链接</li>
|
||
<li>💡 提示：用 <code><a></code> 写链接；导航条本身用 <code>padding</code> 和 <code>background-color</code> 撑出条状</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>内容导航</strong>
|
||
<ul>
|
||
<li>竖排列出本页 3~4 篇文章的标题（可点击）</li>
|
||
<li>💡 提示：用列表标签 <code><ul></code> + <code><li></code>（见下方补充示例）</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>文章区</strong>
|
||
<ul>
|
||
<li>大标题：<code><h1></code></li>
|
||
<li>作者 / 来源行：形如"□ 本报记者 小 A"，字号小一点、颜色浅一点
|
||
<ul>
|
||
<li>💡 提示：用 <code><p></code>，配 <code>font-size</code> 和 <code>color</code></li>
|
||
</ul>
|
||
</li>
|
||
<li>正文：至少 3 段
|
||
<ul>
|
||
<li>💡 提示：用 <code><p></code>，加上首行缩进和行高（见下方补充示例）</li>
|
||
</ul>
|
||
</li>
|
||
<li>小标题：至少 2 个 <code><h2></code></li>
|
||
<li>图片：至少 1 张 <code><img src="..." alt="..."></code>（可用占位图，如 <code>https://via.placeholder.com/600x300</code>，也可以自由发挥）</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>底部版权栏</strong>
|
||
<ul>
|
||
<li>💡 提示：用 <code><div></code> / <code><p></code>，居中、浅色背景</li>
|
||
</ul>
|
||
</li>
|
||
</ol>
|
||
<h3 id="加分项">加分项</h3>
|
||
<ul>
|
||
<li><strong>响应式</strong>：窄屏（手机）时用 <code>@media</code> 调整布局（如顶部栏改成竖排）。</li>
|
||
<li><strong>排版</strong>：整页换成衬线字体，更像报纸（见下方补充示例）。</li>
|
||
</ul>
|
||
<h3 id="补充几个没学过但会用到的属性用法示例">补充：几个"没学过但会用到"的属性（用法示例）</h3>
|
||
<blockquote>
|
||
<p>下面这些前两周没讲，但做这个页面会用到。<strong>只给出最小用法示例</strong>，具体怎么放进你的页面，自己组合。</p>
|
||
</blockquote>
|
||
<pre><code class="language-html"><span class="hljs-comment"><!-- 列表 <ul> + <li>：做"内容导航"里竖排的文章标题 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>文章标题一<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>文章标题二<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||
</code></pre>
|
||
<pre><code class="language-css"><span class="hljs-comment">/* 字体 font-family：整页换成宋体/衬线，报纸感 */</span>
|
||
<span class="hljs-selector-tag">body</span> {
|
||
<span class="hljs-attribute">font-family</span>: <span class="hljs-string">"SimSun"</span>, serif;
|
||
}
|
||
|
||
<span class="hljs-comment">/* 行高 line-height：正文行与行之间留点空隙，更好读 */</span>
|
||
<span class="hljs-selector-tag">p</span> {
|
||
<span class="hljs-attribute">line-height</span>: <span class="hljs-number">1.8</span>;
|
||
}
|
||
|
||
<span class="hljs-comment">/* 首行缩进 text-indent：中文段落空两格（2em = 两个字的宽度） */</span>
|
||
<span class="hljs-selector-tag">p</span> {
|
||
<span class="hljs-attribute">text-indent</span>: <span class="hljs-number">2em</span>;
|
||
}
|
||
|
||
<span class="hljs-comment">/* 鼠标悬停 :hover：鼠标移到"上一篇/下一篇"链接上时变色 */</span>
|
||
<span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:hover</span> {
|
||
<span class="hljs-attribute">color</span>: red;
|
||
}
|
||
</code></pre>
|
||
<h3 id="素材文案可以自己找不强制要求用这个">素材文案（可以自己找，不强制要求用这个）</h3>
|
||
<blockquote>
|
||
<p>你可以直接用下面这段，也可以换成自己找的内容。</p>
|
||
</blockquote>
|
||
<pre><code class="language-text">标题：我校 web 部举办前端入门分享会
|
||
作者：□ 本报记者 小 A
|
||
|
||
近日，我校 web 部在大学生活动中心举办了一场前端入门分享会，吸引了近百名同学参加。活动旨在帮助零基础的同学了解网页开发，迈出前端学习的第一步。
|
||
|
||
【小标题】从"看得懂"开始
|
||
分享会上，部长先带大家认识了 HTML、CSS 和 JavaScript 三者的分工：HTML 搭骨架、CSS 穿衣服、JavaScript 管交互。随后，同学们动手写出了自己的第一个网页，并为页面加上了颜色和布局。
|
||
|
||
【小标题】两周，每天 30 分钟
|
||
为了让同学们能持续学习，部门还推出了"每日一题"，涵盖教程与练习，每天只需 20 到 30 分钟。负责人表示："我们不要求大家一下子学会，只希望每天进步一点点。"
|
||
|
||
据悉，系列活动将持续整个学期，欢迎感兴趣的同学加入。
|
||
</code></pre>
|
||
|
||
|
||
|
||
</body>
|
||
</html> |