Web前端開發職業技能等級標準解讀(2021年2.0版)標準設計思路標準解析書證融通標準修訂說明01前端發展趨勢互聯網+

多屏融合移動互聯網

自適應 大前端響應式全棧開發

前后端分離(RESTful

API)

前端工程化互聯網+移動互聯網多屏融合自適應響應式大前端全棧開發前后端分離(RESTful

API)前端工程化Web崗位招聘要求1

、學歷要求專科、本科2

、崗位要求精通HTML

5

、CSS3

、ECMA2015

標準，熟悉Less、Sass。精通HTML、CSS、Java

Script、Ajax等開發技術，能夠精準還原視覺設計稿以及交互動效，熟悉Java、PHP等服務器端語言。熟練使用j

Query、Bootstrap等應用框架。熟悉SVG、Canvas、Three.js、Web

GL等相關技術。了解一種流行前端框架，如VUE、React、Angular等。掌握一種前端工程化構建工具：Webpack

或Gulp。熟悉一種包管理器：Npm

或Bower。熟悉Node.js，能利用Node.js開發。熟練PHP及各主流框架(如：Laravel,Think

PHP,Yii等)。具有扎實的Java基礎，精通Java

EE、Web

Service、XML、SSM框架等編程技術。熟悉一種以上的WebLogic/Web

Sphere/Tomcat/JBoss/Nginx/XAMPP等主流服務器。熟悉My

SQL、SQL

Server、Oracle、DM

8

等數據庫操作和編程。Web崗位招聘要求3

、設計要求掌握面向對象編程思想，對表現與數據分離有深刻理解，會使用React/Angular/Vue等主流前端MVVM框架進行開發。熟悉MVC開發框架，能夠選擇前端框架。能熟悉RESTful

API，并進行API設計。理解Web標準，對前端工程化、模塊化、可維護性、高性能等有一定的理解和實踐。能根據項目需求，進行網站架構設計，兼顧網站性能優化。4

、測試要求熟悉各種瀏覽器的兼容性調試，能使用瀏覽器控制臺調試程序。熟悉常用測試工具的使用，能協助進行產品功能和接口測試。熟悉軟件測試理論，熟練掌握JUnit單元測試、mock測試等。Web主流技術棧AngularJSPHPJava.NETPythonReact.jsMySQLSQL

ServerOracle

DM8NoSQLNode.jsExpressnpmXAMPPWAMPServerApacheHBuilderSublime

TextWebStormEclipse-jeeVue.jsHTMLHTML5JavaScriptjQueryCSSCSS3Bootstrap標準總體設計圖形繪制靜態網站制作CSS預處理

ES9Vue.js靜態網站制作Bootstrap響應式開發Ajax/JSON靜態網站制作HTMLHTML5CSSCSS3網站架構設計RESTful

API

接口開發Node.js應用網站性能優化ExpressNPM代碼 資源WebpackJavaScript網頁編程jQuery應用MySQL操作動態網站制作PHP+框架

(Laravel/ThinkPHP)Java+框架

(SSM)02職業技能等級劃分Web前端開發職業技能等級分為三個等級：初級、中級、高級，三個級別依次遞進，高級別涵蓋低級別職業技能要求。網站架構設計，接口開發，性能優化高級開發動態網站中級開發靜態網站初級職業技能等級要求描述標準工作領域工作任務職業技能要求初級1.靜態網站制作4項16條2.JavaScript網頁編程3項13條3.輕量級前端框架應用3項10條中級1.靜態網站制作3項11條2.MySQL數據庫操作3項12條3.PHP動態網站制作4項15條4.Java動態網站制作PHP與Java二選一4項15條高級1.靜態網站制作4項18條2.Node.js高性能服務器應用4項14條3.網站架構設計3項10條4.網站性能優化3項12條靜態網站制作HTML、HTML5、CSS、CSS3JavaScript網頁編程JavaScript基礎編程、面向對象編程、DOM操作、事件輕量級前端框架應用jQuery基礎編程、動畫、jQuery插件初級主要面向IT互聯網企業、互聯網轉型

的傳統型企事業單位、政府部門等信

息化數字化部門，從事靜態網頁開發、網頁編程、靜態網站制作等工作，能

根據視覺和交互原型要求開發靜態網

站。初級

–

靜態網站制作工作領域工作任務職業技能要求1.靜態網站制作HTML靜態網頁開發能使用HTML文檔聲明標簽、頭部標簽、主體標簽等構建網頁基本結構。能使用文本標簽、圖像、列表、表格、表單等搭建靜態網頁。能使用超鏈接完成頁面跳轉。能使用iframe標簽嵌入子窗口頁面。1.2

HTML5靜態網頁開發能使用HTML5語義化元素搭建頁面主體結構。能使用HTML5新增全局屬性、頁面增強元素、表單等制作靜態網頁。能使用HTML5多媒體元素在網頁中播放音頻和視頻。能使用HTML5新特性制作移動端靜態網頁。1.3

CSS網頁設計能使用CSS選擇器獲取網頁元素。能使用CSS單位、字體樣式、文本樣式、顏色、背景等美化頁面樣式。能使用CSS盒模型、區塊、浮動、定位等設計網頁布局。1.4

CSS

3網頁設計能使用CSS3新增選擇器獲取網頁元素。能使用CSS3邊框、顏色、字體、盒陰影、背景、漸變等新特性美化頁面樣式。能使用CSS3動畫、過渡等完成網頁動態效果。能使用CSS3多列布局、彈性布局等設計網頁布局。能使用2D、3D轉換完成網頁元素的旋轉、平移、縮放和傾斜效果。初級

–

JavaScript網頁編程工作領域工作任務職業技能要求2.JavaScript網頁編程JavaScript基礎編程能在網頁中正確引入JavaScript腳本。能使用JavaScript基本語法、編碼規范、數據類型、變量、運算符、流程控制語句等編寫JavaScript程序。能使用JavaScript中的函數完成代碼的封裝和復用。能使用JavaScript中的數組進行數據的存取操作。能使用瀏覽器控制臺調試JavaScript程序。2.2

JavaScript面向對象編程能掌握面向對象程序設計的方法。能使用字面量方式創建JavaScript對象。能使用構造函數方式創建JavaScript對象。能使用原型鏈等原生方式開發網頁。2.3

JavaScript交互效果開發能使用Window對象操作瀏覽器。能使用DOM對象操作網頁元素。能使用JavaScript修改網頁元素樣式。能使用JavaScript事件響應用戶的交互操作。初級

–

輕量級前端框架應用工作領域工作任務職業技能要求3.輕量級前端框架應用jQuery基礎編程能在網頁中引入jQuery。能使用jQuery操作網頁元素。能使用jQuery修改網頁元素樣式。能使用jQuery事件響應用戶的交互操作。3.2

jQuery動態效果開發能使用jQuery基本動畫為頁面添加動態效果。能使用jQuery自定義動畫為頁面添加動態效果。能使用jQuery動畫的取消、延遲等控制網頁動態效果。3.3

jQuery插件應用能在網頁中引入jQuery插件。能使用常用的jQuery插件進行網頁的快捷開發。3.2.3能使用jQuery

UI插件開發交互效果頁面。初級關于flex說法錯誤的是(

)。A、設置flex布局以后，子元素的float和clear等樣式全部失效

B、任何一個容器都可以使用flex彈性布局C、設置flex:1無意義

D、flex是彈性布局考核知識和技能：彈性布局flex屬性float、clear單選題在JavaScript中alert("11">"2")的運行結果正確的是(

)。A、TB、FC、trueD、false考核知識和技能：BOMalert()字符串比較運算符單選題初級實操試題：【問題】（

28分，每空2分）這是某購物網站首頁頁面局部效果。當鼠標懸停到導航文字上時，背景色會變為紅色。現在我們需要編寫該網站效果圖部分代碼。進行靜態網頁開發，補全代碼：1、打開“考生文件夾\60002\shopping”文件夾中的文件“index.html”，在空（1）至（5）處填入正確的內容，完成后保存文件“index.html”。2、打開“考生文件夾\60002\shopping\css”文件夾中的文件“style.css”，在空（6）至（14）處填入正確的內容，完成后保存文件“style.css”。初級實操試題：主要技能靜態網站制作Bootstrap、響應式網頁開發、調用RESTful

API、AjaxMySQL數據庫操作MySQL安裝、SQL編程、MySQL數據庫維護(備份、恢復)動態網站制作：二選一PHP動態網站搭建：PHP基礎編程、PHP

Web、數據庫編程、框架(Laravle或ThinkPHP)Java動態網站搭建：Java基礎編程、Java

Web、數據庫編程、框架(SSM)中級主要面向IT互聯網企業、互聯網轉型的傳統型企事業單位、政府部門等的信息化數字化部門，從事響應式網頁開發、Web前后端數據交互、數據庫開發與管理、動態網站搭建等工作，能根據網站開發需求開發動態網站。中級

–

靜態網站制作工作領域工作任務職業技能要求1.靜態網站制作Bootstrap前端框架應用能在頁面中引入Bootstrap前端框架。能使用Bootstrap前端框架的布局、柵格系統搭建網頁基本結構。能使用Bootstrap前端框架的基本樣式美化網頁。能使用Bootstrap前端框架的組件進行快捷開發。1.2響應式網頁開發能分析響應式頁面的結構和布局特性。能使用HTML5、CSS3、彈性布局Flex等開發響應式頁面。能使用Bootstrap前端框架開發響應式頁面。1.3

Web前后端數據交互能理解RESTful

API設計規范，并調用API。能熟練使用Ajax中的XML、JSON數據格式與網站后端進行數據交互。能使用Ajax完成異步刷新、異步獲取數據。能使用XMLHttpRequest或jQuery完成Ajax異步操作。中級

–

MySQL數據庫操作工作領域工作任務職業技能要求2.MySQL數據庫操作MySQL安裝能安裝MySQL數據庫。能進行MySQL數據庫的配置。能啟動MySQL服務并登錄MySQL數據庫。2.2

SQL編程能使用SQL語句創建、修改、刪除數據庫。能使用SQL語句創建表、復制表結構、刪除表、設置約束、設置自增型字段、修改表、修改字段、修改約束條件、修改表名。能使用SQL語句創建索引、刪除索引。能使用SQL語句插入、修改、刪除數據。能使用SQL語句進行數據的查詢。能使用事務、存儲過程、觸發器、視圖等進行數據管理。2.3

MySQL數據庫維護能正確備份數據庫。能正確恢復數據庫。能查詢數據庫日志。中級

–

PHP動態網站搭建工作領域工作任務職業技能要求3.PHP動態網站制作1PHP基礎編程能搭建和配置PHP開發環境。能使用PHP的基本語法、編碼規范、數據類型、變量與常量、運算符、輸入輸出、流程控制語句、函數、數組等編寫腳本程序。能使用PHP的類和對象、繼承、接口、抽象類等編寫可復用的程序。3.2

PHP

Web編程能在網頁中嵌入PHP腳本代碼。能使用PHP進行頁面跳轉。能使用PHP超級全局變量進行網頁編程。能使用PHP操作Session和Cookie。3.3

PHP數據庫編程能掌握PHP常用數據庫的操作方法。能根據數據庫類型選擇數據庫編程組件。能編寫預處理SQL語句完成數據庫操作。能使用PHP編程完成MySQL數據庫的新增、修改、刪除和查詢操作。3.4

PHP框架應用能應用MVC程序設計的方法。能使用PHP

MVC框架的路由、控制器、模板完成動態頁面開發。能使用PHP

MVC框架完成MySQL數據庫的新增、修改、刪除和查詢操作。能根據項目特點，使用Laravel或Think

PHP框架構建動態網站2

。中級

–

Java動態網站搭建工作領域工作任務職業技能要求4.Java動態網站制作1Java基礎編程能搭建和配置Java開發環境。能使用Java的基本語法、編碼規范、數據類型、變量與常量、運算符、輸入輸出、流程控制語句、函數、數組與集合等編寫控制臺程序。能使用Java的類和對象、繼承、接口、抽象類等編寫可復用的程序。4.2

Java

Web編程能使用JSP腳本語法編寫JSP頁面。能使用Servlet技術編寫Java

Web服務器端程序。能使用Java操作Session和Cookie。能使用JSP和Servlet技術進行動態網站編程。4.3

Java數據庫編程能掌握Java常用的數據庫操作方法。能根據數據庫類型選擇數據庫編程組件。能編寫預處理SQL語句完成數據庫操作。能使用Java編程完成MySQL數據庫的新增、修改、刪除和查詢操作。4.4

Java框架應用能使用Spring框架構建Java

Web動態網站。能使用Spring

MVC框架構建動態網站。能使用MyBatis框架完成MySQL數據庫的新增、修改、刪除和查詢操作。能整合Spring、MyBatis和Spring

MVC框架構建動態網站。中級下列MySQL語句正確的有（ ）。A、創建視圖的命令是create

viewB、創建存儲過程的命令是create

procedureC、創建觸發器的命令是create

triggerD、刪除以上對象的命令是delete考核知識和技能：1、視圖2、存儲過程3、觸發器多選題下列PHP代碼輸出的結果是（

）A、012345B、01234C、12345D、1234考核知識和技能：1、變量2、運算符3、for循環4、echo單選題在JDBC

API中，下列哪個接口或類用于連接數據庫（

）A、ResultSetB、ConnectionC、StatementD、DriverManager考核知識和技能：1、Java數據庫編程2、JDBC單選題中級實操試題：【問題】（

20分，每空2分）酒類商品的分類信息頁面，項目采用Bootstrap框架構建，分類信息界面使用導航和柵格系統布局，PC端和移動端能夠自適應顯示，內容分為三部分。打開“考生文件夾\40013”中的素材，閱讀說明并參考效果圖，進行靜態網頁開發。在編號（1）至（10）處填寫正確代碼，操作完成后保存當前文件。中級實操試題：主要技能靜態網站制作網頁圖形繪制(Canvas、SVG)、CSS預處理語言編程(Less、Sass)、ES9、Vue.jsNode.js高性能服務器應用Node.js安裝、Node.js模塊和包管理、Node.js服務器創建、Express框架應用網站架構設計前端架構設計、RESTful

API接口設計、網站接口開發高級主要面向IT互聯網企業、互聯網轉型的傳

統型企事業單位、政府部門等的信息化數字化部門，從事網站規劃與建設、前端框架搭建、高性能服務器搭建、前端架構設計、網站接口開發、網站性能優化等工作，能根據網站開發需求，設計網站架構，管理和實施網站建設開發方案。網站性能優化靜態網頁代碼優化、前端資源優化、Webpack網站資源打包工作領域工作任務職業技能要求1.靜態網站制作網頁圖形繪制能使用Canvas繪制圖表、動畫。能創建SVG二維矢量圖形。能使用圖形美化網頁。1.2

CSS預處理語言編程能使用Less的基本語法編寫網頁樣式。能使用Sass的基本語法編寫網頁樣式。能將Less和Sass代碼編譯成CSS代碼。能使用Less和Sass定制和優化Bootstrap前端框架。1.3

ES

9編程能使用let和const關鍵字聲明變量和常量。能使用ES

9解構賦值進行變量的賦值。能使用ES

9的函數擴展、數組擴展、對象擴展等編寫JavaScript程序。能使用ES

9模塊封裝和復用代碼。能使用ES

9構建前端程序。1.4

Vue.js前端框架應用能引入Vue.js前端框架。能使用Vue.js的基礎語法、組件、路由等構建用戶界面。能使用常用UI庫美化網頁。能使用Vuex管理用戶狀態。能使用Axios與服務器端通信。能使用Vue

CLI構建前端頁面。高級

–

靜態網站制作高級

–

Node.js高發能服務器應用工作領域工作任務職業技能要求2.Node.js高性能服務器應用Node.js安裝能安裝Node.js。能配置Node.js運行環境。能使用Node.js交互模式運行JavaScript代碼。2.2

Node.js模塊和包管理能使用模塊封裝代碼。能使用JavaScript腳本引入模塊。能使用NPM管理包和模塊。2.3

Node.js服務器創建能使用Node.js的異步編程、異步I0、事件循環構建高性能服務器。能使用HTTP模塊創建Web服務器并監聽端口。能使用HTTP模塊接收用戶的HTTP請求。能使用HTTP模塊設置HTTP請求響應。2.4

Express框架應用能引入Express框架。能使用Express框架創建Web服務器并監聽端口。能使用中間件、路由響應HTTP請求。2.3.4能使用Express腳手架搭建網站。高級

–

網站架構設計工作領域工作任務職業技能要求3.網站架構設計前端架構設計能根據網站需求，設計網站架構。能根據網站項目特點選擇MVC、MVVM等前端開發模型。能根據網站項目特點設計前后端分離架構的API。能根據網站項目特點設計前端組件。3.2

RESTful

API接口設計能使用API設計原則設計可用、易用、可維護的API。能使用RESTful

API設計跨平臺跨語言的數據接口。能閱讀和編寫RESTful

API接口文檔。3.3網站接口開發能根據項目實際接口設計，選用適當的編程語言開發接口。能根據RESTful

API接口規范和設計，選用適當的編程語言開發接口。能使用瀏覽器或其他工具測試接口。高級

–

網站性能優化工作領域工作任務職業技能要求4.網站性能優化靜態網頁代碼優化能分析HTML、CSS、JavaScript代碼結構。能運用文檔結構規范、HTML代碼書寫規范、HTML5新特性等優化HTML代碼。能運用瀏覽器樣式重置、CSS樣式優先級、CSS3新特性、CSS去冗余、CSS瀏覽器兼容性等優化CSS代碼。能運用JavaScript代碼合并、JavaScript文件加載、DOM操作等優化JavaScript代碼。4.2前端資源優化能使用圖片壓縮技術優化網站圖片。能使用代碼壓縮工具優化網站代碼。能使用HTTP緩存優化前端資源加載。4.3.4能使用預加載和懶加載技術優化前端資源加載。4.3

Webpack網站資源打包能安裝和配置Webpack。能使用Webpack分析項目結構。能使用Webpack將JavaScript模塊及其他瀏覽器不能直接運行的拓展語言打包為合適的格式以供瀏覽器調用。能使用Webpack的Entry入口、Output出口、Loader、Plugin插件、Module模塊等技術打包網站資源。高級考核知識和技能：1、canvas2、SVG3、querySelector4、queryString單選題關于HTML5說法錯誤的是（

）A、canvas元素用于在網頁上繪制圖形

B、SVG表示可縮放矢量圖形C、querySelector的功能類似于jQuery的選擇器

D、queryString是HTML5查找字符串的新方法考核知識和技能：1、模塊2、HTTP模塊3、Node.js服務器創建多選題在Node.js環境下，使用http模塊創建http

server，需要調用以下哪些函數（

）A、http.createClientB、http.createServerC、http.Server.listenD、http.get高級實操試題：【問題】（

30分，每空2分）使用Vue創建美食網項目如圖1所示。要求單擊菜品將其添加進購物車，購物車菜品數量自動更新，并計算出購物車菜品的總價格和總數量。購物車清單頁面如圖2所示。高級實操試題：【問題】（

30分，每空2分）打開“考生文件夾\20011\food-page”中的素材，閱讀說明并參考效果圖，進行靜態網頁開發。在編號（

1

）至（

15

）處填入正確代碼，操作完成后保存當前文件。打開“考生文件夾\20011\food-page\src”文件夾中的“App.vue”文件，在編號（

1

）處填入正確代碼，完成后保存當前文件。打開“考生文件夾\20011\food-page\src\components”文件夾中的“Header.vue”文件，在編號（

2

）至（

4

）處填入正確代碼，完成后保存當前文件。打開“考生文件夾\20011\food-page\src\router”文件夾中的“index.js”文件，在編號（

5

）處填入正確代碼，完成后保存當前文件。打開“考生文件夾\20011\food-page\src\store”文件夾中的“index.js”文件，在編號（

6

）、（

7

）處填入正確代碼，完成后保存當前文件。打開“考生文件夾\20011\food-page\src\components”文件夾中的“Food

Home.vue”文件，在編號（

8

）、（

9

）處填入正確代碼，完成后保存當前文件。打開“考生文件夾\20011\food-page\src\components”文件夾中的“Cart.vue”文件，在編號（

10

）至（

15

）處填入正確代碼，完成后保存當前文件。高級實操試題：主要技能03專業課程、企業崗位、標準關系不同級別對應人才結構技能等級（Web前端開發：初級、中級、高級）專業方向(人才培養方案)軟件技術計算機應用技術網絡技術大數據技術不同工作領域對應企業就業崗位前端開發工程師小程序開發工程師全棧開發工程師開發工程師(PHP、Java等)證書知識地圖項目實踐就業(持證上崗)適用院校專業中等職業學校高等職業學校本科學校電子信息技術、物聯網技術應用、電子技術應用、計算機應用、計算機網絡技術、軟件與信息服務、數字媒體技術應用、移動應用技術與服務、網站建設與管理、計算機平面設計、現代通信技術應用、界面設計與制作等專業。電子信息工程技術、物聯網應用技術、移動互聯應用技術、智能產品開發與應用、計算機應用技術、計算機網絡技術、軟件技術、數字媒體技術、大數據技術、云計算技術應用、信息安全技術應用、人工智能技術應用、移動應用開發、智能互聯網絡技術、電子商務、智能物流技術、數字圖文信息處理技術、數字廣播電視技術、司法信息技術等專業。職教本科電子信息工程技術、物聯網工程技術、計算機應用工程、網絡工程技術、軟件工程技術、數字媒體技術、大數據工程技術、人工智能工程技術、電子商務、電子信息工程等專業。應用型本科電子信息科學與技術、電子信息工程、電子科學與技術、計算機科學與技術、軟件工程、數字媒體技術、數據科學與大數據技術、信息管理與信息系統等專業。