《Web 前端开发基础》综合练习题
题量：90 | 点击题目显示答案
一、单选题（共 40 题，40.0 分）
1. 以下标签中，属于 HTML 超链接标签的是()
A. `<link>`
B. `<a>`
C. `<href>`
D. `<url>`
正确答案：B
2. HTML 中，用于定义网页主体内容的标签是()
A. `<head>`
B. `<body>`
C. `<html>`
D. `<title>`
正确答案：B
3. 想要在网页中插入换行符，应使用以下哪个标签()
A. `<p>`
B. `<br>`
C. `<hr>`
D. `<div>`
正确答案：B
4. HTML 表格中，用于定义单元格的标签是()
A. `<tr>`
B. `<th>`
C. `<td>`
D. `<table>`
正确答案：C
5. 表格标签`<th>`的作用是()
A. 表格行
B. 表头单元格
C. 普通单元格
D. 表格边框
正确答案：B
6. 表单中实现单选按钮的 input 类型是()
A. text
B. checkbox
C. radio
D. password
正确答案：C
7. 表单中实现复选框的 input 类型是()
A. radio
B. checkbox
C. submit
D. reset
正确答案：B
8. 以下不属于 CSS 样式引入方式的是()
A. 行内样式
B. 内嵌样式
C. 外联样式
D. 脚本样式
正确答案：D
9. CSS 标签选择器的书写规则是()
A. 直接书写标签名
B. 以`.`开头
C. 以`#`开头
D. 以`@`开头
正确答案：A
10. CSS 中 ID 选择器的标识符号是()
A. .
B. #
C. *
D. :
正确答案：B
11. CSS 中类选择器的标识符号是()
A. #
B. .
C. &
D. $
正确答案：B
12. CSS 盒子模型中，代表边框的属性是()
A. margin
B. padding
C. border
D. content
正确答案：C
13. CSS 盒子模型中，代表外边距的属性是()
A. margin
B. padding
C. border
D. width
正确答案：A
14. 想要设置元素文字居中对齐，CSS 属性是()
A. text-indent
B. text-align
C. line-height
D. font-align
正确答案：B
15. 以下哪个属性可以设置元素文字颜色()
A. font-color
B. color
C. text-color
D. background
正确答案：B
16. CSS 中`display:block`的作用是()
A. 将元素转为行内元素
B. 将元素转为块状元素
C. 隐藏元素
D. 让元素浮动
正确答案：B
17. 以下属于行内元素的是()
A. `<div>`
B. `<p>`
C. `<span>`
D. `<ul>`
正确答案：C
18. CSS 浮动属性的关键字是()
A. float
B. flow
C. flex
D. grid
正确答案：A
19. 清除元素浮动影响，常用的 CSS 属性是()
A. clear
B. overflow
C. position
D. z-index
正确答案：A
20. CSS 定位属性中，默认定位方式是()
A. relative
B. absolute
C. static
D. fixed
正确答案：C
21. 固定定位的 CSS 属性值为()
A. relative
B. absolute
C. fixed
D. static
正确答案：C
22. 相对定位的属性值是()
A. static
B. relative
C. absolute
D. fixed
正确答案：B
23. CSS3 中实现圆角效果的属性是()
A. border-style
B. border-radius
C. border-color
D. border-width
正确答案：B
24. 弹性盒子中，设置侧轴单行对齐方式的属性是()
A. justify-content
B. align-items
C. flex-wrap
D. flex-grow
正确答案：A
25. 弹性盒子`flex-wrap`属性的主要作用是()
A. 设置主轴方向
B. 设置子元素是否换行
C. 设置元素缩放
D. 设置对齐方式
正确答案：B
26. CSS 2D 变换中，实现元素倾斜的函数是()
A. scale()
B. rotate()
C. skew()
D. translate()
正确答案：C
27. CSS 2D 变换中，实现元素位移的函数是()
A. translate()
B. scale()
C. skew()
D. matrix()
正确答案：A
28. CSS 动画中，定义动画关键帧的规则是()
A. @style
B. @keyframes
C. @import
D. @media
正确答案：B
29. 媒体查询主要用于实现以下哪种前端效果()
A. 动画
B. 响应式布局
C. 浮动
D. 定位
正确答案：B
30. JavaScript 中，用来声明变量的关键字不包括()
A. var
B. let
C. const
D. define
正确答案：D
31. JavaScript 中，以下哪个值属于布尔类型假()
A. true
B. false
C. "0"
D. 1
正确答案：B
32. JavaScript 中，获取元素标签名的属性是()
A. className
B. tagName
C. id
D. innerText
正确答案：B
33. DOM 操作中，移除子节点的方法是()
A. removeChild()
B. createElement()
C. cloneNode()
D. setAttribute()
正确答案：A
34. 以下不属于 JavaScript 循环结构的是()
A. for
B. while
C. if
D. do…while
正确答案：C
35. JavaScript 中，判断两个值是否完全相等的运算符是()
A. =
B. ==
C. ===
D. !=
正确答案：C
36. BOM 对象中，用于获取浏览器地址栏信息的对象是()
A. window
B. location
C. history
D. screen
正确答案：B
37. JavaScript 中，弹出提示框的方法是()
A. confirm()
B. prompt()
C. alert()
D. open ()
正确答案：C
38. 以下标签中，用于定义下拉列表的是()
A. `<input>`
B. `<select>`
C. `<button>`
正确答案：B
39. HTML 中`<textarea>`标签的作用是()
A. 单行文本输入框
B. 多行文本域
C. 下拉选项
D. 单选框
正确答案：B
40. CSS 中`line-height`属性用于设置()
A. 字体大小
B. 行高
C. 字间距
D. 缩进
正确答案：B
二、判断题（共 20 题，20.0 分）
1. HTML 中`<hr>`标签用于创建水平分割线。()
正确答案：正确
2. 有序列表标签`<ol>`内部可以直接放置文本内容。()
正确答案：错误
3. HTML 表单必须依赖`<form>`标签包裹表单控件。()
正确答案：正确
4. CSS 行内样式通过标签的 class 属性来编写。()
正确答案：错误
5. CSS 优先级：ID 选择器 > 类选择器 > 标签选择器。()
正确答案：正确
6. 块状元素默认独占一行，无法和其他元素同行显示。()
正确答案：正确
7. 行内元素可以直接设置 width 和height 属性。()
正确答案：错误
8. `overflow:hidden`可以用来清除浮动，也可以隐藏溢出内容。()
正确答案：正确
9. 绝对定位`absolute`元素会脱离标准文档流。()
正确答案：正确
10. 弹性布局父元素设置`display:flex`后，子元素默认不会换行。()
正确答案：正确
11. CSS3 动画必须设置动画名称和动画时长才能正常运行。()
正确答案：正确
12. 网格布局`grid`中，`grid-template-columns`用于定义列宽。()
正确答案：正确
13. JavaScript 是一种强类型编程语言。()
正确答案：错误
14. JavaScript 中变量名可以使用数字作为首字符。()
正确答案：错误
15. `innerText`属性只能获取元素纯文本，无法识别 HTML 标签。()
正确答案：正确
16. `getElementsByClassName()`获取的结果是一个集合。()
正确答案：正确
17. BOM 的顶级对象是 document。()
正确答案：错误
18. HTML 注释可以写成`<!-- 注释内容 -->`格式。()
正确答案：正确
19. CSS 中`opacity`属性可以设置元素整体透明度。()
正确答案：正确
20. JavaScript 的`if`语句属于分支结构。()
正确答案：正确
三、填空题（共 20 题，20.0 分）
1. HTML 中， 标签用于定义网页的标题，显示在浏览器标题栏。
正确答案：<title>
2. 无序列表的列表项标签是 。
正确答案：<li>
3. HTML 表格中，`<tr>`标签代表 。
正确答案：表格行
4. 表单提交按钮对应的 input 类型是 。
正确答案：submit
5. CSS 内嵌样式需要写在 HTML 的 标签内部。
正确答案：<head>
6. CSS 中， 属性可以同时设置四个方向的外边距。
正确答案：margin
7. 想要隐藏元素且不占据页面空间，可设置`display: `。
正确答案：none
8. CSS 设置文字加粗的属性值为`font-weight: `。
正确答案：bold
9. 弹性盒子中， 属性用于设置子元素在主轴上的对齐方式。
正确答案：justify-content
10. CSS3 中， 属性可以同时设置元素内外阴影。
正确答案：box-shadow
11. 网格布局中， 属性用于设置网格轨道的行高。
正确答案：grid-template-rows
12. JavaScript 中，使用 关键字可以定义常量。
正确答案：const
13. JavaScript 数组中，向数组末尾添加元素的方法是 。
正确答案：push()
14. DOM 中， 方法用于根据标签名获取元素集合。
正确答案：getElementsByTagName()
15. BOM 中， 对象可以实现页面历史前进、后退功能。
正确答案：history
16. HTML 中， 标签用于定义按钮。
正确答案：<button>
17. CSS 中， 属性用于设置元素背景颜色。
正确答案：background-color
18. CSS 2D 变换中， 函数可以同时实现缩放和位移。
正确答案：matrix()
19. 响应式布局依靠 规则实现不同设备的样式适配。
正确答案：@media
20. JavaScript 中， 语句可以跳出当前循环。
正确答案：break
四、简答题（共 6 题，12.0 分）
1. 简述 HTML、CSS、JavaScript 三者在网页中的分工。
正确答案：HTML 负责搭建网页结构，搭建页面骨架；CSS 负责美化页面，设置样式与布局；JavaScript 负责实现网页交互效果，完成动态行为与数据处理。
2. 简述 CSS 三种样式引入方式，并说明优先级关系。
正确答案：三种方式：行内样式、内嵌样式、外部样式；优先级：行内样式 > 内嵌样式 > 外部样式。
3. 简述标准文档流的概念，以及浮动元素对标准文档流的影响。
正确答案：标准文档流是 HTML 元素默认从上到下、从左到右的排列规则；设置float 浮动的元素会脱离标准文档流，不再占据原有位置。
4. 简述相对定位和绝对定位的核心区别。
正确答案：相对定位（relative）：元素不脱离文档流，依旧占据原有位置，参照自身原始位置偏移；绝对定位（absolute）：元素脱离文档流，参照最近的已定位父元素偏移，无定位父级则参照浏览器窗口。
5. 简述 DOM 和 BOM 的区别。
正确答案：DOM（文档对象模型）：操作 HTML 文档节点、元素、内容与样式；BOM （浏览器对象模型）：操作浏览器窗口、地址栏、历史记录、弹窗等浏览器相关功能。
6. 简述弹性布局（Flex）的适用场景。
正确答案：适用于一维布局场景，可快速实现元素横向/纵向排列、等分空间、居中对齐、自动换行等效果，常用于导航栏、卡片布局、移动端页面布局。
五、综合设计题（共 4 题，34.0 分）
1. 需求：编写基础 HTML 代码，完成“ 图文介绍模块 ”。要求： 1. 使用`<div>`作为容器； 2. 插入图片（使用 src="img.jpg"）； 3. 使用`<p>`编写一段文字描述； 4. 整体结构规范，标签闭合完整。
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<title>图文模块</title> </head>
<body>
<div class="box">
<img src="img.jpg" alt="介绍图片">
<p>这是图文介绍模块的文本内容，用于展示图片对应的相关描述信
息。</p>
</div>
</body>
</html>
参考答案见上方代码
2. （8 分） 需求：基于第 1 题的 HTML 结构，添加“ 内嵌 CSS 样式 ”，实现以下效果： 1. 容器 div 设置宽度 300px，内边距 10px，灰色边框； 2. 图片宽度 100%，自适应容器； 3. 段落文字设置文字居中、行高 24px。
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<title>图文样式模块</title>
<style>
.box {
width: 300px;
padding: 10px;
border: 1px solid #ccc; }
img {
width: 100%; }
p {
text-align: center;
line-height: 24px; }
</style> </head>
<body>
<div class="box">
<img src="img.jpg" alt="介绍图片">
<p>这是图文介绍模块的文本内容，用于展示图片对应的相关描述信息。</p>
</div> </body>
</html>
参考答案见上方代码
3. （8 分） 需求：使用“HTML 表单 ”制作简易登录框，要求包含以下控件： 1. 用户名单行输入框； 2. 密码输入框； 3. 提交按钮、重置按钮； 4. 所有控件放在`<form>`标签内，结构完整。
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<title>登录表单</title> </head>
<body>
<form action="" method="get">
<p>用户名：<input type="text" name="username"></p>
<p>密 码：<input type="password" name="pwd"></p>
<p>
<input type="submit" value="登录">
<input type="reset" value="重置"> </p>
</form> </body>
</html>
参考答案见上方代码
4. （10 分） 需求：结合 HTML + CSS + JavaScript，完成“点击按钮修改文本内容 ”交互 效果： 1. HTML 结构：一个`<div>`存放文本，一个`<button>`按钮； 2. CSS 简单美化：div 宽 200px、高 80px、边框 1px 实线黑色，文字居中； 3. JavaScript：给按钮绑定点击事件，点击后将 div 内文本改为“文本已修改 ”。
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<title>JS 修改文本</title>
<style>
#content {
width: 200px;
height: 80px;
border: 1px solid #000;
text-align: center;
line-height: 80px; }
</style> </head>
<body>
<div id="content">原始文本内容</div>
<button id="btn">点击修改文本</button>
<script>
// 获取元素
let box = document.getElementById('content');
let btn = document.getElementById('btn');
// 绑定点击事件
btn.onclick = function(){
box.innerText = "文本已修改";
}
</script> </body>
</html>
参考答案见上方代码