【期末考试】前端开发技术复习题库HTML+CSS+JAVASCRIPT

第一套自测题库

选择题

1．对于下面代码解读不正确的是（         ）。
<img src=”pic.png” alt=”我的头像” title=”my head” width=”50px”>
A．该图片在网页中显示的宽度是50像素，高度按比例放大或缩小。
B．图片的路径是“img.png”。
C．鼠标悬停在图片上时，鼠标附近会显示图片信息“我的头像”
D．当图片无法正常显示时，图片位置会显示内容“我的头像”

2．下面是正确使用ID选择器的是（         ）。
A．ID a             B．id a                 C．#a              D．.a

3．如果要添加音频工具栏，则应该通过什么属性（         ）。
A．loop           B．controls            C．autoplay          D．width

4．关于下列代码片段分析正确的是（         ）。
<form name="form" action="register.html" method="post">
...   
</form>
A．表单的名称是form                           B．表单的数据提交的位置是post 
C．表单提交的数据将会出现在地址栏中            D．来访者输入的数据会附加在URL之后

5．跨行合并表格的HTML代码为（        ）。
A．<tr colspan=”3”>       B．<tr rospan=”3”>     C．<td colspan=”3”>       D．<td rowspan=”3”>

6．下列标签中是行内元素的是（         ）。
A．<img>    B．<p>    C．<a>    D．<dl>

7．下面属于循环控制控制语句的是（         ）。
A．if语句         B．if…elseif语句        C．for语句        D．if…else语句

8．关于鼠标事件，下列说法正确的是（         ）。
A．onclick用于单击鼠标时触发某事件
B．onmouseup用于鼠标按下时触发某事件
C．onmousemove用于鼠标移动时触发某事件
D．A、B、C都对

9．响应式网页设计的技术原理有（         ）。
A．使用<meta>标签    B．媒体查询                C．第三方框架         D．A、B、C都对

10．下列选项中对代码功能描述正确的是（         ）。
<picture>
  <source srcset="1.jpg" media="(max-width: 640px)" />
  <img src="2.jpg">
</picture>
A．当浏览器屏幕宽度大于640像素时，浏览器中显示图片1.png。
B．当图片1.png在网页中不能正常显示时，显示图片2.jpg。
C．当浏览器屏幕宽度小于640像素时，浏览器中显示1.png。
D．当图片2.png在网页中正常显示时，浏览器中显示图片1.png。

填空题

1．<p>标签的作用是___________。
2．<video>添加视频后，设置视频播放器大小的属性是___________。
3．常见的列表有___________、___________和___________。
4．___________循环语句也称为计次循环语句，一般用于循环次数已知的情况，在JavaScript中应用比较广泛。
5．常见的布局类型有___________、___________、___________。

论述题

论述题1：

问题：

请说明 <div> 和 <span> 标签的作用及区别，并举例说明它们在实际开发中的用途。

参考答案要点：

<div> 标签：
块级元素，用于包裹其他元素或布局。
示例：页面分区。

<span> 标签：
行内元素，用于包裹文本或小范围样式。
示例：高亮显示部分文字。

区别：
<div> 是块级，<span> 是行内，布局方式不同。

论述题2：
问题：

请列举 CSS 的三种引入方式（内联样式、内部样式表、外部样式表），并说明各自的优缺点及适用场景。

参考答案要点：

内联样式：
优点：快速测试。
缺点：无法复用。
适用场景：临时调试或单元素样式。

内部样式表：
优点：单页面复用。
缺点：无法跨页面复用。
适用场景：小型页面或单页应用。

外部样式表：
优点：分离结构与样式。
缺点：需要额外 HTTP 请求。
适用场景：多页面项目或团队协作。

程序阅读题

题目1：CSS 样式叠加
HTML：

<div class="box">文本</div>

CSS：
css

.box {
  color: red;
  font-size: 16px;
}
.box {
  color: blue;
  font-weight: bold;
}

问题：最终文本的颜色和字体粗细是什么？

答案：

颜色：blue（后定义的样式覆盖前一个）
字体粗细：bold（仅第二个样式定义了此属性）

题目2：JavaScript 变量作用域
JavaScript：

let x = 10;
function test() {
  let x = 20;
  console.log(x); // 输出什么？
}
test();
console.log(x); // 输出什么？

问题：两次 console.log 的输出结果是什么？
答案：
第一次：20
第二次：10

程序编程题

综合编程题1：点击按钮改变背景色

要求：

创建一个 HTML 页面，包含一个按钮（<button>）和一个段落（<p>）。
初始状态下，段落显示“点击按钮改变背景色！”。
用 JavaScript 实现：点击按钮时，将页面背景色改为随机颜色（如红色、蓝色、绿色等）。

参考答案：

 <p>点击按钮改变背景色！</p>
    <button onclick="changeColor()">点击我</button>

    <script>
        function changeColor() {
            // 随机生成颜色（从预定义列表中选择）
            const colors = ["red", "blue", "green", "yellow", "pink"];
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            document.body.style.backgroundColor = randomColor;
        }
    </script>

第二套自测题库

选择题

1．使用<img>标签在网页中成功地添加一张图片，必不可少的属性是（         ）。
A．alt        B．title              C．src          D．width 

2．使用CSS设置鼠标放置在链接上时的样式应使用以下哪个选择器（         ）。
A．:active          B．:visited               C．:hover         D．:link

3．HTML中可以设置动态滚动效果的文字的标签是（     ）
A．<marquee>     B．<span>             C．<table>           D．<p>

4．下列说法不正确的是（         ）。
A．设置<input>标签中type属性为password可以添加密码框
B．一组单选按钮的那么属性值应该保持一致
C．文件域通常用于上传文件、上传头像等用途
D．设置文本域的大小应该使用width和height属性

5．下列说法错误的是（     ）。
A.  <ul>是无序列表标签
B.  <dl>是定义列表标签
C.  <ul>和<ol>都是块级元素
D.  列表标签只有有序列表、无序列表和定义列表这三种。

6．下面哪个函数是用于实现平移的（         ）。
A．translate()         B．scale()            C．rotate()          D．skew() 

7．下列不是JavaScript中关键字的是（         ）。
A．var           B．boolean        C．case                D．clas

8．关于时间监听器，下列概述不正确的是（         ）。
A．attachEvent方法允许外界注册该元素多个事件监听器。
B．addEventListener方法只允许外界注册该元素一个监听器。
C．addEventListener方法接受三个参数。
D．addEventListener方法的三个参数中第三个参数可省略。

9．响应式网页设计的优点不包括（         ）。
A．对用户友好        B．后台数据库统一              C．方便维护           D．加载时间短 

10．Flex布局中justify-content属性中flex-start属性值的含义是（     ） 
A．项目在主轴上的对齐方式为左对齐
B．项目在主轴上的对齐方式为右对齐
C．项目在主轴上的对齐方式为居中对齐
D．项目在主轴上的对齐方式为双面对齐

填空题

1．按单双标签分类，<hr>标签的类型___________，它的作用是___________。
2．<video>标签的作用是___________，<audio>标签的作用是___________。
3．CSS中，list-style-position用于设置列表的___________。
4．JavaScript中合法标识符的第一个字符必须是___________、___________或___________。
5．使用flex布局时，设置主轴方向的属性是___________，若要设置主轴在垂直方向，起点在上沿，则应设置其属性值为___________。

论述题

论述题1：
问题：请说明 var、let 和 const 的区别，并举例说明何时使用哪种声明方式。

参考答案要点：

var：
函数作用域，可重复声明。
示例：var x = 10;。
let：
块级作用域，可重新赋值，不可重复声明。
示例：let y = 20; y = 30;。
const：
块级作用域，不可重新赋值。
示例：const z = 40;（不可修改）。

论述题2：

问题：请说明 CSS 浮动（float）的作用及其可能导致的副作用，并列举至少两种清除浮动的方法。

参考答案要点：

浮动的作用：
使元素脱离文档流，实现文本环绕或多列布局。
副作用：
父容器高度塌陷，后续元素可能受影响。
清除浮动的方法：
方法1：clear: both；
方法2：触发 BFC：overflow: hidden; 

程序阅读题

题目3：DOM 操作与事件

HTML：

<button id="btn">点击我</button>
<p id="output"></p>
JavaScript：
javascript
document.getElementById("btn").addEventListener("click", function() {
  document.getElementById("output").innerHTML = "按钮被点击！";
});

问题：点击按钮后，<p> 标签的内容会变成什么？

答案：

<p> 标签内容变为：按钮被点击！

题目4：CSS 伪类与优先级
HTML：

<a href="#" class="link">链接</a>
CSS：
css
.link {
  color: green;
}
.link:hover {
  color: orange;
}
a {
  color: red;
}

问题：鼠标悬停在链接上时，文本颜色是什么？

答案：

悬停时颜色：orange（伪类 .link:hover 的优先级高于 .link 和 a）

程序编程题

综合编程题4：图片切换器

要求：

创建一个 HTML 页面，包含一个图片（<img>）和两个按钮（<button>）。
初始图片为 image1.jpg（假设存在）。
用 JavaScript 实现：
点击“下一张”按钮时，切换为 image2.jpg。
点击“上一张”按钮时，切换回 image1.jpg。

参考答案：

    <img id="image" src="image1.jpg" alt="示例图片" width="300">
    <button onclick="nextImage()">下一张</button>
    <button onclick="prevImage()">上一张</button>
 
    <script>
        let currentImage = 1; // 初始为 image1.jpg
        function nextImage() {
            currentImage = 2;
            document.getElementById("image").src = "image" + currentImage + ".jpg";
        }
        function prevImage() {
            currentImage = 1;
            document.getElementById("image").src = "image" + currentImage + ".jpg";
        }
    </script>

第三套自测题库

选择题

1．编写网页的过程中，下面那种注释不正确（         ）。
A．<!--注释-->
B．//注释
C．<**注释**>
D．/*注释*/ 

2．<div>和<span>标签说法不正确的是（         ）。
A．<div>标签是块级元素
B．<span>标签是内联元素
C．都可以添加文字
D．没有区别

3．下面是正确使用类选择器的是（         ）。
A．class a           B．.a                   C．#a             D．IDa

4．设置音频开始播放时，调用某函数，则需要什么通过以下哪个事件（         ）。
A．onplay          B．onload            C．onpause            D．onerror

5．要输出密码域，type属性的属性值应该等于（         ）。
A．password           B．radio               C．text              D．image

6．下面有关定义列表的说法中，正确的是（         ）。
A．在<dl></dl>中直接输入内容就可以 
B．在<dt></dt>中输入定义的内容，在<dd></dd>中输入解释的内容
C．在<dt></dt>中输入解释的内容，在<dd></dd>中输入定义的内容
D．在<dt></dt>和<dd></dd>是唯一且一 一对应的。

7．如果要设置某元素不浮动，则设置其CSS中float的属性值为（         ）。
A．inherit             B．both             C．right             D．none

8．下面关于JavaScript的概述不正确的是（         ）。
A．JavaScript是一种脚本编程语言                 B．它不需要进行编译
C．是一种跨平台的语言                          D．不是一种通用语言

9．下面是JavaScript中常用事件类型的是（         ）。
A．键盘事件        B．表单事件              C．鼠标事件           D．A、B、C都对

10．关于下面的代码，说法正确的是（     ）。
<meta name="viewport content="width=device-width,
initial-scale=1,maximum-scale=1,user-scalable=no"/>
A.  width=device-width表示设定度等于当前设备的宽度
B.  initial-scale=1，表示允许用户缩放到得最小比例（默认为1）
C.  user-scalable=no，表示允许用户手动缩放
D.  A、B、C都正确

填空题

1．在网页中添加链接应使用___________标签。
2．在网页中添加视频或音频时，可以通过___________属性添加视频或音频的路径。
3．在编辑table表格时，合并行使用 _________合并列使用_________。
4．JavaScript语言中定义变量使用的关键字是___________，定义常量使用的关键字是___________。
5．<meta>标签中规定网页设计的宽度与实际屏幕的宽度的大小关系的属性是___________。

论述题

论述题1：
问题：

请说明通过 JavaScript 操作 DOM 的基本步骤，并举例说明如何获取元素、修改内容和添加事件监听。

参考答案要点：

获取元素：
通过 id：document.getElementById("btn")。
修改内容：
修改文本：element.textContent = "新文本";。
添加事件监听：
element.addEventListener("click", function() {});

论述题2：
问题：请说明一个完整的 HTML 文档必须包含哪些基本标签，并解释它们的作用。

参考答案要点：

<html>：根标签，包裹整个页面内容。
<head>：包含元信息。
<title>：定义浏览器标签页标题。
<meta charset="UTF-8">：声明字符编码。
<body>：包含所有可见内容。

程序填空题

题目5：JavaScript 循环与条件
JavaScript：

for (let i = 1; i <= 3; i++) {
  if (i % 2 === 0) {
    console.log(i + " 是偶数");
  } else {
    console.log(i + " 是奇数");
  }
}

问题：控制台会输出什么内容？（按顺序）

答案：

1 是奇数
2 是偶数
3 是奇数

题目6：CSS 继承与优先级

HTML：
<div class="parent">
  <p class="child">文本</p>
</div>

CSS：
css
.parent {
  color: red;
  font-size: 20px;
}
.child {
  color: blue;
  font-size: 16px !important;
}

问题：

标签的文本颜色和字体大小是什么？

答案：

颜色：blue（.child 的样式直接覆盖父类继承的 color）
字体大小：16px（!important 强制覆盖父类的 font-size）

程序编程题

综合编程题3：计算器（加法）

要求：创建一个简单的加法计算器：

两个输入框（<input type="number">）用于输入数字。
一个按钮（<button>）用于触发计算。
一个段落（<p>）用于显示结果。
用 JavaScript 实现：点击按钮时，将两个输入框的数字相加，并显示结果。

参考答案：

  <input type="number" id="num1" placeholder="输入第一个数字">
    <input type="number" id="num2" placeholder="输入第二个数字">
    <button onclick="calculate()">计算</button>
    <p id="result">结果将显示在这里</p>
    <script>
        function calculate() {
            const num1 = parseFloat(document.getElementById("num1").value);
            const num2 = parseFloat(document.getElementById("num2").value);
            const sum = num1 + num2;
            document.getElementById("result").textContent = "结果：" + sum;
        }
    </script>

第四套自测题库

选择题

1．下面四种标签哪种写法不正确（         ）。
A．<html></html>        B．<Html></Html>         C．<HTML><HTML>        D．<html><html/>

2．使用<img>标签在网页中成功地添加一张图片，必不可少的属性是（         ）。
A．alt        B．title              C．src          D．width 

3．使用CSS设置列表项图标应使用以下哪个属性（         ）。
A．list-style-image   B．list-style-position    C．list-style-type      D．都不是

4．为网页添加音频可以通过以下哪个标签（         ）。
A．<audio>        B．<video>           C．<meta>          D．A、B、C都可以

5．下面关于表单的叙述错误的是（         ）。
A．表单是用户与网站实现交互的重要手段          B．表单可以收集浏览者的信息
C．表单是网页上的一个特定区域。                D．表单是由一对<table>标签组成

6．下列说法正确的是（         ）。
A．有序列表中，type属性可以设置其序号类型
B．无序列表中，type属性可以设置项目符号
C．CSS中可以通过list-style-image自定义列表项的图标 
D．A、B、C都对

7．下面不是CSS中display的属性值的是（         ）。
A．block            B．inline           C．none            D．line

8．在HTML中引入CSS文件使用的标签是（         ）。
A．<link>        B．<a>           C．<script>          D．<javascript>

9．下列不是鼠标事件的是（         ）。
A．onclick        B．onkeyup           C．onmouseover          D．onmouseout

10．常用布局的实现方式有（     ） 
A．单一式固定布局
B．响应式固定布局 
C．响应式弹性布局
D．A、B、C都对

标题填空题

1．JavaScript中的注释有___________种，分别是___________和___________。
2．已知如下代码：
<a id=”id” class=”cla” href=”a.html”>链接</a>
通过ID选择器选中上面代码中的标签的方法是___________，通过类选择器选中上面标签的方法是____________________。
3．HTML表单是用户与网站实现的___________重要手段。
4．应用transform设置多个变形效果是，多个效果之间使用___________间隔。
5．jQuery中设置标签的CSS样式使用的方法是___________。

简答题

论述题1：CSS 颜色表示方法

问题：请列举至少 3 种在 CSS 中表示颜色的方法，并举例说明。

参考答案要点：
颜色名称：
示例：color: red;
十六进制：
示例：color: #ff0000;
RGB/RGBA：
示例：color: rgb(255, 0, 0);

论述题2：

问题：请说明 JavaScript 中变量的作用，并列举至少 3 种基本数据类型及其示例。

参考答案要点：
变量的作用：
存储数据，方便后续使用或修改。
基本数据类型：
number：数字（如 var age = 25;）;
string：文本（如 var name = "Alice";）;
boolean：真/假（如 let isStudent = true;）;

标题程序填空题

题目1：JavaScript 数组操作

JavaScript：
let fruits = ["苹果", "香蕉", "橙子"];
fruits.push("葡萄");
fruits.shift();
console.log(fruits); // 输出什么？

问题：控制台输出的数组内容是什么？

答案：
输出：["香蕉", "橙子", "葡萄"]
（push 添加“葡萄”到末尾，shift 移除第一个元素“苹果”）

题目8：HTML 表单与默认行为

HTML：
html
<form id="form">
  <input type="text" placeholder="输入内容">
  <button type="submit">提交</button>
</form>
JavaScript：
javascript
document.getElementById("form").addEventListener("submit", function(e) {
  e.preventDefault();
  alert("表单提交被阻止！");
});

问题：点击提交按钮后会发生什么？

答案：

弹出提示框：表单提交被阻止！，且页面不会刷新（e.preventDefault() 阻止了默认提交行为）。

程序编程题

综合编程题2：显示/隐藏文本

要求：
创建一个 HTML 页面，包含一个按钮（<button>）和一个段落（<p>），初始文本为“这是隐藏/显示的文本”。
初始状态下，段落是隐藏的（通过 CSS 设置 display: none）。
用 JavaScript 实现：点击按钮时，切换段落的显示/隐藏状态（显示时文本为“文本已显示”，隐藏时文本为“文本已隐藏”）。

参考答案：

 <button onclick="toggleText()">切换显示/隐藏</button>
    <p id="demo">这是隐藏/显示的文本</p>
    <script>
        function toggleText() {
            const paragraph = document.getElementById("demo");
            if (paragraph.style.display === "none") {
                paragraph.style.display = "block";
                paragraph.textContent = "文本已显示";
            } else {
                paragraph.style.display = "none";
                paragraph.textContent = "文本已隐藏";
            }
        }
    </script>

第五套自测题库

一、选择题
1．下面哪个软件不是用于编写HTML5程序代码（         ）。
A．Dreamweaver          B．Visual studio           C．EditPlus            D．WebStorm

2．下列标签书写正确的是（     ）。
A.  <p/>         B.  <img></img>          C.  <span>         D.  <div></div>

3．使用CSS设置背景图像横向平铺，应该设置其background-repeat的属性值为（         ）。
A．repeat        B．repeat-x        C．repeat-y           D．no-repeat

4．对下列代码描述不正确的是（         ）。
<video src=”a.mp4”>请更新您的浏览器</video>
A．上面面代码可以在网页中插入一段视频
B．上面代码可以在网页中插入一段音频
C．当浏览器不支持播放视频时，浏览器中就会显示文字“请更新您的浏览器”
D．”a.mp4”是视频的路径 

5．建立一对选择性别的单选按钮，下面关于它们的name值正确的是（         ）。
A．name="boy",name="girl"	                        B．name="male",name="female"
C．name="male",name="girl"                          D．name="sex",name="sex"

6．下列选项中是有序列表标签的是（         ）。
A．<ul>        B．<ol>           C．<dl>          D．<table>

7．下面过渡动画类型中，为线性过渡的是（         ）。
A．ease              B． linear            C．ease-in           D．ease-out

8．下列不是JavaScript中合法标识符的是（         ）。
A．i             B．_name         C．$str               D．1_name

9．使用jQuery框架后，设置所有div标签的背景颜色为红色的代码是（     ）。
A.  $(“div”).css(“background”,”red”)
B.  $(“div”).style(“background”,”red”)
C.  $(“div”).style.css(“background”,”red”)
D.  $(“div”).style.background=”red”

10．使用CSS媒体查询的关键字是（         ）。
A．style
B．！important
C．@media
D．screen

填空题

1．CSS文件的后缀名是___________。
2．使用CSS设置列表项标志的类型通过___________属性。
3．<input>标签的type属性为___________时，可以创建复选框。
4．___________属性可以变换中心点。
5．列举三个键盘事件___________、___________、___________。

简答题

论述题1：

问题：请说明如何通过 CSS 设置文本的字体、大小和颜色，并举例说明。

参考答案要点：

字体（font-family）：
示例：font-family: Arial;。
大小（font-size）：
示例：font-size: 16px;。
颜色（color）：
示例：color: blue;。

论述题2：

问题：请说明 JavaScript 中 alert、confirm 和 prompt 三个弹出框的作用及区别。

参考答案要点：

alert：
作用：显示警告框，用户只能点击“确定”。
confirm：
作用：显示确认框，用户可选择“确定”或“取消”（返回 true/false）。
prompt：
作用：显示输入框，用户可输入文本（返回输入值或 null）。

程序填空题

题目1：CSS 浮动与清除浮动

HTML：
html
<div class="container">
  <div class="box float-left">左浮动</div>
  <div class="box float-right">右浮动</div>
  <div class="clearfix"></div>
</div>
CSS：
css
.box {
  width: 100px;
  height: 100px;
  background: lightblue;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.clearfix {
  clear: both;
}

问题：.clearfix 的作用是什么？如果没有它，.container 的高度会如何？
答案：
.clearfix 的作用是清除浮动，确保父容器 .container 包含浮动子元素的高度。
如果没有它，.container 的高度会塌陷为 0（因为浮动元素脱离了文档流）。

题目2：JavaScript 闭包与变量捕获

JavaScript：
javascript
function outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}
const increment = outer();
increment(); // 输出什么？
increment(); // 输出什么？

问题：两次调用 increment() 的输出结果是什么？

答案：

第一次输出：1
第二次输出：2

自测试卷1答案

一、选择题答案
1． C 2．C 3．B 4．A 5．D 6．C 7．C 8．D 9．D 10．C
二、填空题答案
1、添加段落文字
2、width和height
3、有序列表、无序列表、定义列表
4、for
5、单列布局、均分多列布局、不均分多列布局

自测试卷2答案

一、选择题答案
1． C 2．C 3．A 4．D 5．D 6．A 7．D 8．B 9．D 10．A
二、填空题答案
1、单标签、添加水平线
2、添加视频、添加音频
3、项目符号或序号的位置
4、字母、下划线、美元符号
5、flex-direction、column

自测试卷3答案

一、选择题答案
1．C 2．D 3．B 4．A 5．A 6．B 7．D 8．D 9．D 10．A
二、填空题答案
1、<a>
2、src
3、rowspan、colspan
4、var、const
5、width=device-width

自测试卷4答案

一、选择题答案
1． D 2．A 3．A 4．A 5．D 6．D 7．D 8．A 9．B 10．D
二、填空题答案
1、2、//解释文字、/解释文字/
2、#id、.cla
3、交互
4、空格
5、css()

自测试卷5答案

一、选择题答案
1． B 2．D 3．B 4．B 5．D 6．B 7．B 8．D 9．A 10．C
二、填空题答案
1、.css
2、list-style-type
3、checkbox
4、transform-origin
5、onkeyup、onkeydown、onkeypress