2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记

【导读】：初学web前端的小伙伴经常会遇到的问题，1.没方法 2.没资源 3.没经验，不知道从何开始 ，代码哥（DaiMaGe3）之前也是从新手过来的，很能理解web前端新手的难处，为了更好的帮助大家自学好web前端开发，我把自己精心梳理的web自学资料、心得及完整的web前端学习路线，统统都分享出来，希望对有需要的朋友有所帮助！

【大纲】：

1.为什么要学web前端开发？

2.哪些人可以学web前端开发？

3.自学web前端开发有什么收获？

4.怎么高效学习web前端开发？

5.自学web前端课程有哪些实战项目+案例？

6.整套web前端课程部分视频+源码+笔记切图。

【正文】：

• 为什么要学web前端开发？

1. 主要原因好就业，薪资不错

备：随着移动互联网的深入发展，多屏互动和多端兼容友好的界面成为目前系统重要的需求，让前端开发工程师一跃成为目前市场紧俏的人才。

2、专业无限制：计算机专业、非计算机专业占比3：4

3、适合零基础：专业、性别不限，没有基础也能学习

4、技术上手快：4个月，快速学习、系统掌握

5、职业生涯稳：软件项目都需要前端开发，it在，前端在

 

二、哪些人可以学web前端开发？

1.在校大学生

2.刚刚毕业的技术小白

3.零基础想转行的非在职it人员

4.有基础想转行的在职IT人员

5.希望得到技能提的IT研发人员

...........

三、通过自学web前端开发课程有什么收获？

1. 熟练掌握前端开发HTML、CSS、JavaScript等核心技术，熟练掌握Vue、React
2. 熟练使用面向对象思想进行编程，掌握应对业务编程的能力以及常见兼容性方案
3. 熟练掌握前后端分工开发流程、原生 Ajax 请求流程与细节，掌握常见跨域技巧
4. 能够基于jQuery相关 API 熟练开发网页功能
5. 熟练运用H5实现项目的开发、运用原生JS开发移动web页面、运用bootstrap和CSS3媒体查询开发响应式网页
6. 熟练掌握模块化编程方式，熟练使用 Node.js和Express框架对MySQL 数据库进行增删改查操作
7. 熟练掌握artTemplate模板引擎的应用
8. 熟练掌握基于cookie、session、token的持久化和身份验证
9. 熟练掌握前后端分离开发模式
10. 熟练掌握 Webpack 项目打包配置流程
11. 熟练掌握微信小程序项目开发

四、怎么高效学习web前端开发？

按笔者的经验，按以下8阶段式自学，稳扎稳打，逐步深入巩固所学知识点：

阶段一 : 前端基础

学习：HTML，CSS，HTML5和CSS3基础

掌握：能够根据PSD文件，完成PC端静态网页的开发工作，学完此阶段，尚不能够达到企业用人标准。

阶段二 : 移动Web网页开发

学习：H5C3进阶  Flex 伸缩布局  移动web开发

掌握：能够完成移动Web网页、响应式页面以及炫酷页面的开发工作，学完此阶段，尚不能够达到企业用人标准

阶段三 : JavaScript网页编程

学习：JavaScript基础语法  WebAPI编程  jQuery快速开发

掌握：能够完成PC端网页、移动Web网页、响应式页面中的功能和特殊效果的开发工作，学完此阶段，具备一定的企业基础用人标准，但尚未达到初级前端开发工程师水平。

阶段四 ： Node与Ajax

学习：JavaScript基础语法  WebAPI编程  jQuery快速开发

掌握：能够

阶段四 ： Node与Ajax

学习：Ajax+HTTP  Git和github基本使用 Node基础 npm+模块加载机制 Express MySQL数据库  web开发模式、身份认证+session、jwt

掌握：能够完成前后端数据交互、基于前后端分离模式、传统模式的开发的工作，学完此阶段，具备企业基础用人标准，能够达到初级前端开发工程师水平

阶段五 ： Vue.js 项目实战

学习：webpack Vue-cli3和Element-UI  Vue-cli3（Vue脚手架）、Element-UI组件库

Vuex基础、【案例】基于Vuex的todos案例  【项目】社交媒体-头条项目 HR-saas中台管理项目

掌握：能够实现基于Vue技术栈项目的开发能力，学完此阶段，具备企业用人标准，能够达到中级前端开发工程师水平。

阶段六：  微信小程序

学习：微信小程序介绍、 微信小程序配置、 微信小程序代码构成、 微信小程序宿主环境、微信小程序协同工作和发布、 微信小程序基础、 微信小程序进阶、微信小程序数据请求和案例、微信小程序页面导航、微信小程序页面事件和上拉触底案例、微信小程序生命周期和wxs

掌握：能够使用小程序原生框架和uniapp框架进行微信小程序项目开发，学完此阶段，具备企业用人标准，能够达到中级前端开发工程师水平

阶段七 ： React.js项目实战

学习：React基本使用、JSX语法、React组件基础、React组件进阶、React原理及优化、React路由

掌握：能够实现基于React技术栈项目开发能力，配合常用组件库解决项目中的一些共性问题，满足前端开发行业中的常见需求，学完此阶段，具备企业用人标准，能够达到中级前端开发工程师水平

阶段八 ： 面试指导+前端面试题

学习：前端-工作面试指导技巧 简历内容篇、求职内容篇、面试内容篇、工作内容篇、市场行情篇、人事内容篇、工作心理篇

掌握： 通过面试指导+就业指导资料+前端面试题+复习，学完此阶段，具备企业用人标准，能够达到中级前端开发工程师水平

 

五、自学web前端课程有哪些实战项目+案例？

可通过学习和实操以下7大特色项目，让自学水准速迅提升，并能累积企业项目开发经验，帮助自学者未来在职场加薪奠定基础。代码哥（DaiMaGe3）7个特色实战项目如下：

01.学成网在线项目

学成在线案例是一个在线教育平台，在该案例中使用HTML+CSS进行页面的布局， 在首页中主要有网页的头部区域、网页的banner区域、课程导航和课程列表。

 

02. 品优购电商项目

品优购电商项目属于B2C电商平台，类似于京东商城和淘宝，在该项目中使用HTML+CSS/CSS3进行页面的布局和动态效果实现， 主要实现了电商首页、列表页面、详情页面，三个页面之间能够进行相互切切换。

 

03.ECharts数据可视化项目

是一个数据可视化展示平台， 该项目在企业后台中应用较为广泛，项目中页面布局使用rem+flex+felxible.js进行适配，项目中的地图展示、图表等全部是基于ECharts进行实现。

 

04.大事件项目

是一个CMS内容管理系统，该项目的布局和交互主要使用Layui实现，实现的功能主要有注册、登录、编写文章、发布文章、修改文章、文章类别管理、删除文章、分页、上传文章图片封面、文章数据可视化、重置密码、更换头像等功能。

05.大事件后端接口项目

是为大事件项目提供后端接口服务，该项目主要使用Express+MySQL+cors+bcryptjs等实现后端接口开发，项目主要实现了登录、注册接口开发、个人中心相关接口开发、文章类别管理相关接口开发、文章管理相关接口开发，通过学习该项目就能够熟悉后端开发大致流程，为今后工作中与后端人员进行数据交互打下扎实的基础，并具备了一定的后端接口开发能力

 

06.优购商城项目

优购商城是一个小程序电商业务项目，该项目从企业中的经典业务需求入手，涵盖了商品分类、商品列表、 商品详情、购物车、订单、微信支付、客服等核心模块。

 

07.好客租房项目

好客租房项目采用目前前端的React技术栈进行开发，涵盖了React中最常用的技术以及移动端场景问题的解决方案， 使用React官方脚手架工具提供的工作流快速搭建和开发项目，使用阿里旗下antd-mobile组件库搭建页面结构， 使用React-Router-DOM作为前端路由管理复杂页面，使用百度地图API实现地理定位，在地图中直接查找房源等实用功能。

 

六、整套web前端课程部分视频+源码+笔记切图。

 

 

 

 

 

这是我自己总结的学习路线和心得，比较严谨简洁，一般跟着这个走，这些知识都学会了找到工作没有任何的问题。有什么前端不懂的问题可以随时M我。

由于经常分享失败，我上传github上了，先放上链接：https://github.com/Lydever/web-1-x.git

_{请礼貌，不要耍流氓哈哈}，创作不易，下载的同时，请start一下，谢谢~

注意：转载请备注来源: https://blog.csdn.net/weixin_43853746/article/details/109992935

# 官方信息网站
👉 1+X Web考证信息成绩查询系统
👉 工信部: 关于首批1+X证书制度试点院校名单的公告
👉 1+X Web 前端开发职业技能等级标准.pdf
# 前言
2020 12月 1+X Web 前端开发中级 模拟题大致就更这么多,我的重心不在这里,就不花太多时间在这里面了。但是，说说1+X Web前端开发等级考证这个证书,总有人跑到网上问：这个证书有没有用？ 这个证书含金量高不高？
# 关于考不考
因为这个是工信部从2019年才开始实施试点的，目前还在各大院校试点中，就目前情况来看，知名度并不是很高，有没有用现在无法一锤定音，看它以后办的怎么样把，软考以前也是慢慢地才知名起来。能考就考吧，据所知，大部分学校报考，基本不用交什么报考费(小部分学校，个别除外，如果要缴费的看自己需要…) 反正不损失什么，就算以后没什么用就当给自己做的一次测试吧。
# 关于理论题
就这去年和今年考的那几批的试题来看，考得很基础，对于选择题基本上都是基础的知识点和概念之类的，记住多看看基础，在我发的这几套试题认真做，中级基础的知识点都在这里面了。
# 关于实操题
中级实操的考核是在初级的基础上,重点考察下面几个部分，所以下面五个知识点差不多一个知识点一道大题，一般实操有四道大题，打√的都是重点考的知识点（极少可能只有三道）：

• 前端静态搭建（html+css+js ）
• 深入浅出MySQL数据库（php与MySQL数据库操作）√
• PHP 技术与应用 (PHP Laravel 框架应用) √
• Web前后端交互技术（php）√
• 响应式开发技术（bootstrap响应式题型）√

# 关于答题技巧
实操就是自己读懂程序代码，理清相关文件，进行填空，补齐代码，实现功能。技巧：整体看一下整体相关文件，有一个大概的了解，理清思路，程序代码“上下前后连接”，记不得样式单词找样式单词看一下前后代码，找变量尽量copy，防止自己稍不留神_敲错

了解 1+X Web前端开发等级考证的看这里戳这里👈

2020年下半年 Web前端开发中级 实操考试

考生姓名：——————————— 准考证号：——————————

试题一（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）处填入正确的内容。

试题二（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）处填入正确的内容。

试题四（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）处填入正确的内容。

试题四（20分）

阅读下列说明、效果图和代码，进行动态网页开发，回答问题1至问题4。
【说明】
该程序为一个问卷调查系统，使用PHP的Laravel框架编程，项目名称为XXX，核心文件包括路由文件web.php、模板文件（信息展示模板news.blade.php）、控制器文件newscontroller.php。实现批量删除功能。

【效果图】
（1）信息展示模板页面：对应模板文件news.blade.php
先选中需要删除的数据，点击“批量删除”按钮，如图4-1所示。

图4-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 

---

实操考试评分细则：

试题一（30分）（每空2分，共30分）

【问题】（30分）
（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-12每空1.5分，13-18每空2分 共30分）
【问题】（30分）
（1）box-shadow: 0 0 15px #ccc
（2）new mysqli
（3）SELECT * from news (不区分大小写)
（4）mysqli_query
（5）$conn（6）$sqlCount
（7）($num-1)\ast$pageCount
（8）SELECT * from news limit $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)

试题三（20分）（每空2分，共20分）
【问题】（20分）
（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

试题四（20分）（每空2分，共20分）
【问题】（20分）
（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’)}}

1+X 系列导航

考点知识回顾:

一、 1+X Web前端中级必考 | PHP 技术与应用
二、 1+X Web前端等级考证 | 详解jQuery基础
三、 1+X Web前端等级考证 | 深入浅出MySQL数据库
四、1+X Web前端等级考证 | Web中级12月最新模拟题
五、 1+X Web前端等级考证 | 浅谈AJAX基础知识 (中级必考)
…

模拟题

---

1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷1) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷1) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷2) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷2) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷3) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷3) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷4) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷4) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷5) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷5) 附答案

有时间会持续更新关于1+X 方面的~~

前端内容介绍

一、什么是前端

应用软件组成：前端＋后端

后端负责处理业务逻辑＆提供数据，任何与用户直接打交道的操作界面都可以称之为前端，主要负责页面展示、与用户交互等等下面都是前端：

1. 公司官网（在PC通过浏览器来访问公司网站）
2. 移动端网页（在手机上来浏览公司信息、小游戏等）
3. 移动端APP（例如：淘宝、去哪儿旅游、携程等）
4. 微信小程序（微信最新推出的功能，随用随装，不占用手机空间）。

前端开发是从网页制作演变而来的。

早期的网页制作主要内容都是静态的，以文字图片为主，用户使用网站也以浏览为主。

随着互联网的发展，现代网页更佳美观，交互效果显著，功能更加强大。

因此现在的前端开发的主要技术通常是指html、css、js技术和一些开发框架的使用。

二、前端的发展史（了解）

1. web1.0时代的网页制作

   网页制作是web1.0时代的产物，那个时候的网页主要是静态网页，所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页，我们当时称为“牛皮癣”网页。

   例如一篇QQ日志、一篇博文等展示性文章。在web1.0时代，用户能做的唯一事情就是浏览这个网站的文字图片内容，这时用户也不能像现在在大多数网站都可以评论交流（缺乏交互性）。

   相信可能大多数人都听过“网页三剑客 Dreamweaver+Fireworks+Flash吧，这个组合就是web1.0时代额产物

2. web2.0时代的前端开发

   “前端开发”是从“网页制作”演变而来的。

   从2005年开始，互联网进入web 2.0时代，由单一的文字和图片组成的静态网页已经不能满足用户的需求，用户需要更好的体验。

3. 在web 2.0时代，网页有静态网页和动态网页。

   所谓动态网页，就是用户不仅仅可以浏览网页，还可以与服务器进行交互。举个例子，你登陆新浪微博，要输入账号密码，这个时候就需要服务器对你的账号和密码进行验证通过才行。

   web2.0时代的网页不仅包含炫丽的动画、音频和视频，还可以让用户在网页中进行评论交流、上传和下载文件等（交互性）。这个时代的网页，如果是用“网页三剑客Dreamweaver+Fireworks+Flash制作的，那是远远不能满足需求。

   现在网站开发无论是开发难度，还是开发方式上，都更接近传统的网站后台开发，所以现在不再叫“网页制作”，而是叫“web前端开发”。

   所以，处于web2.0时代的你，如果要学习网站开发技术，就不要再相信所谓的“网页三剑客Dreamweaver+Fireworks+Flash，因为这个组合已经是上个互联网时代的产物。而且这个组合开发出来的网站问题也非常多，例如代码冗余、网站维护困难（学习到后期，你会知道为什么不用这个组合了

   

   更多前端的发展史参考：CSDN

三、为何要学前端开发

我们为什么要学习前端开发，一方面市场对程序员的要求越来越趋于全栈。另外一方面不谋全局者不足以谋一城，也就是说也就是说我们不仅要掌握后端开发的技术还要掌握一定程度的前端开发技术。 通过前面课程的学习，相信大家都已经掌握了Python基础语法、函数、面向对象、网络编程及数据库相关的内容。上面说的那些内容都是属于后端开发范畴的，在接下来的这个章节我们将一起来学习一下前端部分的内容。

四、前端开发学习历程

我们知道，用所谓的网页三剑客已经不能满足需求了，那前端开发究竟要学习什么技术呢？网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。

1. HTML是什么？

   HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

2. css

   CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。

3. JavaScript

   JavaScript是一门脚本语言。

4. 前端框架

   1、bootstrap

   2、JQuery

   3、vue

   PS：其实框架就是提前给你封装好了很多操作，你只需要按照固定的语法调用即可

**HTML、CSS和JavaScript的区别 **

我们都知道前端技术最核心的是HTML、CSS和JavaScript这三种。但是这三者究竟是干嘛的呢？

• HTML是网页的结构/骨架，没有任何的样式

• CSS是网页的外观，给骨架添加各种样式，变得好看

• JavaScript是页面的行为,控制网页的动态效果

举个栗子，如果我们把前端开发的过程比喻成“建房子”，做一个网页就像盖一栋房子

1. 先把房子结构建好（HTML）
2. 建好房子之后给房子装修（CSS），例如往窗户安上窗帘、往地板铺上漂亮的瓷砖
3. 最后呢，装修完了之后，当夜幕降临的时候，我们要开灯（JavaScript），这样才能看得见里面。

五、软件开发架构

前面已经介绍过，点我进入详细介绍，这里只做简单说明：

CS 客户端 服务端

BS 浏览器 服务端

PS: BS本质也是CS

BS架构简单示例

首先，我们手动开发写一个套接字服务端，代码如下。

import socket

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('127.0.0.1', 8888))
s.listen(5)

while True:
    conn, addr = s.accept()

    data = conn.recv(1024)
    print(data)

    conn.send(b'http/1.1 200 ok\r\n')
    conn.send(b'\r\n')
    with open('index.html',mode='rb') as f:
        data=f.read()
    conn.send(data)
    conn.close()

然后创建一个index.html文件,，将字符编码改为gbk，否则会出现乱码问题，因为谷歌浏览器默认字符编码为gbk,代码如下：

<h1 style="color: chartreuse">你好啊！</h1>
<h1>派大星</h1>

然后将客户端运行起来，在浏览器地址栏输入主机地址和端口号：http://127.0.0.1:8888/，效果如下：

服务端就会收到客户端发送来的数据及链接请求，效果如下图。

这样就简单实现了一个BS架构，怎么样，是不是很简单啊？

六、开发环境

市面上有很多的HTML编辑器可以选择，常见的Hbuild、Sublime Text、Dreamweare都可以用来开发HTML。 当然PyCharm也支持HTML开发。

1. 浏览器

   浏览器在本地也能打开html文件，浏览器就跟解释器一样，从上倒下，从左到右

   全球共有五大浏览器厂商，我们主要以chrome为主

   ie
   chrome
   firfox
   safri
   presto
   浏览器内核不同，浏览器渲染引擎不同（后期考虑兼容性问题），其他浏览器都是使用这5款浏览器内核

2. 浏览器历史

   世界最早浏览器，网景浏览器（Netscape ）
   后来它想做操作系统，动了微软的奶酪，微软就想弄死他，
   微软做的也特别的绝情，微软利用windows操作系统的市场占有率，提供了免费浏览器ie,而且windows操作系统里还必须有。

   中国最早浏览器ie6，国企内就用ie6，

   浏览器不同，解析的标签标准不同，微软太霸道，就不改标准，坚持不更新，后来谷歌和火狐抢占了市场，IE就傻逼了，目前也只有傻子才用IE。。。

   市场越发地混乱，于是w3c（万维网联盟（World Wide Web Consortium，W3C））成立，用来制定大家的统一标准

   须知：学前端一半工作在考虑兼容性，目前html5在兼容性方面解决的比较好

3. 文件后缀名规范

   .htm和.html扩展名的区别

   1. DOS系统（win95或win98）下只能支持长度为3的后缀名，所以老版本的系统一直在用.htm后缀

   2. 但在windows后缀长度可以大于3位，所以windows下无所谓htm与html，html是为长文件的格式命名的

   3. 如果文件后缀是.htm，毫无疑问，浏览器也可以兼容，但推荐使用.html

七、浏览器窗口输入网址回车发生了几件事？

1. 浏览器向服务端发送请求。
2. 服务端接受请求（eg:请求百度请求）
3. 服务端返回相应的响应(eg:返回一个百度首页)
4. 浏览器接受响应，根据特定的规则渲染页面展示给用户看

浏览器可以充当很多服务端的客户端

​ 百度 腾讯视频 优酷视频…

如何做到浏览器能够跟多个不同的客户端之间进行数据交互？

   1. 浏览器很牛逼 能够自动识别不同服务端做不同处理
   2. 制定一个统一的标准 如果你想要让你写的服务端能够跟客户端之间做正常的数据交互  
   3. 那么你就必须要遵循一些规则

八、HTTP协议

1. HTTP协议简介

超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。

2. 作用

• 用来规定服务端和浏览器之间的数据交互的格式

补充说明：

该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问

你就自己跟自己玩 你就自己写客户端 用户想要使用 就下载你专门的app即可

3. HTTP工作原理

HTTP协议定义Web客户端如何从Web服务器请求Web页面，以及服务器如何把Web页面传送给客户端。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求报文，请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。

以下是 HTTP 请求/响应的步骤：

1. 客户端连接到Web服务器
   一个HTTP客户端，通常是浏览器，与Web服务器的HTTP端口（默认为80）建立一个TCP套接字连接。例如，http://www.baidu.com。

2. 发送HTTP请求
   通过TCP套接字，客户端向Web服务器发送一个文本的请求报文，一个请求报文由请求行、请求头部、空行和请求数据4部分组成。

3. 服务器接受请求并返回HTTP响应
   Web服务器解析请求，定位请求资源。服务器将资源复本写到TCP套接字，由客户端读取。一个响应由状态行、响应头部、空行和响应数据4部分组成。

4. 释放连接TCP连接
   若connection 模式为close，则服务器主动关闭TCP连接，客户端被动关闭连接，释放TCP连接;若connection 模式为keepalive，则该连接会保持一段时间，在该时间内可以继续接收请求;

5. 客户端浏览器解析HTML内容
   客户端浏览器首先解析状态行，查看表明请求是否成功的状态代码。然后解析每一个响应头，响应头告知以下为若干字节的HTML文档和文档的字符集。客户端浏览器读取响应数据HTML，根据HTML的语法对其进行格式化，并在浏览器窗口中显示。

例如：在浏览器地址栏键入URL，按下回车之后会经历以下流程：

1. 浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;
2. 解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接;
3. 浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
4. 服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器;
5. 释放 TCP连接;
6. 浏览器将该 html 文本并显示内容;

4.四大特性

1. 基于请求响应. 向服务端发送请求, 服务端响应客户端请求.

2. 基于TCP/IP之上的作用于应用层的协议

3. 无状态: 不保存用户的信息

   举例：海绵宝宝来了一千次，派大星每次都记不住，每次带她如初见。

   拓展：由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术cookie、session、token...

4. 无链接&短链接

   请求来一次我响应一次 之后我们两个就没有任何链接和关系.

   拓展: 长链接. 之后出现了websocket可以实现长链接, 可以让双方建立连接之后默认不断开. 可以实现: 群聊功能、服务端主动给客户端发送消息

4.其他

4.1 请求数据格式

    请求首行(标识HTTP协议版本，当前请求方式)
    请求头(一大堆k,v键值对)
    \r\n
    请求体(并不是所有的请求方式都有. get没有post有, post存放的是请求提交的敏感数据)    

4.2 响应数据格式

    响应首行(标识HTTP协议版本，响应状态码)
    响应头(一大堆k,v键值对)
    \r\n
    响应体(返回给浏览器展示给用户看的数据)

4.3 响应状态码

• 作用：用一串简单的数字来表示一些复杂的状态或者描述性信息
• 例如: 返回响应状态码为404, 则表示请求资源不存在

1xx:信息. 服务器收到请求，需要请求者继续执行操作.

2xx:成功，操作被服务器成功接收并处理

​ 200 OK 表明该请求服务器成功接收并处理

3xx:重定向. 需要进一步的操作以完成请求.(比如: 当你在访问一个需要登陆之后才能看的页面 你会发现会自动跳转到登陆页面)

4xx：客户端请求错误. 请求包含语法错误或无法完成请求

​ 404: 请求资源不存在(服务器无法根据客户端的请求找到对应的网页资源)

​ 403: 服务器理解请求客户端的请求，但是拒绝执行此请求.(当前请求不合法或者不符合访问资源的条件. 比如: 这是千万级别的俱乐部, 只有999万的你被限制无法进入)

5XX: 服务器内部错误

补充: 上述的状态码是HTTP协议规定的，其实到了公司之后每个公司还会自己定制自己的状态及提示信息

4.4 请求方式

get请求：

• 向服务端要数据

• eg: 输入网址获取对应的内容

**post请求: **

• 朝服务端提交数据

• eg: 用户登陆 输入用户名和密码之后 提交到服务端后端做身份校验

get和post方法的区别:

1. GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，如EditPosts.aspx?name=test1&id=123456. POST方法是把提交的数据放在HTTP包的Body中.
2. GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限制.
3. GET方式提交数据，会带来安全问题，比如一个登录页面，通过GET方式提交数据时，用户名和密码将出现在URL上，如果页面可以被缓存或者其他人可以访问这台机器，就可以从历史记录获得该用户的账号和密码.

4.5 url: 统一资源定位符(网址)

url就是我们通常所说的网址

• 形式：scheme:[//[user:password@]host[:port]][/]path[?query-string][#anchor]

  提示: 方框内的是可选部分。

  scheme：协议(例如：http， https， ftp)

  user : password@用户的登录名以及密码

  host：服务器的IP地址或者域名

  port：服务器的端口（如果是走协议默认端口，http 80 or https 443）

  path：访问资源的路径

  query-string：参数，它通常使用键值对来制定发送给http服务器的数据

  anchor：锚（跳转到网页的指定锚点位置）

参考资料

• 前端开发介绍：百度百科
• 前端的发展史：CSDN
• HTTP协议超级详解：博客园