Web前端开发（中级）实操考试模拟试题一（附答案）
程序员文章站
2022-03-11 09:13:10
传送门教育部：职业教育将启动“1+X”证书制度改革职业教育改革1+X证书制度试点启动1+X成绩/证书查询入口文章目录试题一（每空 2 分，共 30 分）试题一答案试题二（30分）试题二答案试题三（每空 2 分，共 20 分）试题三答案试题四（每空 2 分，共 20 分）试题四答案试题一（每空 2 分，共 30 分）阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（15）代码。【说明】这是一个响应式完成，用bootstrap4完成。项目名称为callio，采用Boot....
试题一（每空 2 分，共 30 分）
阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（15）代码。
【说明】
这是一个响应式完成，用bootstrap4完成。
项目名称为callio，采用Bootstrap框架，包含首页index.html、css文件夹、js文件夹、img文件夹，其中，css文件夹包含style.css文件和bootstrap.min.css文件；js文件夹包含jquery.min.js文件和bootstrap.min.js文件；img文件夹包含用到的图片。
首页（index.html）使用Bootstrap响应式布局，PC端和移动端能够自适应显示，内容分为四部分：
一是【页头】，包括网页标题和导航栏，导航栏使用了下拉插件，显示时为菜单，在移动端显示为折叠导航栏；
二是【轮播图】，图片切换时呈现由大缩小的动画；
三是【网站介绍】，主要是介绍分类，采用栅格系统布局，以图片和标题的形式展示，鼠标经过图片放大，且不能溢出；
四是【表单提交】，利用弹性盒子实现表单左侧的介绍相对于表单的高度垂直对居
【效果图】
（1）index.html在PC端效果如图1-1所示
图1-1
（2）index.html在移动端效果如图1-2所示
图1-2
【代码：首页index.html】
<!DOCTYPE html>
<html>
<head>
<title>callio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=__(1)__, initial-scale=1, shrink-to-fit=no">
<link rel="__(2)_____" type="text/css" href="css/bootstrap.min.css">
<link rel="__(2)_____" type="text/css" href="css/style.css">
</head>
<body>
<!-- 头部 -->
<div class="__(3)______">
<div class="row ___(4)_ _ __">
<a class="navbar-brand">
<img src="img/logo.png">
</a>
<nav class="navbar navbar-expand-lg ___(5)____">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target='#navToggler'>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navToggler">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active">首页</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">HTML/CSS</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">HTML5</a>
<a class="dropdown-item" href="#">CSS3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link">JAVASCRIPT</a>
</li>
<li class="nav-item">
<a class="nav-link">JQUERY</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- 轮播图 -->
<div id="" class="__(6)____ slide carousel-scale" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/banner1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/banner2.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
<!-- 列表展示 -->
<section class="list">
<div class="container">
<div class="row">
<div class="__(7)__"><!--中屏以上显示3列，小屏显示2列，最小屏显示1列 -->
<div class="item">
<div class="thumb">
<img src="img/service01.jpg">
</div>
<h2>HTML</h2>
<p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
<a href="">更多</a>
</div>
</div>
<div class="__(7)__">
<div class="item">
<div class="thumb">
<img src="img/service02.jpg">
</div>
<h2>JAVASCRIPT</h2>
<p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
<a href="">更多</a>
</div>
</div>
<div class="__(7)__">
<div class="item">
<div class="thumb">
<img src="img/service03.jpg">
</div>
<h2>MYSQL</h2>
<p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
<a href="">更多</a>
</div>
</div>
<div class="__(7)__">
<div class="item">
<div class="thumb">
<img src="img/service04.jpg">
</div>
<h2>ES6</h2>
<p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
<a href="">更多</a>
</div>
</div>
<div class="__(7)__">
<div class="item">
<div class="thumb">
<img src="img/service05.jpg">
</div>
<h2>PHP</h2>
<p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
<a href="">更多</a>
</div>
</div>
<div class="__(7)__">
<div class="item">
<div class="thumb">
<img src="img/service05.jpg">
</div>
<h2>VUE</h2>
<p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
<a href="">更多</a>
</div>
</div>
</div>
</div>
</section>
<section class="message">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 d-flex __(8)_ ___ description"><!-- 以下内容要垂直对齐-->
<div class="row">
<h2 class="col-12">web前端</h2>
<p class="col-12">Web前端在IT行业真正受到重视大概也就六七年的时间。随着互联网的迅猛发展，各种互联网项目也不断兴起，对用户体验提出了更高的要求，前端开发也由此逐渐成为了重要的研发角色。从2012年至今，“Web前端工程师”的需求持续走高，薪酬也是水涨船高，所以，有不少人立志要成为前端开发工程师，但同时又担心Web前端开发到底还能热多久。</p>
</div>
</div>
<div class="col-12 col-md-6 form">
<h2>
<span>Service Form</span>
Get Your Service
</h2>
<form>
<div class="form-group">
<input type="text" class="__(9)___" placeholder="输入用户名">
</div>
<div class="form-group">
<input type="text" class="__(9)___" placeholder="输入用户名">
</div>
<div class="form-group">
<input type="text" class="__(9)___" placeholder="输入用户名">
</div>
<div class="form-group">
<select id="inputState" class="__(9)___">
<option selected>html</option>
<option>css</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="__(9)___ btn btn-primary">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</section>
<footer class="container-fruild bottom">
版权
</footer>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
【代码：CSS文件style.css】
.carousel-scale .carousel-item img{
transform: ___(10)____;/*放大到1.12倍*/
}
.carousel-scale .carousel-item.active img {
animation: scaleUpDown 1s ___(11)_ __ cubic-bezier(0.250, 0.460, 0.450, 0.940);/*让动画保持最终状态*/
}
@keyframes scaleUpDown {
__(12)____ {
transform: scale(1.12);
}
__(13)____ {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.list{
margin-top:2rem;
}
.list .item{
margin:20px 10px;
padding-bottom: 20px;
border:1px solid #ccc;
_____(14)____;/*设置边框圆角，四个角都是20px*/
}
.list .item .thumb{
overflow: hidden;
margin-bottom:1rem;
}
.list .item .thumb img{
width: 100%;
transition: all .8s;
}
.list .item:hover .thumb img{
transform: scale(1.2);
}
.list .item h2,.list .item p,.list .item a{
padding:0 2rem;
}
.message{
padding:3rem 0;
border-top:1px solid #ccc;
}
.message .form{
border:1px solid #ccc;
padding:20px 30px;
border-radius: 10px;
background-color: #eee;
}
.message .form h2{
padding:20px 0;
text-align: center;
}
.message .form h2 span{
display: block;
font-size: 18px;
font-weight: normal;
}
.description h2{
text-align: center;
line-height:70px;
}
.description p{
line-height: 28px;
____(15)__ ___;//文字首页缩进
}
.bottom{
height: 6rem;
line-height: 6rem;
text-align: center;
background-color: #333;
color:#fff;
}
【问题】（30分，每空2分）
进行静态网页开发，补全代码，在（1）至（15）处填入正确的内容。
试题一答案
（1）device-width
（2）stylesheet
（3）container
（4）justify-content-between
（5）navbar-light
（6）carousel
（7）col-md-4 col-sm-6 col-12
（8）align-items-center
（9）form-control
（10）scale(1.12)
（11）forwards
（12）from或者0%
（13）to或者100%
（14）border-radius: 20px;
（15）text-indent: 2em;
试题二（30分）
阅读下列说明、效果图和代码，进行动态网页开发，回答问题1至问题4。
【说明】
在我们的生活中，当加载的内容看完后，再次下拉，就会加载出更多的内容，本项目实现下拉加载功能，应用HTML、CSS、AJAX、JSON、PHP等技术。项目名称为news，包含主页index.html、style.css和adminList.php文件，其中，主页面index.html显示新闻内容；style.css为主页样式文件；adminList.php为主页提供数据，返回JSON格式数据。
主页分为两个部分：焦点图和新闻列表，当滚动条触底，通过ajax发送请求到adminList.php，adminList.php返回JSON格式的数据。在主页上通过ajax拿到数据后，使用JQuery进行DOM操作，实现动态加载数据。如图3-1所示。
【效果图】
图3-1
【代码：主页index.html】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表页</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="box"></div>
<div class="list">
<div class="title">新闻列表</div>
<ul>
</ul>
</div>
<script src="js/index.js"></script>
</body>
</html>
【代码：style.css】
body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dd{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
}
.box{
width: 100%;
height: 300px;
background: url("../img/timg.jpg") center;
}
.list{
width: 700px;
margin:0 auto 50px;
}
.list .title{
font-size: 22px;
line-height: 60px;
}
.list ul{
____(1)____;/*设置盒子投影，颜色为#CCC,模糊度为15px*/
}
.list ul li{
position: relative;
padding:20px;
border-bottom:1px dashed #ccc;
}
.list ul li h2{
width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: normal;
font-size: 16px;
}
.list ul li h2 a{
color:#333;
}
.list ul li span{
position: absolute;
top:20px;
right:20px;
}
【代码：adminList.php】
<?php
// header ("Content-type: text/html; charset=utf-8")
$servername = "localhost";
$username = "root";
$password = "123456";
// 创建连接
$conn = __(2)____($servername, $username, $password);
// 检测连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
mysqli_query($conn,'set names utf8');
// 查询数据库
mysqli_select_db($conn,"list");
// 求信息总数
$sqlCount="____(3)____";# 查询所有数据的sql语句
$resultC = ___(4)____(__(5)___, __(6)____);# 执行数据库
$count=mysqli_num_rows($resultC);
$num=$_GET["num"];
$pageCount=$_GET["pageCount"];
$start=_____(7)____;#求开始查询的索引值
// 返回指定数据
$sql = "___(8)______";#返回指定数据的sql语句
$result = mysqli_query($conn, $sql);
$res = array('count'=>$count);
$jarr=array();
// 遍历数据
while($row = _____(9)_____($result))
{
array_push($jarr,$row);
}
$res = array(
'count'=>$count,
'list'=>$jarr
);
echo json_encode($res);
mysqli_close($conn);
?>
【代码：index.js】
$(function(){
var num=1;//当前页数
var pageCount=7;//每页显示的数量
var pageNum=0;//总页数
function ajaxDate(num){
$.ajax({
url: 'http://localhost/second/adminList.php',
type: 'get',
dataType: 'json',
data: {
___(10)_____//传递的参数
},
success:function(res){
pageNum=___(11)_______;//请求的总页数
res.list.forEach(function(data){
var str="<li>"+
"<h2><a href=''>"+data.title+"</a></h2>"+
"<span>"+ data.time+"</span>"+
"</li>";
___(12)_______;//将字符串追加到指定的位置
})
}
})
}
ajaxDate(num);
$(window).scroll(function(){
var sTop=____(13)__;//获取滚动条卷进去的距离，用jquery
var sHeight=____(14)_____;//获取可视区域的高度，用jquery
var bodyH=______(15)________;//获取页面所有内容的高度，用jquery
if(___(16)_____){//请写出判断条件
num++;
if(____(17)____){//请写出判断条件
console.log(num);
___(18)______;//调用函数请求加载数据
}
}
})
})
【问题】（27分，每空1.5分）
进行动态网页开发，补全代码，在（1）至（18）处填入正确的内容。
试题二答案
（1）box-shadow: 0 0 15px #ccc
（2）new mysqli
（3）SELECT * from news (不区分大小写)
（4）mysqli_query
（5）c o n n （ 6 ） conn （6）conn（6）sqlCount
（7）(n u m − 1 ) ∗ num-1)*num−1)∗pageCount
（8）SELECT * from news limit s t a r t , start,start,pageCount
（9）mysqli_fetch_array
（10）num: num,pageCount:pageCount
（11）Math.ceil(res.count/pageCount)
（12）$ (".list ul").append(str)
（13）$ (this).scrollTop()
（14）$ (this).height()
（15）$(document).height()
（16）sTop+sHeight>bodyH-1（这里的数值不是唯一的，可以是任意数字）
（17）num<=pageNum或者pageNum>=num
（18）ajaxDate(num)
试题三（每空 2 分，共 20 分）
阅读下列说明，用MySQL操作数据库。填写（1）至（10）代码。
【说明】
给项目“信息管理系统”设计一个数据库，采用MySQL数据库。主要创建产品信息管理模块，主要有新闻分类和新闻信息两个表。
【MySQL数据库操作：创建数据库脚本db.sql】
系统使用MySQL数据库，数据库名为info_manage，表名为newtype。newtype表包含序号、分类名称、时间，其中，序号为自增字段和主键。另一表明为news,news表包含序号、新闻标题、新闻内容、时间。补充下列（1）和（4），以下是对（1）-（4）的说明。
(1) 删除已经存在的数据库
(2) 创建数据库info_manage
(3) id为自增字段
(4) 默认是当前时间
(5) 设置主键
____(1)____ DATABASE IF EXISTS user_center;
______(2)_________;
USE info_manage;
CREATE TABLE `newtype`
(
`id` int (4) NOT NULL （3） COMMENT '序号',
`typename` varchar (16) NOT NULL COMMENT '分类名称',
`time` datetime DEFAULT ___(4)____ COMMENT '创建时间',
（5） (`id`)
)ENGINE= InnoDB DEFAULT CHARSET= utf8;
CREATE TABLE `news`
(
`id` int (4) NOT NULL （3） COMMENT '序号',
`title` varchar (16) NOT NULL COMMENT '新闻标题',
`body` text(20000) COMMENT '新闻内容',
`time` datetime DEFAULT ___(4)____ COMMENT '创建时间',
（5） (`id`)
)ENGINE= InnoDB DEFAULT CHARSET= utf8;
【MySQL数据库操作：初始化数据脚本init.sql】
在MySQL数据库中，向info_manage数据库中newtype表插入信息分类数据，插入数据脚本如下。
USE info_manage;
_____(6)______ newtype(typename) value('行业新闻');
_____(6)______ newtype(typename) value('集团新闻');
_____(6)______ newtype(typename) value('通知公告');
【MySQL数据库操作：修改news表】
在news表中，字段‘新闻分类’未创建，现需要修改news表,将‘新闻分类’字段插入到字段‘新闻标题’后，修改表脚本如下。
USE info_manage;
___(7)____ table news __(8)___ newtype int(4) ___(9)___ title;
【MySQL数据库操作：修改news表】
由于newtype输入的是数字，为了提高用户体验，现在需要将所有信息的分类名显示，显示的字段有新闻序号，新闻标题，新闻分类名。执行脚本如下：
USE info_manage;
create view newsinfo as select n.id,n.title,t.typename from news as n,newtype as t where __(10)____;
【问题】（30分，每空1.5分）
进行动态网页开发，补全代码，在（1）至（10）处填入正确的内容。
试题三答案
（1）DROP（不区分大小写）
（2）CREATE DATABASE info_manage
（3）auto_increment
（4）current_timestamp
（5）primary key
（6）insert into
（7）alter
（8）add
（9）after
（10）n.newtype=t.id
试题四（每空 2 分，共 20 分）
阅读下列说明、效果图和代码，进行动态网页开发，回答问题1至问题4。
【说明】
该程序为一个问卷调查系统，使用PHP的Laravel框架编程，项目名称为XXX，核心文件包括路由文件web.php、模板文件（信息展示模板news.blade.php）、控制器文件newscontroller.php。实现批量删除功能。
【效果图】
（1）信息展示模板页面：对应模板文件news.blade.php
先选中需要删除的数据，点击“批量删除”按钮，如图4-1所示。
图3-1
【问题】基于Laravel框架，回答下列问题，填写（1）至（10）。
【web.php】
<?php
Route::get('/', function () {
return view('welcome');
});
// 后台首页
Route::___(1)_ ___(['namespace'=>'Admin','prefix'=>'admin'],function(){
// 后台商品管理模块
Route::resource('goods','GoodsController');
Route::get('news_ajax',"Newscontroller@aajax");
});
【GoodsController.php】
将数据库中的数据展示到news.blade.php文件上，请根据页面目录结构并分析代码，填写（2）-（4）
<?php
namespace _____(2)__ ___;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
___(3)_ __; //使用数据库
class GoodsController extends Controller{
// 定义list方法
public function index(){
$data=DB::table('product')->get();
return view('admin.news')->___(4)_____("data",$data);//返回结果数据
}
}
【Newscontroller.php】
当点击‘批量删除’时，需要请求一个地址从数据库中删除选中的数据。分析相关的控制器文件和模板文件，填写（5）-（7）
<?php
namespace App\Http\Controllers\admin;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use DB;
class Newscontroller extends Controller{
public function aajax(){
//获取到ajax传来的需要删除的id
$id = $_GET['str'];
//把传来的所有id改为数组形式 explode 字符串转数组
$str = __(5)__ _(",",$id);
//利用循环将需要删除的id 一个一个进行执行sql；
foreach($str as $v){
DB::delete(“delete from product where id=?”,[$v]);
DB::table('product')->_ ___(6)______->delete();//删除数据的条件
}
___(7)_____;//返回删除的数据id
}
}
（2）信息展示模板news.blade.php
在信息展示模板文件news.blade.php中，使用for循环显示信息，显示需要数据由GoodsController类中index()返回时传递，点击‘批量删除按钮’，批量删除选中的数据，分析index()方法和模板文件，填写（8）-（10）。
_____(8)____('muban.admin')
@section('content')
<div class="content">
<table>
____(9)_ __
<tr>
<td align="center">
<input type="checkbox" name="box" value="{{$v->id}}" class="box"/>
</td>
<td>{{$v->id}}</td>
<td>{{$v->title}}</td>
<td>{{$v->pric}}</td>
<td>删除</td>
<tr>
@endforeach
</table>
<input type="button" value="批量删除" id="but">
</div>
<script>
$("#but").click(function(){
//获取到所有的input
var box = $("input[name='box']");
//去所有的input长度
length =box.length;
// alert(length);
var str ="";
for(var i=0;i<length;i++){
//如果数组中的checked 为true 就将他的id进行拼接
if(box[i].checked==true){
str =str+","+box[i].value;
}
}
//将拼接的字符串第一个，号删除
str= str.substr(1);
//ajax 将id传入后台
$.ajax({
url:"______(10)__{{url(“admin/ news_ajax”)}}___",
type:"get",
data:{str:str},
success:function (a) {
a.forEach(function(ele){
$("input").each(function(){
if($(this).val()==ele){
$(this).parents("tr").remove();
}
})
})
}
})
})
</script>
@endsection
试题四答案
（1）group
（2）App\Http\Controllers\Admin
（3）use DB
（4）with
（5）explode
（6）where(‘id’,"=","$v")
（7）return $ str
（8）@ extends
（9）@foreach($ data as $v)
（10）{{url(‘admin/news_ajax’)}}
上一篇：2020年下半年1+X Web前端开发（中级）理论考试模拟试题一（附答案）
下一篇：1+X 云计算运维与开发（中级）案例实战——利用PXE实现自动化安装系统
本文地址：https://blog.csdn.net/Destiny_425/article/details/111097928
上一篇： MySQL 学习记录 03
下一篇： 面试问题技术点记录