-
2020-11-23 13:18:35
由于经常分享失败,我上传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,防止自己稍不留神敲错目录
2020年下半年 Web前端开发中级 理论考试
考生姓名:——————————— 准考证号:——————————
(考试时间9:00-11:30 共150分钟)
- 本试卷共3道大题,满分100分。
- 请在指定位置作答。
一、单选题(每小题2分,共30小题,共60分)
1、下列标签不属于列表标签的是()。
A、ul B、dl C、ol D、p2、在CSS中用()属性来实现文字环绕图片。
A、margin B、float C、padding D、src3、在CSS文件中插入注释正确书写格式的是()。
A、//this is a comment
B、#this is a comment
C、/this is a comment/
D、’this is a comment4、在form表单中哪种类型是滑块控件()?
A、search B、controls C、slider D、range5、下列哪一个是CSS3新增的属性()。
A、box-shadow B、border C、background D、display6、在javascript中关于"+"的用法说法错误的是()。
A、可以用于加法运算
B、不可以转换数据类型
C、可以链接字符串
D、可以是立即执行函数的符号7、在javascript中下列执行结果不正确的是()。
A、Math.max(3,4,5)返回5;
B、Math.abs(-9)返回9;
C、Math.floor(3.5)返回3;
D、Math.ceil(4.2)返回48、在JavaScript中下面选项关于this描述正确的是()。
A、在使用new实例化对象时, this指向这个实例对象;
B、当对象调用函数或者方法时,this指向这个对象;
C、严格模式下,this指向window;
D、在任何情况下this指向一旦确定就不能修改;9、在jQuery中,下面的说法错误的是()。
A、$ (“ul li:first”) 指选取< ul>下的第一个 < li>子元素
B、$ (“ul li:gt(2)”) 指选取< ul>下的索引从2开始的所有< li>子元素
C、$ (“ul li:eq(2)”) 指选取< ul>下的索引为2的< li>子元素
D、$ (“ul li:not(:first)”) 指选取< ul>下的除了第一个 < li>子元素的所有< li>子元素10、不属于栅格系统的实现原理的是()。
A、自定义容器的大小。平均分为12份
B、基于JavaScript开发的组件
C、结合媒体查询
D、调整内外边距11、在bootstrap4中,关于响应式栅格系统分屏类型错误的是()。
A、.col-sm- B、.col-md- C、.col-sx- D、.col-lg-12、下面哪个类用于固定宽度并支持响应式布局的容器()?
A、container B、center C、containers D、containerFluid13、bootstrap插件是依赖()开发的。
A、javascript B、jquery C、angular js D、node js14、在laravel中,界面文件应该放在以下哪个路径下()。
A、app\http\controllers
B、public/html
C、resources\views
D、routes15、在处理应答中,如果我们要以文本的方式处理,我们需要在参数表中放置XMLHttpRequest对象的()属性。
A、xhr.responseText B、xhr.responseXML
C、xhr.requestText D、xhr.requestXML16、XMLHttpRequest对象的readyState状态,当xhr.readyState==1表示:()。
A、请求已接收 B、服务器链接已经建立
C、请求已经完成 D、未初始化17、在MySQL中,查找出班主任“王笑笑”班的全部男生的信息,则正确的SQL语句是()。
A、select * from 学生 where 性别=‘男’ and 班级编号 == (select 班级编号 from 班级 where 班主任=‘王笑笑’)
B、select * from 学生 where 性别=‘男’ and 班级编号 in (select 班级编号 from 班级 where 班主任=‘王笑笑’)
C、select * from 学生 where 性别=‘男’ and 班级编号 union (select 班级编号 from 班级 where 班主任=‘王笑笑’)
D、select * from 学生 where 性别=‘男’ and 班级编号 as (select 班级编号 from 班级 where 班主任=‘王笑笑’)18、在MySQL中,关于索引管理说法错误的是()
A、执行CREATE TABLE语句时可以创建索引,也可以单独用CREATE INDEX或ALTER TABLE来为表增加索引
B、可通过唯一索引设定数据表中的某些字段列不能包含重复值
C、ALTER TABLE或DROP INDEX语句都能删除数据表中的索引
D、查看索引的命令为: SHOW INDEX 数据表名19、在MySQL中,创建数据库 test 正确的SQL语句是()。
A、CREATE DATABASE IF EXISTS `test` B、CREATE IF NOT EXISTS `test` C、CREATE DATABASE IF NOT EXISTS `test` D、CREATE IF NOT EXISTS `test` DATABASE
20、在MySQL中,联合查询使用的关键字是()。
A、JOIN B、UNION C、ALL D、FULL21、在MySQL数据库服务器中,查看当前系统内所有可用的数据库,可以执行()指令。
A、SHOW DATABASES; B、SHOW TABLES;
C、DESCRIBE DATABASES; D、DISPLAY LIBRARIES;22、在缓存中,Cookie可存的最大限制是()。
A、1kb B、2kb C、3kb D、4kb23、mysql_connect()与@mysql_connect()的区别是()。
A、@mysql_connect()不会忽略错误,将错误显示到客户端
B、mysql_connect()不会忽略错误,将错误显示到客户端
C、没有区别
D、功能不同的两个函数24、在php中,以下代码中$result的结果是()
<?php $x=""; $result=is_null($x); var_dump($result); ?>
A、报错 B、bool(true) C、bool(false) D、""
25、关于mysql_fetch_object说法中,正确的是()。
A、mysql_fetch_object和mysql_fetch_array一样,没什么区别
B、mysql_fetch_object返回值是个对象,所以在速度上比mysql_fetch_array要慢
C、mysql_fetch_object返回值是个数组,所以在速度上和mysql_fetch_array及mysql_fetch_row差不多
D、mysql_fetch_object返回值是个对象,在速度上和mysql_fetch_array及mysql_fetch_row差不多26、在php中,语句for(k=0;k=1;k++);和语句for(k=0;k==1;k++);执行的次数分别是: ()。
A、无限和0 B、0和无限 C、都是无限 D、都是027、PHP运算符中,优先级从高到低分别是()。
A、关系运算符,逻辑运算符,算术运算符
B、算术运算,关系运算符,逻辑运算符
C、逻辑运算符,算术运算符,关系运算符
D、关系运算符,算术运算符,逻辑运算符28、在javascript中,声明一个对象,给它加上name属性和show方法显示其name值,以下代码中正确 的是 ()。
A、var obj = [name:“zhangsan”,show:function(){alert(name);}];
B、var obj = {name:“zhangsan”,show:“alert(this.name)”};
C、var obj = {name:“zhangsan”,show:function(){alert(name);}};
D、var obj = {name:“zhangsan”,show:function(){alert(this.name);}};29、在Laravel框架中,模板文件中不一样的部分用()关键词?
A、@class B、@yield C、@extends D、@section30、在Laravel框架中,表单提交请求的时候,以下说法正确的是()。
A、用get请求,需要令牌验证;
B、用post的请求,需要令牌验证,在表单中加入{{ csrf_field() }}或者@csrf;
C、用get 和post请求,都不要需要令牌验证;
D、以上说法都不正确;二、多选题(每小题2分,共15小题,共30分)
1、下列标签属于HTML5结构标签的是()。
A、header B、footer C、nav D、hgroup E、p2、transform的类型有哪些()。
A、scale B、skew C、translate D、rotate E、tansition3、session 和cookie 的区别说法正确的是()。
A、session 和 cookie 都可以记录数据状态。
B、在设置session 和cookie 之前不能有输出。
C、在使用cookie 前要使用 cookie_start()函数初始。
D、在使用session 前要使用 session_start()函数初始。4、php中数组可以使用哪些键名()。
A、数字键名 B、下标 C、null D、文本(或字符串)键名5、PHP允许的注释符号有()。
A、// B、闭合的段落 C、 # D、 /和/闭合的段落6、在MySQL中,关于数据库恢复说法正确的是()。
A、执行备份的SQL文件里的SQL语句可达到数据库恢复的目的
B、SOURCE命令恢复数据库的命令是:SOURCE /path/db_name.sql
C、使用mysql命令恢复数据库的语法是:
mysql ?u username ?p [dbname] < /path/db_name.sql
D、SOURCE命令恢复数据库与mysql命令一样都可在DOS命令窗口执行7、在MySQL中,下面关于数据类型说法正确的是()。
A、varchar类型和char类型都是字符串类型,没有区别
B、varchar(4) 类型的字段,插入“abcdef”时会报长度过长的错误
C、varchar类型的长度是固定的,char类型的长度是可变的
D、char(2) 类型的字段,插入“abc”时,所占的字符数为2,数据库中插入“ab”8、在MySQL中,创建一个购物表,其中一个字段是记录购物时间(要求精确到秒),则该字段比较合适的数据类型是()。
A、DATE B、TIME C、DATETIME D、TIMESTAMP9、使用Ajax可带来便捷有()。
A、减轻服务器的负担
B、无刷新更新页面
C、可以调用外部数据
D、可以不使用Javascript脚本10、构成Ajax的技术有()。
A、DOM B、XML C、JS D、HTML11、以下说法正确的是()。
A、HTML中表示标题的标签应该全部使用h1
B、应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
C、应该根据页面中内容的层级关系来决定使用合适的标题标签。
D、h1标签用来描述网页中最上层的标题。12、关于HTML标签表述正确的是()。
A、div标签主要用于布局
B、html中标签中的代码缩进是为了方便阅读
C、< div>< p>web前端< /div>< /p>
D、< div>中不可以嵌套ul,h标签13、在laravel中,关于页面跳转说法正确的是()。
A、return redirect(‘home/test’);在控制器中用redirect跳转的方法;
B、< a href="{{ route(‘test’) }}">首页,这种方式是针对命令路由的;
C、< a href="{{ route(‘test’) }}">首页,不是命名路由也可以使用此方法;
D、< a href="{{ action(‘HomeController@index’) }}">首页14、关于RESTful API说法正确的是()。
A、它是一个api的标准,无状态请求
B、请求的路由地址是固定的
C、使用标准有.post .put .delete
D、以上说法都正确15、在Bootstrap4中,下列说法正确的是()。
A、<576px 像素的为超小屏幕,用 .col-*
B、≥576px 像素的为小屏幕,用 .col-sm-*
C、≥768px 像素的为中等屏幕,用 .col-md-*
D、≥992px 像素的则为大屏幕,用 .col-lg-*
E、≥1200px像素的则为超大屏,用 .col-xl-*三、判断题(每小题2分,共5小题,共10分)
在每小题后对应括号内填入判断结果,正确的选项填写“√”,错误的选项填写“×”
1、ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。( )。2、同源策略是指域名,协议,端口三者都一样( )。
3、在mysql中“use ‘demoDB’ ” 切换到demoDb数据库( )。
4、在MySQL中,使用索引不能避免进行全表的扫描( )。
5、PHP程序中可以使用echo输出数据类型( )。
理论考试答案评分细则
一、单选题(每小题2分,共30小题,共60分)
第1题 第2题 第3题 第4题 第5题 D B C D A 第6题 第7题 第8题 第9题 第10题 B D A B B 第11题 第12题 第13题 第14题 第15题 C A B C A 第16题 第17题 第18题 第19题 第20题 B B D C B 第21题 第22题 第23题 第24题 第25题 A D B C B 第26题 第27题 第28题 第29题 第30题 A B D B B 二、多选题(每小题2分,共15小题,共30分)
第1题 第2题 第3题 第4题 第5题 ABC ABCD ABD ABCD ACD 第6题 第7题 第8题 第9题 第10题 ABC BD CD ABC ABC 第11题 第12题 第13题 第14题 第15题 BC AB ABD ABCD ABCDE 三、判断题(每小题2分,共5小题,共10分)
第1题 第2题 第3题 第4题 第5题 √ √ √ × × 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 方面的~~
更多相关内容 -
Web前端开发
2015-07-13 17:21:40介绍Web前端开发技术及开发工具。web前端主要职能。 -
web前端开发流程图
2018-12-31 11:47:22本资源是是以思维导图的形式展示了关于Web前端项目开发的流程图,很详细,需者自取。 -
Web前端开发规范手册.pdf
2018-04-11 22:13:36Web前端开发规范手册 提高团队协作效率 便于前端开发以及后期优化维护 方便新进的成员快速上手 输出高质量的代码 -
1+x 证书 Web 前端开发中级理论考试(试卷 ).zip
2020-05-16 12:35:181+x 证书 Web 前端开发中级理论考试(试卷 )含答案 -
Web前端开发详细教程, Web前端开发代码大全, 包含各种框架详解
2020-07-07 22:55:39Web前端开发详细教程, Web前端开发代码大全, 包含各种框架详解 -
第1章 Web前端开发基础.pdf
2022-06-19 07:44:22第1章 Web前端开发基础.pdf第1章 Web前端开发基础.pdf第1章 Web前端开发基础.pdf第1章 Web前端开发基础.pdf第1章 Web前端开发基础.pdf第1章 Web前端开发基础.pdf第1章 Web前端开发基础.pdf第1章 Web前端开发基础.pdf... -
JavaScript & jQuery交互式Web前端开发_PDF电子书下载 高清 带索引书签目录_5
2017-10-30 15:17:09JavaScript & jQuery交互式Web前端开发_PDF电子书下载 高清 带索引书签目录_(美)达克特著_北京:清华大学出版社 -
Web前端开发技术——HTML、CSS、JavaScript
2016-07-15 16:37:42第1章Web前端开发技术综述; 第2章HTML基础; 第3章格式化文字与段落; 第4章列表; 第5章超链接; 第6章图片与多媒体文件; 第7章CSS+DIV基础; 第8章CSS+DIV高级应用; 第9章表格; 第10章框架; 第11章表单; 第... -
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记
2021-03-12 20:08:362021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记 【导读】:初学web前端的小伙伴经常会遇到的问题,1.没方法2.没资源3.没经验,不知道从何开始 ,代码哥(DaiMaGe3)之前也是从新手过来的...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前端开发?
- 主要原因好就业,薪资不错
备:随着移动互联网的深入发展,多屏互动和多端兼容友好的界面成为目前系统重要的需求,让前端开发工程师一跃成为目前市场紧俏的人才。
2、专业无限制:计算机专业、非计算机专业占比3:4
3、适合零基础:专业、性别不限,没有基础也能学习
4、技术上手快:4个月,快速学习、系统掌握
5、职业生涯稳:软件项目都需要前端开发,it在,前端在
二、哪些人可以学web前端开发?
1.在校大学生
2.刚刚毕业的技术小白
3.零基础想转行的非在职it人员
4.有基础想转行的在职IT人员
5.希望得到技能提的IT研发人员
...........
三、通过自学web前端开发课程有什么收获?
- 熟练掌握前端开发HTML、CSS、JavaScript等核心技术,熟练掌握Vue、React
- 熟练使用面向对象思想进行编程,掌握应对业务编程的能力以及常见兼容性方案
- 熟练掌握前后端分工开发流程、原生 Ajax 请求流程与细节,掌握常见跨域技巧
- 能够基于jQuery相关 API 熟练开发网页功能
- 熟练运用H5实现项目的开发、运用原生JS开发移动web页面、运用bootstrap和CSS3媒体查询开发响应式网页
- 熟练掌握模块化编程方式,熟练使用 Node.js和Express框架对MySQL 数据库进行增删改查操作
- 熟练掌握artTemplate模板引擎的应用
- 熟练掌握基于cookie、session、token的持久化和身份验证
- 熟练掌握前后端分离开发模式
- 熟练掌握 Webpack 项目打包配置流程
- 熟练掌握微信小程序项目开发
四、怎么高效学习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我。
-
【1+X Web前端等级考证 】| 最新Web前端开发中级实操
2020-11-23 13:20:37但是,说说1+X Web前端开发等级考证这个证书,总有人跑到网上问:这个证书有没有用? 这个证书含金量高不高? # 关于考不考 因为这个是工信部从2019年才开始实施试点的,目前还在各大院校试点中,就目前情况来看,...由于经常分享失败,我上传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,防止自己稍不留神敲错目录
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) 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)试题三(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 方面的~~
-
WEB前端开发常用英语单词和语句汇总
2018-05-22 16:42:22WEB前端开发常用英语单词和语句汇总,里面包含web前端开发常用的英语单词和常用语句,掌握好英语对编程有事半功倍的效果,是培训机构达*整理的 -
web前端开发介绍
2021-03-02 21:28:31前端内容介绍 一、什么是前端 应用软件组成:前端+后端 后端负责处理业务逻辑&提供...前端开发是从网页制作演变而来的。 早期的网页制作主要内容都是静态的,以文字图片为主,用户使用网站也以浏览为主。 随着互联网前端内容介绍
一、什么是前端
应用软件组成:前端+后端
后端负责处理业务逻辑&提供数据,任何与用户直接打交道的操作界面都可以称之为前端,主要负责页面展示、与用户交互等等下面都是前端:
- 公司官网(在PC通过浏览器来访问公司网站)
- 移动端网页(在手机上来浏览公司信息、小游戏等)
- 移动端APP(例如:淘宝、去哪儿旅游、携程等)
- 微信小程序(微信最新推出的功能,随用随装,不占用手机空间)。
前端开发是从网页制作演变而来的。
早期的网页制作主要内容都是静态的,以文字图片为主,用户使用网站也以浏览为主。
随着互联网的发展,现代网页更佳美观,交互效果显著,功能更加强大。
因此现在的前端开发的主要技术通常是指html、css、js技术和一些开发框架的使用。
二、前端的发展史(了解)
-
web1.0时代的网页制作
网页制作是web1.0时代的产物,那个时候的网页主要是静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为“牛皮癣”网页。
例如一篇QQ日志、一篇博文等展示性文章。在web1.0时代,用户能做的唯一事情就是浏览这个网站的文字图片内容,这时用户也不能像现在在大多数网站都可以评论交流(缺乏交互性)。
相信可能大多数人都听过“网页三剑客
Dreamweaver+Fireworks+Flash
吧,这个组合就是web1.0时代额产物 -
web2.0
时代的前端开发“前端开发”是从“网页制作”演变而来的。
从2005年开始,互联网进入web 2.0时代,由单一的文字和图片组成的静态网页已经不能满足用户的需求,用户需要更好的体验。
-
在web 2.0时代,网页有静态网页和动态网页。
所谓动态网页,就是用户不仅仅可以浏览网页,还可以与服务器进行交互。举个例子,你登陆新浪微博,要输入账号密码,这个时候就需要服务器对你的账号和密码进行验证通过才行。
web2.0
时代的网页不仅包含炫丽的动画、音频和视频,还可以让用户在网页中进行评论交流、上传和下载文件等(交互性)。这个时代的网页,如果是用“网页三剑客Dreamweaver+Fireworks+Flash
制作的,那是远远不能满足需求。现在网站开发无论是开发难度,还是开发方式上,都更接近传统的网站后台开发,所以现在不再叫“网页制作”,而是叫“web前端开发”。
所以,处于
web2.0
时代的你,如果要学习网站开发技术,就不要再相信所谓的“网页三剑客Dreamweaver+Fireworks+Flash
,因为这个组合已经是上个互联网时代的产物。而且这个组合开发出来的网站问题也非常多,例如代码冗余、网站维护困难(学习到后期,你会知道为什么不用这个组合了
三、为何要学前端开发
我们为什么要学习前端开发,一方面市场对程序员的要求越来越趋于全栈。另外一方面不谋全局者不足以谋一城,也就是说也就是说我们不仅要掌握后端开发的技术还要掌握一定程度的前端开发技术。 通过前面课程的学习,相信大家都已经掌握了Python基础语法、函数、面向对象、网络编程及数据库相关的内容。上面说的那些内容都是属于后端开发范畴的,在接下来的这个章节我们将一起来学习一下前端部分的内容。
四、前端开发学习历程
我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最主要由3部分组成:结构、表现和行为。网页现在新的标准是W3C,目前模式是
HTML
、CSS
和JavaScript
。-
HTML是什么?
HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。
-
css
CSS,全称“(层叠样式表)”。以后我们在别的地方看到“层叠样式表”、“CSS样式”,指的就是CSS。
-
JavaScript
JavaScript是一门脚本语言。
-
前端框架
1、bootstrap
2、JQuery
3、vue
PS:其实框架就是提前给你封装好了很多操作,你只需要按照固定的语法调用即可
**HTML、CSS和JavaScript的区别 **
我们都知道前端技术最核心的是HTML、CSS和JavaScript这三种。但是这三者究竟是干嘛的呢?
-
HTML是网页的结构/骨架,没有任何的样式
-
CSS是网页的外观,给骨架添加各种样式,变得好看
-
JavaScript是页面的行为,控制网页的动态效果
举个栗子,如果我们把前端开发的过程比喻成“建房子”,做一个网页就像盖一栋房子
- 先把房子结构建好(HTML)
- 建好房子之后给房子装修(CSS),例如往窗户安上窗帘、往地板铺上漂亮的瓷砖
- 最后呢,装修完了之后,当夜幕降临的时候,我们要开灯(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
开发。-
浏览器
浏览器在本地也能打开html文件,浏览器就跟解释器一样,从上倒下,从左到右
全球共有五大浏览器厂商,我们主要以chrome为主
ie
chrome
firfox
safri
presto
浏览器内核不同,浏览器渲染引擎不同(后期考虑兼容性问题),其他浏览器都是使用这5款浏览器内核 -
浏览器历史
世界最早浏览器,网景浏览器(Netscape )
后来它想做操作系统,动了微软的奶酪,微软就想弄死他,
微软做的也特别的绝情,微软利用windows操作系统的市场占有率,提供了免费浏览器ie,而且windows操作系统里还必须有。中国最早浏览器ie6,国企内就用ie6,
浏览器不同,解析的标签标准不同,微软太霸道,就不改标准,坚持不更新,后来谷歌和火狐抢占了市场,IE就傻逼了,目前也只有傻子才用IE。。。
市场越发地混乱,于是
w3c
(万维网联盟(World Wide Web Consortium,W3C
))成立,用来制定大家的统一标准须知:学前端一半工作在考虑兼容性,目前html5在兼容性方面解决的比较好
-
文件后缀名规范
.htm
和.html
扩展名的区别-
DOS系统(
win95
或win9
8)下只能支持长度为3的后缀名,所以老版本的系统一直在用.htm
后缀 -
但在windows后缀长度可以大于3位,所以windows下无所谓
htm
与html
,html
是为长文件的格式命名的 -
如果文件后缀是
.htm
,毫无疑问,浏览器也可以兼容,但推荐使用.html
-
七、浏览器窗口输入网址回车发生了几件事?
- 浏览器向服务端发送请求。
- 服务端接受请求(eg:请求百度请求)
- 服务端返回相应的响应(eg:返回一个百度首页)
- 浏览器接受响应,根据特定的规则渲染页面展示给用户看
浏览器可以充当很多服务端的客户端
百度 腾讯视频 优酷视频…
如何做到浏览器能够跟多个不同的客户端之间进行数据交互?
1. 浏览器很牛逼 能够自动识别不同服务端做不同处理 2. 制定一个统一的标准 如果你想要让你写的服务端能够跟客户端之间做正常的数据交互 3. 那么你就必须要遵循一些规则
八、HTTP协议
1. HTTP协议简介
超文本传输协议(英文:
HyperText Transfer Protocol
,缩写:HTTP)是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。2. 作用
- 用来规定服务端和浏览器之间的数据交互的格式
补充说明:
该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问
你就自己跟自己玩 你就自己写客户端 用户想要使用 就下载你专门的app即可
3. HTTP工作原理
HTTP协议定义Web客户端如何从Web服务器请求Web页面,以及服务器如何把Web页面传送给客户端。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求报文,请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应,响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。
以下是 HTTP 请求/响应的步骤:
-
客户端连接到Web服务器
一个HTTP客户端,通常是浏览器,与Web服务器的HTTP端口(默认为80)建立一个TCP套接字连接。例如,http://www.baidu.com。 -
发送HTTP请求
通过TCP套接字,客户端向Web服务器发送一个文本的请求报文,一个请求报文由请求行、请求头部、空行和请求数据4部分组成。 -
服务器接受请求并返回HTTP响应
Web服务器解析请求,定位请求资源。服务器将资源复本写到TCP套接字,由客户端读取。一个响应由状态行、响应头部、空行和响应数据4部分组成。 -
释放连接TCP连接
若connection 模式为close,则服务器主动关闭TCP连接,客户端被动关闭连接,释放TCP连接;若connection 模式为keepalive,则该连接会保持一段时间,在该时间内可以继续接收请求; -
客户端浏览器解析HTML内容
客户端浏览器首先解析状态行,查看表明请求是否成功的状态代码。然后解析每一个响应头,响应头告知以下为若干字节的HTML文档和文档的字符集。客户端浏览器读取响应数据HTML,根据HTML的语法对其进行格式化,并在浏览器窗口中显示。
例如:在浏览器地址栏键入URL,按下回车之后会经历以下流程:
- 浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;
- 解析出 IP 地址后,根据该 IP 地址和默认端口 80,和服务器建立TCP连接;
- 浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求,该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
- 服务器对浏览器请求作出响应,并把对应的 html 文本发送给浏览器;
- 释放 TCP连接;
- 浏览器将该 html 文本并显示内容;
4.四大特性
-
基于请求响应. 向服务端发送请求, 服务端响应客户端请求.
-
基于TCP/IP之上的作用于应用层的协议
-
无状态: 不保存用户的信息
举例:海绵宝宝来了一千次,派大星每次都记不住,每次带她如初见。
拓展:由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术
cookie、session、token...
-
无链接&短链接
请求来一次我响应一次 之后我们两个就没有任何链接和关系.
拓展: 长链接. 之后出现了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方法的区别:
- GET提交的数据会放在URL之后,以?分割URL和传输数据,参数之间以&相连,如
EditPosts.aspx?name=test1&id=123456
. POST方法是把提交的数据放在HTTP包的Body中. - GET提交的数据大小有限制(因为浏览器对URL的长度有限制),而POST方法提交的数据没有限制.
- 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
:锚(跳转到网页的指定锚点位置)
参考资料
-
零基础如何学 Web 前端开发
2021-07-31 16:27:12但是呢,就是有一些可爱的小伙伴私聊问我,零基础如何学 Web 前端开发,有什么建议,指导一下。这可难为我了,说实话这种建议还真不敢说,因为建议好了就把人带到了正确道路了,建议差了就是误人子弟。但是呢,既然... -
web前端开发简介
2022-01-13 16:32:29web前端开发介绍 web网页介绍 网络系统软件开发的两种结构: C/S是客户机(client)/服务器(server) C/S:需要客户端 B/S是浏览器(browser)/服务器 B/S:可在任何地方操作不需要安装专门的软件,维护和升级方便,... -
web前端开发工程师岗位的职责
2021-07-29 06:05:55web前端开发工程师需要与后端开发团队紧密配合,确保代码有效对接,优化前端应用性能。以下是学习啦小编整理的web前端开发工程师岗位的职责。web前端开发工程师岗位的职责1职责:1、负责产品的前端代码开发、页面... -
Web前端开发师必备的8个工具
2021-08-26 17:26:36Web前端开发需要掌握的几个必备技术是: HTML +_CSS核心、JavaScript、VUE框架 前端的应用非常广泛,基本网站、APP、HTML5小程序等都需要前端开发,所以只要是互联网产品基本都需要前端。 前端程序猿切页面写页面,... -
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (模拟试题第二套) 附答案
2020-11-18 21:27:28目录试题一(40分)试题二(30分)试题三(30分)2019年下半年“Web前端开发中级”实操考试评分细则 2020年下半年 Web前端开发中级 实操考试 考生姓名:——————————— 准考证号:—————————— ... -
web前端开发前景如何
2021-07-04 11:35:57web前端开发前景如何?前端是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲,前端工程师使用HTML、CSS、JavaScript等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端、移动端网页,... -
Web前端开发技术第三版课后练习答案
2021-04-28 11:47:43做网站设计、网页界面开发 做网页界面开发 做网页界面开发、前台数据绑定和前台逻辑的处理 设计、开发、数据处理 附:素材 Web前端开发工程师工作内容 web前端工程师在不同的公司,会有不同的职能,但称呼都是类似... -
Web前端开发教程
2022-05-03 23:03:14web前端开发,基于html+css+js,JQuery。 -
web前端开发(一)—HTML基础
2018-07-31 23:41:15web前端简介 什么是HTML? HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、... -
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (模拟试题第四套) 附答案
2020-11-21 13:15:092020年下半年 Web前端开发中级 理论考试 考生姓名:——————————— 准考证号:—————————— 试题一(30分) 试题一(30分) 阅读下列说明、效果图和HTML代码,进行静态网页开发,填写(1)至... -
web前端开发是什么?
2020-01-20 16:13:19web前端开发 1、web即web系统,是以网站的形式呈现,通过浏览器的访问来实现一定的功能的系统。 2、什么是前端开发? 前端开发是创建web页面或app等前端界面呈现给用户的过程。通过html、css、js以及衍生出来的各种... -
Web前端开发薪资待遇及发展前景解读
2022-02-21 10:05:16根据大数据直观显示,2022年,Web前端开发依然是值得大家选择的职业。目前各个企业对于这块的人才稀缺量比较大,可以说这块是有市场的,和其他的行业相比它还没有达到饱和状态,所以说这方面的岗位也是很好求职的。 -
腾讯web前端开发笔试题及答案
2012-05-21 10:10:56腾讯的比较全的一套前端开发的笔试题以及答案,与大家分享 -
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (模拟试题第一套) 附答案
2020-11-18 09:31:582020年下半年 Web前端开发中级 理论考试 考生姓名:——————————— 准考证号:—————————— 试题一(30分) 阅读下列说明、效果图和HTML代码,进行静态网页开发,填写(1)至(10)代码。 ... -
1+X Web前端等级考证 | Web前端开发中级12月最新模拟题 (5套包含理论&实操&答案)
2020-11-14 10:04:04今年是1+X 等级考试试点第二年,2020年1+X Web前端开发考试第一批在10月17号已经考了,今年的第二批将在12月进行… 下面是研究这方面的人给出的模拟题,考前做一做,考试不慌慌!根据前几批考的真题来看,有时候选择还... -
第1章 Web前端开发基础.docx
2022-06-19 13:04:06第1章 Web前端开发基础.docx第1章 Web前端开发基础.docx第1章 Web前端开发基础.docx第1章 Web前端开发基础.docx第1章 Web前端开发基础.docx第1章 Web前端开发基础.docx第1章 Web前端开发基础.docx第1章 Web前端开发... -
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (模拟试题第三套) 附答案
2020-11-19 07:51:272020年下半年 Web前端开发中级 理论考试 考生姓名:——————————— 准考证号:—————————— 试题一(30分) 阅读下列说明、效果图和代码,进行静态网页开发,填写(1)至(15)代码,每空2分。 ...