前端在線編譯網站
1. 怎麼製作自己的網頁
初級前端
主要學習三個部分：HTML，CSS，javaScript
到招聘網站，參考任聘要求，准沒錯，舉例如下：
1.精通html和css，能製作符合W3C標準的靜態頁面；
2.精通JavaScript編程，對面向對象編程思想有深刻理解；
3.精通主流Javascript庫/框架jQuery；
4.理解並掌握JavaScript語言核心技術DOM、BOM有Javascript性能優化經驗；
5.對瀏覽器兼容性有深入的研究，精通各種瀏覽器問題 ；
6.了解Backbone.js、AngularJs等MVC框架並有實際項目開發經驗；
7.了解http://asp.net等伺服器後台技術和擁有一定的C#編程能力者優先；
8.對交互體驗、可用性、用戶體驗有一定程度的理解；
9.有良好的責任心和團隊合作能力、能承受較大的壓力；
自己動手搜索下吧，確定目標和方向，以上是個人路線，僅供參考。
2. Webpack，Browserify和Gulp三者之間到底是怎樣的關系
怎麼解釋呢？因為 Gulp 和 browserify / webpack 不是一回事
Gulp應該和Grunt比較，他們的區別我就不說了，說說用處吧。Gulp / Grunt 是一種工具，能夠優化前端工作流程。比如自動刷新頁面、combo、壓縮css、js、編譯less等等。簡單來說，就是使用Gulp/Grunt，然後配置你需要的插件，就可以把以前需要手工做的事情讓它幫你做了。
說到 browserify / webpack ，那還要說到 seajs / requirejs 。這四個都是JS模塊化的方案。其中seajs / require 是一種類型，browserify / webpack 是另一種類型。
seajs / require : 是一種在線"編譯" 模塊的方案，相當於在頁面上載入一個 CMD/AMD 解釋器。這樣瀏覽器就認識了 define、exports、mole 這些東西。也就實現了模塊化。
browserify / webpack : 是一個預編譯模塊的方案，相比於上面 ，這個方案更加智能。沒用過browserify，這里以webpack為例。首先，它是預編譯的，不需要在瀏覽器中載入解釋器。另外，你在本地直接寫JS，不管是 AMD / CMD / ES6 風格的模塊化，它都能認識，並且編譯成瀏覽器認識的JS。
這樣就知道，Gulp是一個工具，而webpack等等是模塊化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。
不知道這樣夠清楚了么
3. 2020年Web前端自學之路指南
今天小編要跟大家分享的文章是關於2020年Web前端自學之路指南。許多人可能跟著網路上的各種教程就入了前端這行的門，但大多數都只是機械的學習著資料中的內容。俗話說，選擇要比努力重要。那麼學習開發，首先應該要有一個清晰的學習路線。希望這篇文章，能為大家在選擇未來的發展方向時提供一些參考和幫助。下面來和小編一起看一看吧！
1、基礎學習
●HTML+CSS基礎：
HTML進階、CSS進階、div+css布局、排版、html+css整站開發，樣式美化和瀏覽器兼容
●JavaScript基礎：
掌握Js基本語法、條件、語句和循環、js內置對象常用方法、ECMAscript、DOM、BOM、定時器和焦點圖，並學習增強邏輯的常用演算法，實現木馬、拖放、放大鏡等常見的網路特效。
●JavaScript高級特性：
正則表達式與JSON、正則表達式案例、JavaScript原理與庫封裝、閉包、函數節流、作用域鏈、面向對象基礎、事件與運動框架封裝
●JQuery基礎使用：
DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI組件的基本使用，開發復雜的交互功能和效果，並能熟悉JQuery的插件開發機制。
2、HTML5+CSS3和移動Web開發
●HTML5：
HTML5新語義標簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、WebSocket
●CSS3：
CSS3新選擇器、偽元素、顏色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果製作、Velocity.js框架、元素進場、出場策略、炫酷CSS3網頁製作
●圖像學：
Canvas、Canvas游戲、數據可視化、Heighcharts.js
●Bootstrap：
響應式概念、媒體查詢、響應式網站製作、刪格系統、刪格系統原理、Bootstrap常用模板、LESS和SASS
●移動Web開發：
跨終端WEB和主流設備簡介、流式布局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、Zepto.js、商城頁面、滾屏
3、HTTP服務和AJAX編程
●WEB伺服器基礎：
伺服器基礎知識、Apache伺服器和其他WEB伺服器介紹、Apache伺服器搭建、HTTP介紹
●PHP基礎：
PHP基礎語法，使用PHP處理簡單的GET/POST請求
●AJAX上篇：
Ajax簡介和非同步的概念、Ajax框架的封裝、XMLHttpRequest對象詳細介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問題、XML介紹和使用
●AJAX下篇：
JSON和JSON解析、數據綁定和模板技術、JSONP、跨域技術、圖片預讀取和lazy-load技術、JQuery框架中的AjaxAPI用法、使用Ajax實現瀑布流案例
4、面向對象進階
●面向對象終極篇：
從內存角度到理解JS面向對象、基本類型、復雜類型、原型鏈、ES6中的面向對象、屬性讀寫許可權、設置器、訪問器
●面向對象三大特徵：
繼承性、多態性、封裝性、介面
●設計模式：
面向對象編程思維、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程
5、封裝一個屬於自己的框架
●框架封裝基礎：
事件流、冒泡、捕獲、事件對象、事件框架、選擇框架
●框架封裝中級：
運動原理、單物體運動框架、多物體運動框架、運動框架面向對象封裝
●框架封裝高級和補充：
JQuery框架雛形、可擴展性、模塊化
6、模塊化組件開發
●面向組件編程：
面向組件編程的方式、面向組件編程的實現原理、面向組件編程實戰、基於組件化思想開發網站應用程序
●面向模塊編程：
AMD設計規范、CMD設計規范、RequireJS，LoadJS、淘寶的SeaJS、CommonJS、ES6Moles
7、工程化&構建、主流的框架
●Web開發工作流：
GIT/SVN、Yeoman腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack、打包案例
●MVC/MVVM/MVW框架：
Vue.js、React、Angular.js、Backbone.js、Knockout/Ember、項目驅動
8、Node.js全棧開發
●快速入門：
Node.js發展、生態圈、Io.js、Linux/Windows/OS
X環境配置、REPL環境和控制台程序、非同步編程，非阻塞I/O、模塊概念，模塊管理工具、開發流程，調試，測試;掌握node.js全棧的解決方案和在伺服器端JS高效開發
●核心模塊和對象：
全局對象global，process，console，util、事件驅動，事件發射器、加密解密，路徑操作，序列化和反序列化、文件流操作、HTTP服務端與客戶端、Socket.IO
●Web開發基礎：
HTTP協議，請求響應處理過程、關系型資料庫操作和數據訪問、非關系型資料庫操作和數據訪問、原生的Node.js開發Web應用程序、Web開發工作流、Node.js開發Blog案例。
●快速開發框架：
Express簡介+MVC簡介、Express常用API、Express路由模塊、Jade/Ejs模板引擎、使用Express重構Blog案例、Koa等其他常見MVC框架。
●資料庫：
mongoose/mongoDB、MYsql
●Node.js開發電子商務實戰：
需求與設計、賬戶模塊注冊登錄、會員中心模塊、前台展示模塊、購物車，訂單結算、在線客服即時通訊模塊
9、微信系列
●微信公眾號
JS-SDK配置、定製菜單、回調、定製分享內容、掃一掃、地理位置、微信音頻、圖像、語音識別功能、伺服器端curl
庫、支付、卡券、微店、微信開發模式與公眾號分析、統計分析
●微信小程序
小程序項目、uni-app、mpvue
10、移動APP(Web/Native/Hybrid)
●ReactNative簡介、ReactNative環境配置、創建項目，配置，編譯，調試，部署發布、原生模塊和UI組件、原生常用API
●Ionic簡介和同類對比、模板項目解析、常見組件及使用、結合Angular構建APP、常見效果(下拉刷新，上拉載入，側滑導航，選項卡)
11、其他
●職業素養
溝通表達、團隊合作、目標管理、時間管理、心態管理
●就業指導
簡歷&投遞技巧、面試&筆試技巧
12、推薦一些編程學習網站
01、嗶哩嗶哩
這個網站如果讓我評價，可謂是上邊的視頻都是非常高質量的，你可以去搜索看一下。
02、菜鳥教程
這個網站雖然不是視頻網站，一聽名字就知道適合菜鳥的，但是基礎的知識寫的非常詳細，很清晰易懂，非常適合剛開始學習編程的小夥伴。
03、W3School
之前剛開始學WEB開發時，經常在該網站，就是結合w3school學習前端，開發時，如果遇到記不清的標簽，就去w3school搜索，平常有時間，就來慕課看前端視頻。
類似這樣的學習網站還有很多，該開始入門的話上面的網站足矣。其他的網站推薦還有騰訊課堂、實驗樓、果殼MOOC學院等、知乎、掘金......
以上就是小編今天為大家分享的關於2020年Web前端自學之路指南的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助，想要了解更多Web前端知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師。
文章來源：原創前端猿前端猿指北
4. Web前端開發工程師要掌握的前端開發工具
今天小編要跟大家分享的文章是關於Web前端開發工程師要掌握的前端開發工具。市面上有許多前端開發工具可以加速Web開發工作。本文是對Web
開發工具的一次精選匯總，分別介紹了每款工具的關鍵特性，並已附上下載鏈接。下面來和小編一起看一看吧！
1.NoviBuilder
NoviBuilder是一個拖放式構建器，它對於經驗豐富的Web
開發人員而言是一個不錯的選擇。它為開發人員提供了訪問源代碼的許可權，並允許開發人員在Web設計中進行多項更改。你能用它完全控制你的Web
項目，並且可以充分利用它的各項功能。盡管這款工具對於初學者來說可能很難入門，但在它的眾多優勢面前這一不足也就不值一提了。
特性：
·高級代碼編輯器
·附加應用集成
·多種預制主題
·拖放界面
·電商功能支持
·預覽工具
下載鏈接：
#/
2.ONESubscription
ONESubscription是一款很有用的Web
開發工具包，包含了眾多高質量的數字產品。它提供了大批高品質的部件，可以打造出功能完善的博客、在線商店、登錄頁面等各種網站。總的來說，它能為你提供數以千計的主題和模板、多種插件和圖形元素、附加服務以及其他許多好處。
特性：
·對所有部件提供專業支持
·定期更新
·安全性(如果你訂閱後尚未從資料庫中下載任何內容，則可以在訂閱開始後的14天內輕松取消訂閱)
·無使用限制的年度許可證
·很多有用的服務(例如模板定製或安裝)
下載鏈接：
#/
3.CreativeTim
CreativeTim提供了基於Bootstrap的設計元素，可幫助開發者加快開發工作。這款工具可以用來創建Web和移動應用。
特性：
·提供了最簡單的開發上手途徑，也就是預制的示例頁面;
·這款工具可以幫助你節省時間，並且讓你專注於業務模型;
·提供易於使用的管理模板
·管理面板可幫助你節省大量時間
·提供預制的設計塊和元素
訂閱鏈接：
#/2JMju8g
4.Npm
Npm是JavaScript的Node包管理器。開發人員可以用它尋找可重用的軟體包，然後用各種方式將這些包組合出強大的產品。這款Web
開發工具是一個命令行實用程序，用來與軟體包的存儲庫交互。
特性：
·在存儲庫中發現並重用超過470,000個免費代碼包
·在團隊內鼓勵代碼發現和重用
·發布和控制名稱空間的訪問許可權
·使用相同的工作流程管理公共和私人代碼
下載鏈接：
#/
5.TypeScript
TypeScript是一種開源前端腳本語言。它是JavaScript
的嚴格語法超集，添加了可選的靜態類型。它是專門為開發大型應用程序而設計的，並可以編譯為JavaScript。
特性：
·TypeScript支持其他JS庫
·可以在任何運行JavaScript的環境中使用Typescript
·它支持包含現有JavaScript庫的類型信息的定義文件，例如C/C++頭文件;
·可跨瀏覽器、設備和操作系統移植;
·它可以在任何運行JavaScript的環境中運行
下載鏈接：
#/index.html#download-links
6.CodeKit
Codekit是一款前端Web開發工具。它可以支持開發人員更快地構建網站，它可以合並JS代碼、對JS代碼進行瘦身，還能檢查
JavaScript代碼的語法，它還可以優化圖像。
特性：
·注入CSS更改而無需重新載入整個頁面
·合並腳本以減少HTTP請求。
·瘦身代碼以減小文件大小
·自動正確處理大多數語言
下載鏈接：
#/
7.WebStorm
WebStorm為JavaScript提供了智能編碼輔助。它為Angular、React.js、Vue.js和Meteo
提供了高級編碼輔助，它還可以幫助開發人員在處理大型項目時提升編程效率。
特性：
1.WebStorm幫助開發人員在處理大型項目時提升效率
2.它提供了一些內置工具，用於調試、測試和跟蹤客戶端和Node.js應用程序;
3.它與流行的Web開發命令行工具集成
4.Spy-js內置工具可用來跟蹤JavaScript代碼
5.它提供了一個統一的UI，能夠與許多流行的版本控制系統協作;
6.可以高度定製，以完美適應各種編碼風格;
7.它為客戶端代碼和Node.js應用提供了內置的調試器
下載鏈接：
#/Webstorm/download/#section=windows
8.HTML5Boilerplate
HTML5Boilerplate幫助開發人員構建響應快、健壯和適應性強的Web應用或網站。它是一組可下載的文件，它提供了一個十分完善的
HTML模版，完善到所有的頁面似乎都應該遵守這個規則。
特性：
·它讓開發人員可以使用HTML5元素
·它的設計遵從漸進增強原則
·它的Normalize.css可用於CSS規范化，還提供了常見的錯誤修復;
·它提供了Apache伺服器配置以提高性能和安全性
·它提供了GoogleUniversalAnalytics代碼段的優化版本
·它可以防止控制台語句在較舊的瀏覽器中導致JavaScript錯誤
·提供大量內聯和隨附文檔
下載鏈接：
#/
9.AngularJS
AngularJS是前端開發人員的另一款必備工具。它是一個開放源代碼的Web應用程序框架，它能幫助開發人員擴展Web應用程序的HTML
語法，它還提供了可訪問、可讀和表達性強的開發環境，從而簡化了前端開發流程。
特性：
·它是一個開源項目，完全免費，並被全球成千上萬的開發人員使用;
·它提供了創建RICH互聯網應用的能力
·它提供了基於MVC使用JavaScript編寫客戶端應用程序的選項
·它會自動處理JavaScript代碼，使其兼容各種瀏覽器。
下載鏈接：
#/
10.Sass
Sass是最可靠、最成熟也是最強大的CSS擴展語言。這款工具可用來輕松擴展站點現有CSS的功能，例如變數、繼承和嵌套等。
特性：
·使用它的前端工具編寫任何代碼都非常簡單明了
·支持語言擴展，例如變數、嵌套和混合(mixins);
·提供了用於處理顏色和其他值的許多有用函數
·高級功能，例如庫的控制指令;
·它提供了具有良好格式、可自定義的輸出。
下載鏈接：
#/
11.Backbone
Backbone.js提供了具有鍵值綁定和自定義事件的模型，來為Web應用程序提供結構。
特性：
·Backbone.js允許開發人員開發單頁應用程序
·Backbone.js有一個簡單的庫，用於分隔業務和用戶界面邏輯;
·這款工具使代碼變得簡單、系統和組織化。它可以充當任何項目的骨幹;
·它負責管理數據模型和用戶數據，並在服務端顯示這些數據;
·它允許開發人員創建客戶端Web應用程序或移動應用程序。
下載鏈接：
#/
12.Grunt
Grunt是NodeJS
上流行的任務運行器。它很靈活，用戶很多，當涉及到任務自動化用途時，它是開發人員的首選工具，它提供了許多打包的插件來執行常見任務。
特性：
·它的工作流程非常簡單，只需編寫一個設置文件即可;
·它讓開發人員只需最少的步驟就能自動執行重復性任務;
·它有一個簡單直接的方法，並提供了JS版本的任務，JSON版本的配置;
·Grunt內置許多用於擴展插件和腳本功能的任務
·它能加快開發流程並提高項目效率
·Grunt的生態系統非常龐大，因此用戶可以輕松為任何事情設置自動化流程;
·這款Web開發工具減少了執行重復任務時出錯的概率。
下載鏈接：
#/
13.Jasmine
Jasmine是一款行為驅動的JavaScript框架，用於測試JavaScript代碼。它不依賴於其他任何JavaScript
組件，這款開源工具不需要DOM。
特性：
·低開銷，無外部依賴;
·開箱即用，測試代碼所需的一切都打包好了;
·使用相同的框架運行瀏覽器測試和Node.js測試。
下載鏈接：
#/index.html
14.CodePen
CodePen是一個面向前端設計人員和開發人員的Web
開發環境。它的宗旨是提供更快、更順暢的開發環境。開發人員可以用它構建和部署網站，並構建測試用例。
特性：
·可以用它來構建組件，以備今後使用;
·它包含一些很棒的功能，可以提高CSS開發人員的開發效率;
·允許實時查看和實時同步
·預填充API功能允許添加鏈接和演示頁面，而無需編寫任何代碼。
下載鏈接：
#/
15.Foundation
Foundation是支持任何設備、介質和可訪問性的前端框架。這個響應式前端框架使開發人員可以很容易地設計響應式網站、應用和電子郵件。
特性：
·它提供了最干凈的標記，而不會犧牲效用和性能;
·可以自定義構建以包含或刪除某些元素，它定義了列的大小、顏色和字體大小;
·更快的開發和頁面載入速度
·Foundation針對移動設備進行了真正的優化
·適用於所有級別開發人員的可定製性
·它將響應式設計提升到了新的水平，並為平板電腦提供了開發人員迫切需要的中等網格。
下載鏈接：
#/sites/download.html/
16.SublimeText
SublimeText是非開源的跨平台源代碼編輯器。這款應用開發工具原生支持許多編程語言和標記語言。
特性：
·命令面板功能允許匹配的按鍵調用任意命令
·同時編輯功能允許對多個區域應用相同的交互更改
·提供基於Python的插件API
·允許開發人員針對項目定製首選項
·與TextMate的許多語言語法兼容
下載鏈接：
#/
17.GridGuide
GridGuide是另一款重要的前端開發工具。它允許在設計中創建像素級精確的網格，這是一個簡單的工具，可以提供非常有價值的工作流程。
特性：
·添加基於畫布、畫板和選定圖層的參考線;
·快速向邊緣和中點添加輔助線
·允許為其他畫板和文檔創建重復的指南
·幫助用戶創建自定義網格
下載鏈接：
#/
18.Chrome開發工具
Chrome開發工具是Chrome內置的一組調試工具。這些工具使開發人員可以進行各種測試，從而輕松節省大量時間。
特性：
·它允許添加自定義CSS規則
·用戶可以查看邊距、邊框和填充;
·它可以幫助開發人員模擬移動設備
·可以將開發工具用作編輯器
·打開開發工具後，用戶可以輕松禁用瀏覽器的緩存。
下載鏈接：
#/devtools
19.Modaal
Modaal是前端開發插件，可提供高質量、靈活和可訪問的modal。
特性：
·針對輔助技術和屏幕閱讀器進行了優化
·完全響應，隨瀏覽器寬度縮放;
·具有SASS選項的可定製CSS
·提供全屏和視口模式
·為畫廊打開和關閉modal提供鍵盤控制
·靈活的關閉選項和方法
下載鏈接：
https://github.com/humaan/Modaal
20.Less
Less是用來擴展對CSS語言支持的預處理器。它允許開發人員使用一些讓CSS更易維護和擴展的技術。
特性：
·它可以免費下載和使用
·它提供了高級樣式語法，可讓Web設計人員/開發人員創建高級CSS;
·它可以在瀏覽器開始渲染網頁之前輕松地編譯為標准CSS
·編譯的CSS文件可以上傳到生產Web伺服器
下載鏈接：
#/
21.Meteor
Meteor是一個全棧JavaScript
框架，它由一系列庫和軟體包組成。它在設計理念上對比了參考的框架和庫的優點，以簡化應用程序的原型製作流程。
特性：
·它提升了應用程序的開發效率
·它帶有一些內置功能，包含一些前端庫和基於NODE.js的伺服器;
·它可以大大加快項目的開發速度
·它提供MongoDB資料庫和Minimongo，它們完全用JavaScript編寫;
·實時重新載入功能允許開發時只刷新所需的DOM元素
下載鏈接：
#/install
22.jQuery
jQuery是一種廣泛使用的JavaScript庫。它使前端開發人員能夠專注於各種層面的功能上，它能簡化諸如HTML文檔遍歷、操作和
Ajax之類的事情。
特性：
·QueryUI有助於製作高度交互的Web應用程序
·它是開源的，可以免費使用;
·它提供了強大的主題機制
·它非常穩定且易於維護
·它提供了廣泛的瀏覽器支持
·可以幫助開發人員創建出色的文檔
下載鏈接：
#/download/
23.Github
GitHub是一個受開發人員工作方式啟發的Web開發平台。這款工具使開發人員可以查看代碼、管理項目和構建軟體。
特性：
·輕松協調，保持一致並使用GitHub的項目管理工具完成工作;
·它為開發工作提供了正確的工具
·簡單的文檔和高質量的編碼
·讓所有代碼集中在一處
·開發人員可以直接從存儲庫託管其文檔
下載鏈接：
https://github.com/
原文鏈接：
#/front-end-Web-development-tools.html
以上就是小編今天為大家分享的關於Web前端開發工程師要掌握的前端開發工具的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助，想要了解更多Web前端知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師。
文章來源：作者|MahipalNehra譯者|王強
5. 網頁設計師非常有用的幾個在線工具
時間戳轉換
功能簡介：Unix時間戳和北京時間互轉、獲取時間戳方法
地址：http://www.matools.com/timestamp
代碼對比/歸並
功能簡介：在線檢測/比較兩個文件文本的不同
地址：http://www.matools.com/compare
LESS編譯器
功能簡介：將LESS代碼編譯成CSS代碼，方便前端人員使用
地址：http://www.matools.com/less
crontab表達式
功能簡介：根據crontab表達式計算未來N次的執行時間
地址：http://www.matools.com/crontab
代碼格式化
功能簡介：可以對SQL、XML、JSON代碼進行格式化和美化
地址：http://www.matools.com/code-format
編碼轉換
功能簡介：URL解碼、Native轉UTF-8、Native轉ASCII
地址：http://www.matools.com/code-convert
網頁調色板
功能簡介：網頁顏色選擇器、顏色代碼查詢、RGB顏色值參考
地址：http://www.matools.com/color
正則表達式
功能簡介：正則表達式匹配和替換、多種常用正則表達式
地址：http://www.matools.com/regex
答題
功能簡介：學霸，快來做題，提升一下你的技能吧
地址：http://www.matools.com/exam
Markdown
功能簡介：將web上的文本轉換成HTML文檔
地址：http://www.matools.com/markdown
UBB編譯器
功能簡介：UBB是一種網頁中的替代HTML代碼的安全代碼
地址：http://www.matools.com/ubb
進制轉換
功能簡介：2~36進制之間任意進制轉換，支持浮點型
地址：http://www.matools.com/hex
CSV轉HTML
功能簡介：將CSV數據轉換為HTML的表格,並展示在頁面上
地址：http://www.matools.com/csv-html
HTML特殊符號
功能簡介：HTML特殊字元編碼大全
地址：http://www.matools.com/special-char
XML轉JSON
功能簡介：XML和JSON的內容和輸出互相轉換
地址：http://www.matools.com/xml-json
HTML轉JS
功能簡介：HTML和JS的內容和輸出互相轉換
地址：http://www.matools.com/html-js
js/css壓縮
功能簡介：在線壓縮Javascript和CSS代碼
地址：http://www.matools.com/compress
網頁常用字體
功能簡介：總結了各種常見的網頁字體的顯示效果
地址：http://www.matools.com/page-word
Cron生成器
功能簡介：可以在線生成任務調度Quartz的Cron表達式
地址：http://www.matools.com/cron
JSON格式化
功能簡介：Json解析、驗證、格式化、壓縮、以及Json與XML相互轉換
地址：http://www.matools.com/json
SQL格式化
功能簡介：sql在線美化、格式化、腳本壓縮
地址：http://www.matools.com/sql
埠掃描
功能簡介：掃描常用或指定的埠，查看埠是否開放
地址：http://www.matools.com/port
Base64編碼解碼
功能簡介：將字元base64編碼加密,或者將base64加密的字元還原
地址：http://www.matools.com/base64
MD5加密
功能簡介：生成32位和16位的大寫和小寫的密文
地址：http://www.matools.com/md5
摩斯電碼
功能簡介：在線摩斯電碼加密解密
地址：http://www.matools.com/morse
IP查詢
功能簡介：查詢IP或域名的地理位置和寬頻供應商、查看本機IP
地址：http://www.matools.com/ip
文字加密解密
功能簡介：支持AES、DES、RC4、Rabbit 等多種演算法
地址：http://www.matools.com/encrypt
HTTP狀態查詢
功能簡介：檢測網頁返回的HTTP狀態碼
地址：http://www.matools.com/page-status
生成htpasswd
功能簡介：生成htpasswd
地址：http://www.matools.com/htpasswd
favicon圖標製作
功能簡介：將上傳圖像剪切並生成ico格式的圖標
地址：http://www.matools.com/ico
傳圖識字
功能簡介：可以將一段含有英文文字的照片免費轉化成文字
地址：http://www.matools.com/ocr
gif圖製作
功能簡介：一鍵生成gif動態圖、閃圖和搞笑表情包
地址：http://www.matools.com/gif
生成二維碼
功能簡介：可以設置圖像格式、容錯率、大小、顏色及LOGO
地址：http://www.matools.com/qrcode
圖片轉pdf
功能簡介：在線免費將多張圖片轉成pdf文檔，一鍵生成pdf文檔
地址：http://www.matools.com/pdf
人臉識別
功能簡介：在線人臉識別，自動識別人臉批量裁剪出頭像圖片
地址：http://www.matools.com/face
DIY卡通頭像
功能簡介：免費的動漫人物製作工具，可以隨心定製男女卡通頭像
地址：http://www.matools.com/cartoon
傳圖識色
功能簡介：可以識別出遊標所在處圖片的顏色，並提取出圖片的主色調
地址：http://www.matools.com/image-color
手繪圖片
功能簡介：可以自動生成手繪風格照片，還可以改變照片的模糊度
地址：http://www.matools.com/sketch
圖片轉Base64
功能簡介：圖片和Base64編碼互轉
地址：http://www.matools.com/image-base64
衣服尺碼計算
功能簡介：輸入你的身高體重，即可計算出你需要的衣服尺寸
地址：http://www.matools.com/size
身份證信息查詢
功能簡介：輸入身份證號，查詢歸屬地、性別和出生年月
地址：http://www.matools.com/id
科學計算器
功能簡介：開方(√)、圓周率(π)、倒數(1/x)、正弦(Sin)
地址：http://www.matools.com/calculator
大小寫轉換
功能簡介：可以實現人民幣數字大寫轉換和英文大小寫轉換
地址：http://www.matools.com/upper-lower
日期間隔計算
功能簡介：一款可以計算兩個日期之間的天數的工具
地址：http://www.matools.com/date
漢字轉拼音
功能簡介：可以將漢字轉化為帶聲調的拼音
地址：http://www.matools.com/pinyin
文字去重
功能簡介：該工具可得到無重復數據的文字
地址：http://www.matools.com/repeat
單位換算器
功能簡介：長度、面積、重量、溫度等單位一鍵對等轉換
地址：http://www.matools.com/unit
中文簡繁轉換
功能簡介：將輸入的一段文字轉換為簡體或繁體
地址：http://www.matools.com/chinese-convert
陰陽歷轉換
功能簡介：支持農歷公歷互查，公歷和農歷互相轉換
地址：http://www.matools.com/lunar
郵編區號查詢
功能簡介：輸入省份、城市、區號或郵編查詢該地區號
地址：http://www.matools.com/postcode
字數統計
功能簡介：快速計算文章中漢字、標點、英文和數字的個數
地址：http://www.matools.com/count-char
6. Web前端工程師工作中都會用到哪些前端工具
今天小編要跟大家分享的文章是關於web前端工程師工作中都會用到哪些前端工具？網站製作開發過程中，善用輔助開發工具，會讓我們的開發進程事半功倍。今天小編就為大家介紹一些在web前端工作中應該會遇到的一些前端工具，讓我們一起來看一看吧！
1、WebStorm
這款JavaScript開發工具，相信作為JS開發者的你一定知道，它可是被稱作「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaScriptIDE」，功能主要包括：JavaScript,編輯語言,創造便捷的環境等，相信你一定爛熟於心了，在這里就不一一贅述了。
2、Dreamweaver
對於前端開發的人員我是不推薦使用的，但對UI設計還是用的比較多。
夢想編織者——AdobeDreamweaver，簡稱「DW」、這是一款集網頁製作和管理網站於一身的所見即所得網頁編輯器，利用它可以輕而易舉地製作出跨越平台限制和跨越瀏覽器限制的充滿動感的網頁。
3、Editplus
editPlus軟體是我這幾年來用過的最好用的一款文檔編輯軟體，沒有之一。強大的正則表達式讓它在同類型的軟體中脫穎而出。它的各項功能真的是特別強大，這次就簡單的說下它的編程功能吧。
這款軟體是國外軟體，不過有中文版的綠色安裝軟體，分為電腦32位和64位。這款軟體其實是搭配編程最合適，各種編碼替換、檢查十分醒目。在新建文本裡面可以選擇普通TXT格式和HTML網頁編輯格式。假如你選擇了HTML格式，打開就是編程頁面了。
我們編完程序還可以直接在瀏覽器中顯示頁面。編程成果一目瞭然。
4、SublimeText3
SublimeText作為一個盡為人知的代碼編輯器，其優點不用贅述。同時支持Windows、Linux、MacOSX等操作系統。具界面整潔美觀、文本功能強大，且運行速度極快，非常適合編寫代碼，寫文章做筆記。它還支持眾多插件擴展，實現強強聯手，比如說：
§_ackageControl：它是用來管理插件的插件
§_mmet插件：前端開發不可缺少，讓編寫HTML和CSS代碼變得簡單，節省大量時間。Emmet可使開發者用縮寫形式書寫代碼，再用「擴展」功能自動將代碼擴展至完整樣式
§_sFormat：這是一款將JS格式化的插件
§_ideBarEnhancements：右鍵菜單增強插件
§_railingSpaces：高亮顯示多餘的空格和Tab
§_ag：這是HTML/XML標簽縮進、補全、排版和校驗工具
§_erminal：允許在SublimeText3中打開cmd命令窗口
§_ublimeCodeIntel：代碼提示插件，支持多種編程語言，可以提示用戶自定義代碼
§_ssComb：為CSS屬性進行排序和格式化
§_utoprefixer：CSS3私有前綴自動補全插件，該插件使用CanIUse資料庫，能精準判斷哪些屬性需要什麼前綴
§_olorPicker：編輯CSS樣式的時候，ColorPicker調色盤不僅可以查看顏色值，更可以輕松調好顏色，還有個雙向選擇顏色的功能
§_lignment：讓開發者自動對齊代碼，包括PHP、CSS、JavaScript語言
5、Vim
Vim是從vi發展出來的一個文本編輯器。代碼補全、編譯及錯誤跳轉等方便編程的功能特別豐富，在程序員中被廣泛使用，和Emacs並列成為類Unix系統用戶最喜歡的文本編輯器。
6、Diffchecker
Diffchecker是用於檢測/比較兩個文件文本有什麼不同的差異的在線代碼工具，它的有點是不需要人工查看，尤其是大文件，且使用方便。
7、BrowserShots
BrowserShots是一款免費的跨瀏覽器測試工具，捕捉網站在不同瀏覽器中的截圖。這是最有名，也是最古老的瀏覽器兼容性測試工具。
8、CleanCSS
免費的CSS精簡壓縮工具，通過這個在線工具，可以將你的CSS文件壓縮、優化成更精簡，這將大大提高你的網站的載入速度。進入CleanCSS後，你可以輸入要壓縮的CSS代碼或是該CSS文件的所在URL地址，然後選擇代碼布局和相應的精簡壓縮選項，最後點擊生成即可。
9、Firebug
Firebug是firefox下的一個插件,能夠調試所有網站語言，如Html,Css等，但最重要的是有javascript調試功能，在各種瀏覽器下都能使用（IE,Firefox,Opera,Safari）。除此之外，其他功能還很強大，比如html,css,dom的察看與調試，網站整體分析等等。總之就是一整套完整而強大的WEB開發工具，再有就是其為開源的軟體。
10、ZendStudio
專業開發人員在使用PHP整個開發周期中唯一的集成開發環境(IDE)，它包括了PHP所有必須的開發部件。通過一整套編輯、調試、分析、優化和資料庫工具，ZendStudio加速開發周期，並簡化復雜的應用方案。
11、Grunt
Grunt是一個基於任務的JavaScript工程命令行構建工具，被稱為JavaScript世界的構建工具。當你在Gruntfile文件正確配置好了任務，任務運行器就會自動幫你或你的小組完成大部分無聊的工作。
當然，web開發類工具還有很多，本篇主要涉及的是前台程序開發比較常用的工具，相信你在平常的網站開發過程中一定會熟練掌握更多更適合你開發環境的工具。
以上就是小編今天為大家分享的關於web前端工程師工作中都會用到哪些前端工具？的文章希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助，想要了解更多web前端方面知識記得關注北大青鳥web前端培訓官網哦~
*聲明：內容與圖片均來源於網路（部分內容有修改），版權歸原作者所有，如來源信息有誤或侵犯權益，請聯系我們刪除或授權事宜。
7. web前端開源框架有哪些
目前常用的一些開源前端的框架如下：
1. Bootstrap
Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美，直觀並且給力的web設計工具包，可以用來開發跨瀏覽器兼容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件，柵格系統以及一些常用的JavaScript插件。
Bootstrap是用動態語言LESS寫的，主要包括四部分的內容：
腳手架——全局樣式，響應式的12列柵格布局系統。記住Bootstrap在默認情況下並不包括響應式布局的功能。因此，如果你的設計需要實現響應式布局，那麼你需要手動開啟這項功能。
基礎CSS——包括基礎的HTML頁面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎CSS為這些要素提供了優雅，一致的多種樣式。
組件——收集了大量可以重用的組件，如下拉菜單（dropdowns），按鈕組（button groups），導航面板（navigation control）——包括：tabs,pills,lists標簽，麵包屑導航（breadcrumbs）以及頁碼（pagination），縮略圖(thumbnails)，進度條（progress bars），媒體對象（media objects）等等。
JavaScript——包括一系列jQuery的插件，這些插件可以實現組件的動態頁面效果。插件主要包括模態窗口（modals），提示效果（tool tips），「泡芙」效果（popovers），滾動監控（scrollspy），旋轉木馬(carousel)，輸入提示(typeahead)，等等。
Bootstrap已經足夠強大，能夠實現各種形式的 Web 界面。為了更加方便地利用Bootstrap進行開發，很多工具和資源可以用來配合使用，下面列舉了其中的一部分工具和資源。
jQuery UI Bootstrap —— 對於jQuery和Bootstrap愛好者來說這是個非常好的資源，能夠把 Bootstrap的清爽界面組件引入到jQuery UI中。
jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題類似，這是一個為jQuery mobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅訪問，那麼這個資源對你來說很方便易用。
Fuel UX —— 它為Bootstrap添加了一些輕量的JavaScript控制項。Fuel UI 安裝，修改，更新以及優化都很簡單方便。
StyleBootstrap.info —— Bootstrap提供了自己的幾種界面風格，StyleBootstrap提供了更多的配色選項，並且你可以給每個組件都應用不同的配色。
BootSwatchr —— 利用這個工具你可以立刻查看主題修改後的效果。對於每一次變動的效果，這個應用都會生成一個唯一的URL方便你與他人分享，你也可以在任意時刻修改你的主題。
Bootswatch —— 提供大量免費的Bootstrap主題。
Bootsnipp —— 在線前端框架交互組件製作工具，是一個供給設計師和開發者的基於Bootstrap HTML/CSS/JavaScript 架構的免費元素。
LayoutIt —— 通過界面拖放生成器簡便快捷地創建基於Bootstrap的前端代碼。通過拖放動作將Bootstrap風格的組件加入到你的個人設計里並且可以方便地修改他們的屬性，簡單便捷。
2、flex
Apache基金會發布了Flex 4.8版本，這是Adobe將Flex捐獻給Apache基金會後發布的第一個版本
需要注意的是
2014年03月10日，Apache Flex技術社區發布了全新的Apache Flex 4.12.0版本，該版本是Apache Flex 4.11.0的升級版本，改進的功能包括：
◆支持最新版本的Flash Player
◆支持最新的AIR運行時
◆改進了內存佔用和性能
◆改善了針對移動平台的組件的樣式
◆支持iOS7系統
◆修復了超過80個漏洞[4]
2014年05月10日，Apache對4.12.0版本進行優化改進，發布了Flex 4.12.1，新版本加入對全新Flash Player及Air運行時的支持，改進對移動媒體查詢的支持，並修復20多個Bug。
3、easyui
easyui幫助你構建你的web應用更加容易。
它是一個基於jquery的插件，開發出來的一套輕量級的ui框架，非常小巧而且功能豐富。
但是她有一個最大的問題就是代碼只能找到以前的開源的版本，到了1.2以後的版本源代碼都是經過混淆的，如果遇到問題修改起來會非常麻煩！不過一個比較大的優勢是開源免費，並且界面做的還說的過去！
4、jQuery UI
jQuery UI 是一套 jQuery 的頁面 UI 插件，包含很多種常用的頁面空間，例如 Tabs（如本站首頁右上角部分） 、拉簾效果（本站首頁左上角）、對話框、拖放效果、日期選擇、顏色選擇、數據排序、窗體大小調整等等非常多的內容。
功能非常全面，界面也挺漂亮的，可以整體使用，也可以分開使用其中的幾個模塊，免費開源！
5、DWZ
DWZ富客戶端框架(jQuery RIA framework), 是中國人自己開發的基於jQuery實現的Ajax RIA開源框架.
設計目標是簡單實用,快速開發,降低ajax開發成本。
歡迎大家提出建議，我們將在下一版本中進一步調整和完善功能．共同推進國內整體ajax開發水平。
畢竟是國產的，支持一下，而且源碼完全公開，可以選擇一下！不過性能怎麼樣不敢確定！
6、GWT
Google 網頁工具包——GWT 提供了一組基於Java語言的開發包，這個開發包的設計參考Java AWT包設計，類命名規則、介面設計、事件監聽等都和AWT非常類似。熟悉Java AWT的開發者不需要花費多大的力氣就能夠快速的理解GWT開發工具包，將更多地時間投入到GWT應用的開發過程中。
你不用去了解這樣那樣的javascript框架，通過java你就可以寫出功能豐富的界面，可以做單元測試，畢竟是google的產品，嚴重支持一下！
7、YUI
Yahoo! UI Library (YUI) 是一個開放源代碼的 JavaScript 函數庫，為了能建立一個高互動的網頁，它採用了AJAX, DHTML 和 DOM 等程式碼技術。它也包含了許多 CSS 資源。使用授權為 BSD許可證，基本上沒怎麼研究過！
YUI Compressor倒是挺出名的，這套UI庫不知道應用的情況怎麼樣！
10、Sencha
Sencha 是由 ExtJS、jQTouch 以及 Raphael 三個項目合並而成的一個新項目。
大公司的框架，並且是幾樣庫的強強聯合，值得推薦！
8、Dojo
在國內應用好像不是很廣，不過性能上應該沒問題。
Dojo是一個用javascript語言實現的開源DHTML工具包。
有多個基金會的支持，包括IBM和SUN，都是軟體界的泰斗，值得信賴！
9、ZK
ZK是 一套以 AJAX/XUL/Java 為基礎的網頁應用程式開發框架，用於豐富網頁應用程式的使用介面。最大的好處是，在設計AJAX網路應用程式時，輕松簡便的操作就像設計桌面程式一樣。 ZK包含了一個以AJAX為基礎、事件驅動（event-driven）、高互動性的引擎，同時還提供了多樣豐富、可重復使用的XUL與HTML組件，以 及以 XML 為基礎的使用介面設計語言 ZK User-interfaces Markup Language (ZUML)。
功能豐富，全面，文檔齊全，而且升級了很多次，非常值得推薦！
10、OperaMasks-UI
OperaMasks- UI是OperaMasks團隊 2011下半年打造的一款輕量級前端JS組件庫，旨在提供一款學習曲線低、定製性靈活、樣式統一，且多瀏覽器支持、覆蓋企業業務場景的前端 JavaScript UI組件庫。目前，該團隊已將這一產品以LGPL 開源協議開放給社區。
文檔豐富，功能齊全，而且很容易使用和開發！而且是國產的喲！
11、JavaFX
Sun 公司(已於2009年被Oracle公司收購)在2008年12月05日發布了JavaFX技術的正式版,它使您能利用 JavaFX 編程語言開發富互聯網應用程序(RIA)。JavaFX Script 編程語言（以下稱為JavaFX）是Sun微系統公司開發的一種declarative, statically typed(聲明性的、靜態類型)腳本語言。JavaFX技術有著良好的前景，包括可以直接調用Java API的能力。因為 JavaFX Script是靜態類型，它同樣具有結構化代碼、重用性和封裝性，如包、類、繼承和單獨編譯和發布單元，這些特性使得使用Java技術創建和管理大型程序 變為可能。