Web前端试卷(一般)
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3．大多数媒体查询属性包含min- 和max- 前缀，它们的含义是（）
单选题（每题 2 分，共计40分）1．弹性盒布局属于下列哪项技术的内容（）
A、HTML
B、JavaScript
C、CSS3
D、CSS2
A、333px
B、366px
C、336px
D、363px
A、小于和大于
B、小于等于和大于
C、小于等于和大于等于
D、小于等于和大于
4．下列选项中，Bootstrap 的CSS 不包括的内容是（）
A 、让低版本的浏览器支持HTML5 元素
B 、全局的CSS 设置
C、定义基本的HTML 元素样式
D 、可扩展的class
5．对声明“ a{color:#333;text-decoration:none; } ”，解释正确的是（）
A 、对全站有链接的文字颜色样式为color:#333; 并有下划线
B 、对全站有链接的文字颜色样式为color:#333; 并无下划线
C、对全站链接的文字颜色样式为color:#333 的链接去掉下划线
D 、对全站链接的文字颜色样式为color:#333 的链接添加下划线
Web前端试卷（一般）》试卷
2．一个盒子的宽（width ）和高（height ）均为300px ，左内边距为30px ，同时盒子有3px 的边框，请问这个盒子的总宽度是多少？（）
6．下列选项中，与图中效果相符的代码是() C、非法字符
A、align-items ：flex-start;
B、align-items ：flex-end;
C、align-items ：start;
D、align-items ：end;
7．下列选项中，设置外阴影且阴影在盒子右侧的选项是()
A、box-shadow: 7px -4px 10px #000
inset ;
B、box-shadow: -7px 4px 10px
#000 ;
C、box-shadow: 7px 4px 10px #000
inset ;
D、box-shadow: 7px -4px 10px
#000;
8．下列选项中，javascript 变量名称不合法的是()
A、string
B、length D、this
9．下列选项中，关于栅格系统的说法，错误的是()
A、栅格系统是一种响应式设计的实现方式
B、栅格系统是一个用于响应式设计的组件
C、对于前端开发来说，网页将更加的灵活与规范
D、对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读
10．下列表达式中，结果返回真值的是()
A、(1==1) || (3<2)
B 、(3===3 )&&(5<l)
C、!(17<=20)
D 、(3!=3)
11．下列选项中，关于元素的静态定位模式的说法错误的是()
A、静态定位是元素的默认定位方式
B 、当position 属性的取值为static 时，可以将元素定位于静态位置
C 、4
D 、5
15． 下列选项中， Javascript 声明变量语句中不正确的是（）
A 、 var aa;
B 、 var bb=3; cc='good';
C 、 var dd = ee = 100;
D 、 var ff=3, gg='he's good';
16． 在 Bootstrap 中，可以使用 .navbar-header 类的情况是（）
A 、为导航栏添加头部
B 、为导航栏添加一个标题
C 、为整个页面添加头部
D 、为真个页面添加一个标题
17． CSS3 线性渐变中的关键词，表示从右下角到左上角的是（）
A 、 to top left
B 、 to top right
C 、静态定位时各个元素在 HTML 文档流中默认的位置
D 、可以通过边偏移属性来改变静态定位元素的位置 12． 下列选择器，能够设置鼠标悬停状态下的样式的是（）
A 、:hover
B 、:active
C 、:focus
D 、:link
13． 下列选项中，可以用来修改导航条的默认样式的是
（）
A 、 .navbar-default
类
B 、 .nav 类
C 、 .navbar-header 类
D 、 .navbar-brand
类
14． 表达式 123%7 的计算结果是 （）
A 、2
C 、 to bottom left
C 、border-radius 属性中，如果省略 bottom-right ，则与 top-left 相同
判断题(对的打“√”，错的打“×”；每题
1 分，共 20分)
21． Bootstrap 中.btn-link 类会让按钮变成链接。
( )
22． 在 Canvas 中，清除矩形表示清除之前绘制的矩形。
( )
23． document 对象中提供了常用获取 HTML 元素对象的方法， getElementsByName() 可以通过标签 名称来
获取元素对象。
( )
24． 在媒体查询中，同时设置两个媒体类型时，可以使用逗号分隔。
( )
25． word-wrap 取值为 normal 时代表在长单词或 URL 地址内部进行换行。
( )
26． <video> 标签不添加 contros 属性，只添加 autoplay 属性，也可以实现自动播放。
( )
27． HTMLAudioElement 和 HTMLMediaElement 都继承了 HTMLVideoElement 。
( )
28． 在 HTML 中，连续使用 <br /> 标签是合法的。
( )
29． 如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块(没有足够的空间)，则它下降到 低
于先前任何浮动元素的位置，即换行显示。
( )
30． Bootstrap 中通过覆盖 .form-control 的样式可以改变表单控件的样式。
( )
31． <script> 标签通常放在文档的 <head> 和 </head> 标签之间。
( )
32． 表单按钮中一般按钮的功能可以进行自定义。
( )
B 、如果 border-radius 只有一个值，代表水平和垂直的半径都相等
D 、 to bottom right D 、 border-radius
属性中，如果省略 bottom-left ，则与 top-right 相同
18． 下列关于 3D 变形的说法中，错误的是()
A 、 3D 变形是指某个元素围绕其 x 轴、 y 轴、 z 轴进行旋
转
B 、 translate3d(x,y,z) 函数可以定义 3D 旋转
C 、 scale3d(x,y,z) 函数可以定义 3
D 缩放
D 、 perspective 属性用于实现视觉上的 3D 效果
19． 下列关于 background 属性说法错误的是()
A 、是复合背景属性
B 、可以设置图片背景
C 、可以规定背景图像的尺寸
D 、该属性可继承
20． 下列关于 CSS3 的圆角边框的说法中，错误的是()
A 、border-radius 的四个值按照 top-left 、 bottom-left 、bottom-right
、 top-right 的顺序设置
33． for 循环只能用于循环遍历对象的属性。
( )
34． z-index 只能在 position 属性值为 relative 或 absolute 或 fixed 的元素上有效。
( ) 35． 在 HTML5 中，通过 required 属性进行表单验证时，需要使用正则表达式。
( ) 36． text-align 属性用于设置文本内容的水平对齐，可适用于所有元素。
( ) 37． 使用<P> 标签时，使用回车键换行的段落可以实现强制换行的效果。
( ) 38． a^=b ，相当于 a=a^b 。
( ) 39． 响应式设计追求 PC 优先，移动适应。
( ) 40． Bootstrap 中.btn-primary 用于定义默认的按钮样式。
( ) 填空题(每题 1 分，共计 10分) 41． 表达式“哈哈” = =55 的值为【】。
42． 【】属性用于指定页面加载后是否自动获取焦点，将标记的属性值指定为【】时，表示页面加载完毕 后会自动获取该焦点。
43． 在 Canvas 中，【】属性用于设置线条的粗细(以像素为单位 ) 。
44． position 的属性值【】相对于浏览器窗口进行定位。
45． 【】是指被定位的元素等于在文档中不占据任何位置，在另一个层呈现。
46． 【】可以识别媒体类型和特征。
47． 有了 Audio 对象中的属性、方法和事件，就可以使用【】来操作 audio 元素。
48． 在 CSS 中，为 <a> 标记设置字体加粗的代码为【】。
49． 在使用标签时，需要通过【】属性为其指定一个【】的标识。
50． 在定义单选按钮时，必须为同一组中的选项指定相同的【】属性值，这样“单选”才会
生效。
简答题(每题 5分，共计 30 分)
51． 用 JavaScript 编写一个程序，小明目前工资为 960 元，现在公司要为员工涨工资，计算增加后小明 的
工资。
要求基本工资大于等于 1000 元，增加 20% 工资；若 1000 元，且大于等于 800 元，则增 加
15% ；若小于 800 ，则增加 10% 工资。
52． 请按照要求，完成如图所示的页面效
果。
1 )使用 CSS 圆角边框。
2 )使用“ white ”、“ #c89386 ”、“#ffb151 ”三种颜
色
53． 分析如下的 JavaScript 代码段 , 并使用 for 循环语句进行，要求运行后的结果相
同
document.write(5 + "<br>");
document.write(4 + "<br>");
document.write(3+ "<br>");
55．请按照要求，完成如图所示的页面效
果。
document.write(2 + "<br>");
document.write(1+ "<br>");
54．请阅读下面的代码，并根据注释将代码
补全
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 单元6- 程序分析-2</title>
</head>
<body>
<!-- 视频自动播放，并显示播放控件-->
<video src="demo.mp4" (1) ____________ (2) _________ >(3) ________ </video> </body>
</html> (1) 使用CSS 渐变知识
(2) 使用“ #ffe07b ”、“ #ffb151 ”、“ #16104b ”三种颜色56．请阅读下面的代码，并根据图中页面效果将代码补
全。
<!DOCTYPE html> <html>
<head lang="en">
<meta charset="UTF-8">
<title>label</title>
</head>
<body>
性别：
<label （ 1 ）_________ > 男</label>
<input type="radio" name="sex" id="male" />
<label （ 2 ）_________ > 女</label>
<input type="radio" name= （ 3 ） _________ id="female" /> </body> </html>
答案
单选题（每题 2 分，共计40分）1． C
2． C
3． C
4． A
5． B
6． B
7． D
8． D
9． B
10． A
11． D
12． A
13． A
14． C
15． D
16． B
17．A 18． B
19． D
20． A
判断题（每题1分，共计20 分）21．错
22．错
23．错
24．对
25．错
26．对
27．错
28．对
29．对
30．对
31．对
32．对
33．错
34．对
35．错
36．错
37．错
38．错
39．错
40．错
填空题（每题 1 分，共计10分）41．【false 】
42．【autofocus 】【true 】43．【lineWidth 】
44．【fixed 】
45．【脱离文档流】
46．【CSS3 媒体查询】47．【JavaScript 】
48．【 a { font-weight: bold; } 】49．【id 】【唯一】
50．【name 】
简答题（每题 5 分，共计30分）
51．正确答案：<script language="javascript" if (pay >= 1000){
pay += (pay * 0.2);
} else if (pay < 1000 && pay >= 800){ pay += (pay * 0.15);
} else if (pay < 800){
pay += (pay * 0.1);
}
alert(pay);
</script>
52．正确答案：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 圆角边框</title>
<style>
body {
padding: 0;
background-color: #F7F7F7;
}
type="text/javascript"> var pay = 960;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3 径向渐变 </title>
<style type="text/css">
.rainbow-radial-gradient{
width: 300px;
height: 300px;
background-image: -webkit-radial-gradient(100px, #ffe07b 15%,
#ffb151 2%, #16104b 50%);
}
</style>
</head>
<body>
<div class="rainbow-radial-gradient"></div>
/* 四边不同色 */
.border-radius1 {
width: 0px;
height: 0px;
border-width: 90px;
border-style: solid;
border-color: white white #c89386 #ffb151;
}
</style>
</head>
<body>
<div class="border-radius"></div>
<div class="border-radius1"></div>
</body>
</html>
53． 正确答案： // 循环输出 i 的值
for(var i=5;i>0;i--){ document.write(i+"<br/>"); 54． 正确答案：（ 1 ） contros （ 2） autoplay （ 3）您的浏览器不支持 video 标签
55． 正确答案：参考答案
</body>
</html>
56．正确答案：（1）for="male" （2）for="female" （3）"sex"。