试题一（每空 2 分，共 30 分）
阅读下列说明、效果图和 HTML 代码，进行静态网页开发，在红色横线处补全代码。
1.【说明】
这是 “Web 技术社区” 网站，该网站致力于推广和分享各种前端开发技术，现在我们需要编写该网站首页。
项目名称为web_skill，采用Bootstrap框架，包含首页index.html、css文件夹、js文件夹、img文件夹，其中，css文件夹包含index.css文件和bootstrap.min.css文件；js文件夹包含jquery-3.2.1.min.js文件和bootstrap.min.js文件；img文件夹包含bootstrap.png、php.png、mysql.png和laravel.png图片。
首页（index.html）使用Bootstrap响应式布局，PC端和移动端能够自适应显示，内容分为三部分：
一是【页头】，包括网页标题和导航栏，网页标题“Web技术社区”使用盒模型，导航栏使用了下拉插件，显示时为菜单，在移动端显示为折叠导航栏；
二是【网站介绍】，背景从上到下由黑到白渐变，鼠标悬停时“欢迎来到Web技术社区”标题字号变大为根元素大小的2.25倍；
三是【技术介绍】，采用栅格系统布局，以图片和标题的形式展示四项【技术】，屏幕宽度≥992px时显示四列，屏幕宽度<576px时显示两列。
2.【效果图】
（1）index.html 在 PC 端效果
2）导航栏 “Bootstrap” 项使用下拉插件，点击显示下拉菜单，内容为 “布局”、“组件”、“插件”
（3）index.html 在移动端效果如图 1-3 所示，导航栏和 “Bootstrap” 下拉插件
3.【代码：首页 index.html】 (提示 * 中间为填空答案 )
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 导入css文件夹中bootstrap.min.css基础样式文件 -->
<link rel="stylesheet" type="text/css" href="***css/bootstrap.min.css***" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Web技术社区</title></head><body>
<!-- 页头 -->
<!-- 响应式导航栏 -->
<nav class="navbar ***navbar-expand-lg*** navbar-dark bg-dark">
<a class="brand" href="#">Web技术社区</a>
<!-- 折叠导航栏 -->
<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 active">
<a class="nav-link" href="#">首页</a>
</li>
<!-- 下拉菜单 -->
<li class="nav-item ***dropdown***">
<a class="nav-link dropdown-toggle"
href="#" data-toggle="dropdown">Bootstrap</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">布局</a>
<a class="dropdown-item" href="#">组件</a>
<a class="dropdown-item" href="#">插件</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PHP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MySQL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Laravel</a>
</li>
</ul>
</div>
</nav>
<div id="introduction">
<div id="content">
<h2>欢迎来到Web技术社区</h2>
<p>本站包括Bootstrap、PHP、MySQL、Laravel等Web技术教程</p>
</div>
</div>
<!-- 栅格系统 -->
<!-- 最外层容器100%宽度-->
<div class=" ***container-fluid***">
<!-- 行 -->
<div class="row">
<!-- 屏幕宽度≧992px时显示四列，屏幕宽度<576px时显示两列 -->
<div class="***col-6 col-lg-3 或 col-lg-3 col-6***">
<!--第一张图片和标题-->
<div class="card">
<img class="card-img-top" src="img/bootstrap.png">
<div class="card-body">
<p class="card-text">Bootstrap</p>
</div>
</div>
<!--第二张图片和标题-->
<div class="card">
<img class="card-img-top" src="img/php.png">
<div class="card-body">
<p class="card-text">PHP</p>
</div>
</div>
<!--第三张图片和标题-->
<div class="card">
<img class="card-img-top" src="img/mysql.png">
<div class="card-body">
<p class="card-text">MySQL</p>
</div>
</div>
<!--第四张图片和标题-->
<div class="card">
<img class="card-img-top" src="img/laravel.png">
<div class="card-body">
<p class="card-text">Laravel</p>
</div>
</div>
</div>
</div>
</div>
<!-- 导入js文件夹里的jquery-3.2.1.min.js文件和bootstrap.min.js文件 -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="***js/bootstrap.min.js***"></script></body></html>4.【代码：CSS 文件 index.css】 (提示 * 中间为填空答案 )
body {font-size: 20px;}
.navbar-dark .navbar-nav .nav-link{
color: white;
}
.navbar {
position: absolute;
top:0px;
width: 100%;
z-index: 99;
}
.brand {
color: white;
/* 盒模型 */
***border: 1px solid white***;/* 边框1px，白色，实线 */
padding: 5px;/* 内边距5px */
***margin: 5px***;/* 外边距5px */
}
.brand:hover {
color: white;
text-decoration: none;
}
#introduction {
background: ***linear-gradient***(to ***bottom***,black,white);/* 背景从上到下颜色渐变 */
width:100%;
height:400px;
color: rgba(255,255,255,0.9);/* 字体颜色 */
}
#content {
position: absolute;
top: 16%;
left: 16%;
width: 68%;
text-align: center;
}
#content h2:hover {
font-size: 2.25***rem**;/* 设置字体大小为根元素大小的2.25倍 */
***transition***: font-size 1s;/* 使用过渡，1s内标题字号变大 */
}
.card{
margin: 10px;
***box-shadow:***1px 1px 5px black;/* 盒阴影 */
text-align: center;
align-items: center;
}
.card-img-top{
margin-top: 10px;
width: 60%;
}
.card-text { text-align: center;}试题二（每空 1.5 分，共 30 分）
阅读下列说明、效果图、MySQL 数据库操作和代码，进行动态网页开发，请在红色横线处补充代码。
1、【说明】
该程序为一个用户管理模块，使用 PHP 编程，采用 MySQL 数据库和 mysqli 编程。项目名称为 project，包括登录 login.php、处理登录请求 check.php、用户管理主页 index.php、用户管理数据库操作 user.php，以及创建数据库脚本 db.sql 和初始化数据脚本 init.sql。
2.【效果图】
（1）登录 login.php
在登录页面进行登录，并进行登录请求处理，用户登录页面如下
（2）用户管理主页 index.php
登录成功时，用 Session 保存用户账号，并跳转到 “用户管理主页”，主页布局如下：在头部显示 “欢迎 + 用户账号” 信息，在中间区域用表格显示用户列表信息，每一个用户信息显示为一行，内容包含 “序号、帐号、密码、手机号”。用户管理主页如下：
3.【MySQL 数据库操作：创建数据库脚本 db.sql】
系统使用 MySQL 数据库，数据库名为 user_center，表名为用户表 users。user 表包含序号、用户帐号、密码、手机号字段，其中，序号为自增字段和主键。请补充两处代码。 (提示 * 中间为填空答案 )
DROP DATABASE IF EXISTS user_center; CREATE DATABASE user_center; USE user_center; CREATE TABLE `users` ( `id` int (11) NOT NULL ***auto_increment*** COMMENT '序号', `account` varchar (16) NOT NULL COMMENT '用户帐号,16位字符', `password` char (64) NOT NULL COMMENT '密码', `telphone` varchar (32) DEFAULT '' COMMENT '手机号',***primary key*** (`id`) )ENGINE= InnoDB DEFAULT CHARSET= utf8;
4.【MySQL 数据库操作：初始化数据脚本 init.sql】
在 MySQL 数据库中，向 user_center 数据库中 users 表插入用户信息数据，以便在用户管理主页 index.php 上显示用户列表信息，插入数据脚本如下。
USE user_center;
insert into users(account, password, telphone) value('admin', 'admin', "16871054787");
insert into users(account, password, telphone) value('admin2', 'admin2', "13871456841");
insert into users(account, password, telphone) value('admin3', 'admin3', "80041224771");
insert into users(account, password, telphone) value('admin4', 'admin4', "15874581652");
insert into users(account, password, telphone) value('admin5', 'admin5', "25417522145");
insert into users(account, password, telphone) value('admin6', 'admin6', "40014125155");
insert into users(account, password, telphone) value('admin7', 'admin7', "15847455514");
insert into users(account, password, telphone) value('admin8', 'admin8', "16854711223");5.【代码：用户管理数据库操作 user.php】
在 user.php 文件中，定义 User 类，进行数据库操作。在进行数据库编程中，应用 mysqli。
（1）在类中定义静态属性，设置数据库连接基本参数。
（2）在类中定义静态的方法 conn ()，连接 mysql 数据库。
（3）定义 checkLogin () 方法，验证用户登录。
（4）定义 queryAll () 方法，查询全部用户信息，并返回 $users 二维数组。
(提示 * 中间为填空答案 )
<?php
***class*** User {
static $host = "127.0.0.1";
static $dbname = "user_center";
static $user = "root";
static $pass = "123456";
static function conn() {
$db = ***new mysqli*** (self::$host, self::$user, self::$pass, self::$dbname);
if(mysqli_connect_errno()) {
return null;
}
return $db;
}
public ***function*** checkLogin($account, $password) {
$db = null;
$stmt = null;
try {
$db = self::conn();
if($db) {
$sql = "***select id from users where account
= ? and password = ? ***";
$stmt = $db->prepare($sql);
$stmt->bind_param("***ss***", $account, $password);
$stmt->bind_result($id);
$stmt->***execute***();
if($stmt->fetch()) {
return true;
}
}
} catch(Exception $e) {
echo "Message:" . $e->getMessage();
} finally {
if($stmt != null) {
$stmt->free_result();
}
if($db != null) {
$db->close();
}
}
return false;
}
public function queryAll() {
$db = null;
$stmt = null;
$users = array();
try {
$db = self::conn();
$sql = "select id, account, password, telphone from users";
$stmt = $db->prepare($sql);
***$stmt->bind_result***($id, $account, $password, $telphone);
$stmt->execute();
while($stmt->fetch()) {
***array_push**($users, array(
"id" => $id,
"account" => $account,
"password" => $password,
"telphone" => $telphone
));
}
} catch(Exception $e) {
echo "Message:" . $e->getMessage();
} finally {
if($stmt != null) {
$stmt->free_result();
}
if($db != null) {
$db->close();
}
}
return $users;
}
}6.【代码：登录 login.php】
点击 “登录” 按钮，将表单以 POST 方式提交，处理该请求的文件为 check.php，请在横线处补充代码。
(提示 * 中间为填空答案 )
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>登录</title></head><body>
<form action="***check.php***" method="post">
<table>
<tr><th>用户登录</th></tr>
<tr>
<td>
<label>帐号</label>
<input name="account" type="text" value="" />
</td>
</tr>
<tr>
<td>
<label>密码</label>
<input name="password" type="password" value="" />
</td>
</tr>
<tr>
<td><input type="submit" value="登录" /></td>
</tr>
</table>
</form></body></html>7.【代码：处理登录请求 check.php】
在 check.php 文件中，导入 User 类文件，并创建该类的对象 $user，调用 user.php 中 checkLogin () 方法，对用户账号和密码进行验证。
当登录成功时，使用 Session 保存用户账号，并跳转到用户管理主页 index.php，当登录失败时跳转到登录页面 login.php。请根据要求填写代码。
(提示 * 中间为填空答案 )
<?php
include_once "user.php";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$account = $_POST["account"];
$password = $_POST["password"];
$user= ***new User()***;
if ($user->***checkLogin***($account,$password)) {
session_start();
$_SESSION["user"] = $account;
***header***("location:index.php");
} else {
如前空("location:login.php");
}
}8.【代码：用户管理主页 index.php】
在 index.php 文件中，将 Session 中保存用户账号显示到页面头部。导入 User 类文件，并创建该类的对象 $user，调用 user.php 中 queryAll () 方法，查询全部用户信息。
将查询返回用户信息，通过 for 循环，以表格形式进行显示，请根据要求补充代码。
(提示 * 中间为填空答案 )
<?php include_once "user.php"; ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>
<div>
<?php
session_start();
if (isset(***$_SESSION['user']***)) {
echo "欢迎 " . 如前空;
} else {
echo "<a href='login.php'>未登录</a>";
}
?>
</div>
</header>
<article>
<?php
$user= new User();
$users = ***$user->queryAll()***;
?>
<table>
<tr><th>帐号</th> <th>密码</th><th>手机号</th></tr>
<?php ***foreach($users as $u):*** ?>
<tr>
<td>***<?php echo $u['account'];?>***</td>
<td><?php echo $u["password"];?></td>
<td><?php echo ***$u['telphone']*** ;?></td>
</tr>
***<?php endforeach;?>***
</table>
</article>
</body>
</html>试题三（每空 2 分，共 20 分）
阅读下列说明、效果图和代码，进行动态网页开发，请在红色横线处补全代码。
1、【说明】
随着互联网发展，越来越多的人开始阅读电子书，本项目实现在网页上阅读 JSON 格式书籍，应用 HTML、CSS、AJAX、JSON、PHP 等技术。
项目名称为 book，包含主页 index.html、index.css 和 loadJSON.php 文件，其中，主页面 index.html 显示书籍内容；index.css 为主页样式文件；loadJSON.php 为主页提供数据，返回 JSON 格式书籍。
主页分为两个部分：左侧为按钮和 “目录”，中间为章对应 “内容”。点击 “开始阅读” 按钮，通过 ajax 发送请求到 loadJSON.php，loadJSON.php 返回 JSON 格式的书籍。
在主页上通过 ajax 拿到数据后，使用 JavaScript 进行 DOM 操作，实现动态构建 “目录” 和 “内容”。同时，为每一级 “目录” 绑定点击方法，当点击对应的 “目录” 中章时，对应 “内容” 部分会随之更新。
如下图所示：
2.【代码：主页 index.html】 (提示 * 中间为填空答案 )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web阅读器</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<div>
<!-- 相对路径 -->
<button onclick="***./loadJSON.php***">开始阅读</button>
</div>
<header></header>
<aside class="list">
</aside>
<article class="content">
<p></p>
</article>
</body>
<script type="text/javascript">
var json = {};
/* 获取json格式文章 */
function loadJSON(url){
var xmlhttp;
if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new ***XMLHttpRequest***;
} else { // for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.***open***("GET", url, true);
xmlhttp.***send***();
xmlhttp.***onreadystatechange***=function(){
if (xmlhttp.***readyState***== 4 && xmlhttp.***status***== 200) {
var result = ***JSON.parse***(xmlhttp.responseText);
json = result;
/* 构建标题 */
var dom = document.getElementsByTagName("header")[0];
var h1 = document.createElement("h1");
h1.innerHTML = ***result.title***;
dom.appendChild(h1); /* 添加节点 */
/* 构建目录 */
var dom = document.getElementsByTagName("aside")[0];
for(var data in result){
if(data.search("subject") != -1){
var ul = document.createElement("ul");
ul.innerHTML = result[data];
ul.value = data;
/* 构建内容 */
ul.***onclick*** = function(){
document.getElementsByTagName("p")
[0].innerHTML = json["content" +
this.value.split("subject")[1]];
};
dom.appendChild(ul);
}
}
}
}
}
</script>
</html>3.【代码：loadJSON.php】
<?php
$arr = array(
"title" => "PHP教程",
"subject1" => "第一章：PHP 语法",
"content1" => "PHP 脚本可以放在...",
"subject2" => "第二章：PHP 变量",
"content2" => "变量以 $ 符号开始，后面...",
"subject3" => "第N章：...",
"content3" => "未完待续",
);
echo json_encode($arr);
?>4.【代码：index.css】
*{
font-size: 30px;
}
header{
position: absolute;
top:15%;
width:20%;
}
.list{
position: absolute;
top:20%;
width:20%;
}
.list ul{
font-size: 34px;
}
.list li{
font-size: 32px;
}
.content{
position: absolute;
left:30%;
width:40%;
}试题四（每空 2 分，共 20 分）
阅读下列说明、效果图和代码，进行动态网页开发，请在红色横线处补全代码或填写正确选项字母。
【说明】
该程序为一个问卷调查系统，使用 PHP 的 Laravel 框架编程，项目名称为 survey，核心文件包括路由文件 web.php、模板文件（问卷调查模板 paper.blade.php 和调查结果模板 result.blade.php）、控制器文件 SurveyController.php。页面需要的数据采用硬编码方式，存放在问卷调查控制类的静态属性中。
【效果图】
（1）问卷调查页面：对应模板文件 paper.blade.php
用户访问问卷调查页面，勾选问题答案，点击 “提交” 按钮，如图
（2）调查结果页面：对应模板文件 result.blade.php
接收问卷调查页面提交数据，并进行显示，结果页面效果如图
【问题 1】基于 Laravel 框架，在下列三个红线处补全代码。
1、包管理工具
安装 Laravel 框架，需要使用 Composer 工具：通过命令 “ composer*
create-project laravel/laravel survey --prefer-dist” 创建 survey 工程，创建完毕后，程序目录如图
2、Laravel 框架 MVC 结构
Laravel 遵循 model-view-controller (MVC) 模式，MVC 模式的 3 个组件分别为模型（Model）、视图（View）和控制器（Controller）。
项目核心文件如下表所示，请分析项目相关核心 MVC 文件，使用 MVC 关键词 “Model、View 或 Controller”，在表 1 中两个红线处补全代码。
表 1
文件 说明 MVC 关键词
routes/web.php 应用路由文件
app/Http/Controllers/SurveyController.php 问卷调查控制类 Controller
resources/views/paper.blade.php 问卷调查模板 View
resources/views/result.blade.php 调查结果模板
【问题 2】分析项目路由，在下列两个红线处填写正确选项。
在浏览器中输入网址，访问问卷调查页面，用户填写问卷后，点击“提交”按钮，通过POST方式提交问卷表单，在路由文件web.php中，路由配置如下：
<?php
// 访问问卷调查页面
Route::get("/survey", "SurveyController@paper");
// 提交问卷
Route::post("/finish", "SurveyController@finish");项目发布在本机上，本机地址为localhost，根据web.php文件中定义的路由信息，当输入下列访问地址时，分析路由情况，根据A至F内容选择相应字母，填到红线处。
在浏览器中输入“http://localhost/survey”时，路由会 *** E ***。
在浏览器中输入“http://localhost/finish”时，路由会 *** B ***。
A. 显示 paper.blade.php 模板。
B. 抛出异常，未定义该方法。
C. 将字符串 “SurveyController@finish” 返回并显示到页面。
D. 将字符串 “SurveyController@paper” 返回并显示到页面。
E. 调用 SurveryController 类的 paper () 方法。
F. 调用 SurveryController 类的 finish () 方法。
【问题 3】分析项目控制器，在下列两个红线处补全代码。
在SurveyController.php文件中，定义SurveyController类，该类继承基类控制器。在SurveyController类中定义静态属性$questions，以硬编码形式保存问卷调查数据，并定义paper()方法，处理访问问卷调查页面请求，使用paper.blade.php模板文件返回问卷调查页面，将$questions传给模板文件。分析控制类SurveyController，并补全代码。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class SurveyController extends ***Controller***{
// 问卷内容，静态
private static $questions = array(
"Q1" => array(
"issue" => "选择你比较熟悉的技术：",
"type" => "checkbox",
"options" => array(
"PHP",
"Laravel",
"Restful API",
"Bootstrap"
)
),
"Q2" => array(
"issue" => "您会制作简单的网页吗？",
"type" => "radio",
"options" => array(
"会",
"不会"
)
)
);
// 初始问卷调查数据，并跳转到paper页面
public function paper() {
return view(" ***paper***", ["questions" => self::$questions]);
}
// 处理用户提交的调查问卷
public function finish(Request $request) {
$input = $request->all();
$result = array();
foreach(self::$questions as $key => $question) {
if(isset($input[$key])) {
array_push($result, array(
"issue" => $question["issue"],
"answer" => join(",", $input[$key])
));
}
}
return view("result", ["result" => $result]);
}
}【问题 4】分析模板文件，在下列第一个红线处补全代码，第二个红线处填写正确选项。
1、问卷调查模板 paper.blade.php
（1）在问卷调查模板文件paper.blade.php中，使用for循环显示问题，显示需要数据由SurveyController类中paper()返回时传递，用户填写完问卷数据后，使用POST方式提交。分析问卷调查模板和web.php中的路由信息，在红线处填写代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table>
<form action="***/finish***" method="post">
【问题】
@foreach($questions as $key=>$question)
<tr>
<td>
<label>{{ ($loop->index+1). "、".$question["issue"] }}</label><br />
@foreach($question["options"] as $option)
<input type="{{$question['type'@}}"
name="{{ $key.'[]'}}" value="{{ $option }}">{{ $option }}</input>
<br />
@endforeach
</td>
</tr>
@endforeach
<tr>
<td><input type="submit" value="提交" /></td>
</tr>
</form>
</table>
</body>
</html>（2）在上述代码中，当使用POST方式提交表单时，Laravel框架需要添加CSRF Token字段。对于代码中【问题】处的下列选项描述，不正确的是 C
A. <input type="hidden" name="_token" value="{{csrf_token()}}">
B. {{ csrf_field() }}
C. {{ csrf@ }}
D. {!! csrf_field() !!}
2、调查结果模板 result.blade.ph
在调查结果模板文件result.blade.php中，使用for循环显示用户填写的问题和答案，显示需要数据由SurveyController类中finish()返回时传递，分析finish()方法和调查结果模板文件，在红线处补全代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<section>
@foreach($result as $q)
<label>{{ ($loop->index+1). "、".$q["issue"] }}</label><br />
<label>***{{$q['answer'] }}***</label><br />
@endforeach
</section>
</body>
</html>本文来自HTML中文网 前端面试题 栏目！！
以上就是Web前端开发中级实操考试样题（含答案）的详细内容，更多请关注html中文网其它相关文章！
