前端開發准備
1. 離線文檔的下載
離線文檔：Zeal - Offline Documentation Browser
如果安裝報錯，需安裝：Visual C++ Redistributable
下載安裝完成之后，會在“開始”屏幕或者桌面生成快捷鍵，雙擊打開
在第一次使用時，並不是直接就有 HTML 文檔的，還需要 Download。
這里點擊工具欄的 Tools-Assets 或者下方的“Install and update docsets”都是 OK 的
按照步驟安裝即可
由於服務器在國外，網絡較慢，耐心等待 download 完畢
在 Installed 中出現 HTML，同時左側導航欄有了 HTML，至此安裝完畢
離線使用，在左側導航欄可以查詢 HTML 標簽和屬性，右側顯示元素的詳細信息
2. 文本編輯器的選擇
Notepad++
Notepad++是 Windows 操作系統下的一套文本編輯器，功能比 Windows 中的 Notepad 強大，除了可以用來制作一般的純文字說明文件，也十分適合編寫計算機程序代碼。
有語法高亮度顯示、語法折疊功能，並且支持宏以及擴充基本功能的外掛模組。
完全免費，支持眾多計算機程序語言：C，C++，Java，C#，XML，SQL，HTML，PHP，ASP 等
Softonic 地址：Notepad++ - Download (softonic.com)
不過因為國外服務器原因，而且貌似被牆了，所以建議從 Softonic 下載
- 優點：免費開源，輕量流暢，支持插件
- 缺點：界面丑，雖然可以下載皮膚插件（PS：個人感覺皮膚插件也不好用）
Sublime
Sublime Text 是一個文本編輯器（收費軟件，可以無限期試用，但是會有激活提示彈窗），同時也是一個先進的代碼編輯器。
主要功能包括：拼寫檢查，書簽，完整的 Python API ， Goto 功能，即時項目切換，多選擇，多窗口等等。
跨平台，同時支持 Windows、Linux、Mac OS X 等操作系統。
強大的命令面板功能，可以模糊匹配命令。
官方地址：Sublime Text - A sophisticated text editor for code, markup and prose
- 優點：輕量流暢，支持插件，界面簡潔，運行速度特別快
- 缺點：不開源，商用收費
VS Code √
Microsoft 出品，輕量但強大，針對於編寫現代 Web 和雲應用的跨平台源代碼編輯器。可以在 Mac OS X、Windows 和 Linux 等操作平台使用。
具有對 JavaScript、TypeScript 和 Node.js 的內置支持，並具有豐富的其他語言（例如 C++，C＃，Java，Python，PHP，Go）和運行時（例如.NET 和 Unity）擴展的生態系統。
官方地址：Visual Studio Code - Code Editing. Redefined
- 優點：免費開源，輕量流暢，功能豐富，支持插件，界面簡潔，智能代碼補全，運行速度很快
- 缺點：幾乎沒有什么太大的缺點（PS：撤銷恢復之前的編輯時出現過問題，希望官方能夠盡快修復）
Atom
Atom 是 Github 專門為程序員推出的一個跨平台文本編輯器。完全免費開源的代碼編輯器，具有簡潔和直觀的圖形用戶界面。
支持 CSS，HTML，JavaScript 等網頁編程語言。支持宏，自動完成分屏功能，集成了文件管理器。
官方地址：Atom
Github 地址：atom/atom: The hackable text editor (github.com)
中文地址：Atom 中文網 (baisheng999.com)
- 優點：功能豐富，免費開源，支持插件，界面簡潔
- 缺點：相對重量級；打開大文件卡死（PS：產品上經常用它寫 amWiki，使用時經常卡死；而且安裝過程沒有任何選項和提示，默認裝到 C 盤）
WebStorm
JetBrains 出品的智能 JavaScript IDE。譽為“Web 前端開發神器”、“最強大的 HTML5 編輯器”、“最智能的 JavaScript IDE”等。與 IntelliJ IDEA 同源，繼承了 IntelliJ IDEA 強大的 JS 部分的功能。
IntelliJ IDEA 是 java 編程語言開發的集成環境。IntelliJ 在業界被公認為最好的 java 開發工具，尤其在智能代碼助手、代碼自動提示、重構、JavaEE 支持、各類版本工具(git、svn 等)、JUnit、CVS 整合、代碼分析、 創新的 GUI 設計等方面的功能可以說是超常的。它的旗艦版本還支持 HTML，CSS，PHP，MySQL，Python 等。免費版只支持 Java,Kotlin 等少數語言。
官方地址：Download WebStorm: The Smartest JavaScript IDE by JetBrains
- 優點：功能強大，支持插件，界面美觀，智能代碼補全，快速搜索
- 缺點：重量級，占內存；收費
除以之外，市面上還有很多功能強大的前端編輯器。
HBuilder：DCloud（數字天堂）推出一款支持 HTML5 的 Web 開發 IDE。在語法提示、轉到定義、重構、調試等方面都非常高效。缺點是不太穩定，有時會出現卡頓。
Dreamweaver：簡稱“DW，老牌的 IDE ，國人開發，號稱為編碼極客而生的 IDE。曾經 PS+DW+FW（號稱網頁三劍客）稱霸網頁領域。然而之前的版本更新較慢，版本陳舊，已經滿足不了廣大前端開發者的項目需求，逐漸被市場淘汰。
這兩款及其他編輯器在這里就不再贅述了（PS：本人沒怎么用過，沒有太多發言權）
這里我選擇以 VSCode 作為接下來學習的開發編輯器了。當然每個人有每個人的偏好，你也可以選擇自己心儀的編輯器進行開發。
3. 開發前准備
為 VSCode 安裝以下插件，便於我們進行更好的開發工作
- Chinese (Simplified) Language Pack for Visual Studio Code：中文（簡體）語言包（PS1：不完全顯示中文，但是大多數都會譯為英文；PS2：喜歡原生態或者英文 OK 的話，可忽略）
- Ayu：簡單的主題與明亮的顏色
- vscode-icons：好看的圖標
- Live Server：A Quick Development Live Server with live browser reload，即提供一個 live 服務器，並且支持代碼與瀏覽器之間的實時同步刷新（PS：這樣我們在寫前端代碼時就能實時看到效果了）
4. 使用 Live-Server
在當前 HTML 中右鍵單擊，選擇Open With Live Server
踩坑 1
Open a folder or workspace...(File -> Open Folder)
解決方式：需要打開 HTML 所在的文件夾，通過導航欄 文件-打開文件夾，選擇我們編寫的 HTML，再去Open With Live Server即可
踩坑 2
Server is started at 5500 but failed to open in Browser Preview.
解決方式：在 liveserver 設置中，找到Live Server>Settings:Use Browser Preview，取消對 Open in Browser Preview inside VS Code,instead of default browser的勾選即可
踩坑 3
Error: connect ECONNREFUSED 127.0.0.1:80
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1146:16)
解決方式：取消使用代理，修改 enable 為 false（這里我一直以為是 live-server 服務器本身的代理端口）。live-server 默認使用 5500 端口
實際上，配置端口要在Live Server › Settings: Port選項進行設置
自定義端口號
按照上述說明，點擊在settings.json中編輯會打開settings.json文件
這里如果將liveServer.settings.port配置為 0，會隨機選擇端口號
