工欲善其事，必先利其器
接下來的學(xué)習(xí)中，我們將使用 HTML 與 CSS 進(jìn)行網(wǎng)頁開發(fā)，首先要做的就是選擇開發(fā)工具。
在一些教程中，主張初學(xué)者使用 Windows 自帶的記事本編寫代碼。這里筆者個人是非常非常的反對的，徒手寫代碼不僅僅不會提高編程水平，反而變相的加大了編程難度，降低了學(xué)習(xí)者的編程興趣。一個好的開發(fā)工具，會使編程具有樂趣，使編程簡單快捷。
這里筆者就推薦幾款網(wǎng)頁開發(fā)的工具，供大家選擇。個人認(rèn)為比較好的有：Sublime Text，Atom，Visual Studio Code，EditPlus，Nodepad++，WebStorm，DreamWeaver。其中，前面5款是輕量級的，只有幾M大小，后面兩款是IDE級的。
可愛的編輯器——Sublime Text
在所有上面的開發(fā)工具中，如果只能裝一款，首推 Sublime Text。它不限于網(wǎng)頁的開發(fā)，在后面學(xué)習(xí) Python 和 JavaScript 的編程中也會使用到它。
Sublime Text 具有漂亮的用戶界面和強(qiáng)大的功能，例如代碼縮略圖，Python的插件，代碼段等。還可自定義鍵綁定，菜單和工具欄。Sublime Text 的主要功能包括：拼寫檢查，書簽，完整的 Python API ， Goto 功能，即時項(xiàng)目切換，多選擇，多窗口等等。Sublime Text 是一個跨平臺的編輯器，同時支持Windows、Linux、Mac OS X等操作系統(tǒng)。
最最關(guān)鍵的是，它是免費(fèi)的！而且擁有強(qiáng)大的插件庫。
配置修改
這一項(xiàng)是可選的，只是為了讓讀者了解配置文件的內(nèi)容。
在菜單欄選擇 Sublime Text->Preferences->Setting-User，注意其中Setting-Default是默認(rèn)的系統(tǒng)配置，是不可修改的。通過修改用戶設(shè)置會覆蓋系統(tǒng)對應(yīng)的默認(rèn)配置，下面是筆者的配置，加了注釋。
{
"color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme", #主題設(shè)置, 這是下載主題后, 自動生成的, 也可以手動配置
"font_size": 15, #設(shè)置字體大小, 我比較喜歡大一點(diǎn)的字體
"ignored_packages": #設(shè)置忽略文件類型, 第二個是默認(rèn)忽略的, 第一個markdown文件我使用另一種文件打開,
[
"Markdown",
"Vintage"
],
"create_window_at_startup": false, #取消啟動時,自動打開新窗口的設(shè)置, 這個設(shè)置很惡心, 每次啟動后會自動生成一個空白窗口
"open_files_in_new_window": false, #取消打開文件時會新生成一個窗口, 默認(rèn)設(shè)置每次打開一個項(xiàng)目會重新生成一個窗口
"highlight_line": true, #高亮當(dāng)前編輯行, 其實(shí)高亮的不明顯
"highlight_modified_tabs": true, #設(shè)置文件修改時, 標(biāo)簽高亮提示, 這樣可以提示保存
"show_encoding": true, #在窗口右下角顯示打開文件的編碼
"original_color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme", #主題設(shè)置
"translate_tabs_to_spaces": true #將tab鍵的形式改為四個空格
}
瀏覽器打開HTML代碼
因?yàn)槲覀冃枰M(jìn)行網(wǎng)頁開發(fā)，而 Sublime Text 的編譯（Build）選項(xiàng)默認(rèn)不帶有HTML。這里我們讓它能夠Build HTML的代碼，使用自定義的瀏覽器打開。
打開該路徑：
Preference - Key Bindings-User在" ] "前輸入以下代碼：
{ "keys": ["ctrl+shift+enter"], "command": "open_in_browser" }
這樣一來，按下ctrl+shift+enter，就可以使用系統(tǒng)默認(rèn)瀏覽器打開代碼了。
Package Control 的安裝
Sublime Text 如果離開了 Package Control 就基本廢掉了大半，Package Control 提供給了 Sublime Text 強(qiáng)大的插件庫，同時使得用戶很方便的去下載使用它們。
打開 Sublime Text 3 并且按下 ctrl + ` 或者選擇 View > Show Console 打開控制臺，然后將下面的代碼復(fù)制進(jìn)控制臺后按回車即可。
import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
更多的學(xué)習(xí)資源
還有很多可用的插件，這里就不一一推薦的，個人可根據(jù)喜好選擇性的進(jìn)行安裝和使用。下面給出的資源有很多快捷鍵的技巧、使用的經(jīng)驗(yàn)、插件的推薦，請讀者們簡單的瀏覽一下。
正如同官網(wǎng)所說的那樣——“Sublime Text: The text editor you'll fall in love with”，它確實(shí)是一款令人著迷的可愛的編輯器。
21世紀(jì)的新星——Atom
Atom 概述
在代碼編輯器、文本編輯器領(lǐng)域，有著不少的「神器」級的產(chǎn)品，如歷史悠久的 VIM、Emacs 以及如今當(dāng)紅的 Sublime Text。另外還有 VSC、EditPlus、NotePad++、UltraEdit 等一大堆流行的利器，可謂百家爭鳴。
然而，作為目前全球范圍內(nèi)影響力最大的代碼倉庫/開源社區(qū)，GitHub 的程序員們并不滿足于此。他們使用目前最先進(jìn)流行的技術(shù)重新打造了一款稱為“屬于21世紀(jì)”的代碼編輯器—— Atom， 它開源免費(fèi)跨平臺，并且整合 GIT 并提供類似 Sublime Text 的包管理功能，支持插件擴(kuò)展，可配置性非常高……
Atom 代碼編輯器支持 Windows、Mac、Linux 三大桌面平臺，完全免費(fèi)，并且已經(jīng)在 GitHub 上開放了全部的源代碼。在經(jīng)過一段長時間的迭代開發(fā)和不斷改進(jìn)后，Atom 終于從早期的測試版達(dá)到了正式版了！相比之前的版本，在性能和穩(wěn)定性方面都有著顯著的改善。
Atom 與 Sublime Text 對比
那么，我們關(guān)心的是，Atom 與主流的編輯器對比會怎么樣？其實(shí)，在我看來， Atom 目前還不太適合用做主力編輯器，雖然它的功能與 Sublime Text 較為接近，但現(xiàn)在的它和 Sublime Text 相比還是稚嫩了一點(diǎn)，畢竟現(xiàn)在 Sublime Text 已經(jīng)非常成熟了，后者有很全面的內(nèi)置功能，也有非常豐富的插件包和活躍的社區(qū)，而 Atom 則還需給予時間讓其發(fā)展。因?yàn)槠鋬?nèi)置了 Chrome 的緣故，安裝包可達(dá)近100MB，相對 Sublime Text 厚重的可不是一星半點(diǎn)的了。目前仍然沒有取代Sublime Text成為主流的主要原因還是因?yàn)樾阅軉栴}，其啟動時間可達(dá) 4-15 秒，而且比較吃內(nèi)存，性能不夠強(qiáng)大的計算機(jī)在使用的時候也會感到編碼不流暢，甚至?xí)驗(yàn)?Atom 導(dǎo)致卡死。
不過由于 Atom 是由 Github 維護(hù)的，它擁有非常強(qiáng)大的后臺。并且那里有著大量極為優(yōu)秀的編程愛好者，也是極客們的聚集地，相信在不久的將來Atom 一定也會擁有不少新的插件包，而性能方面的缺點(diǎn)遲早也會被解決掉。
下載地址：https://atom.io
EditPlus 與 Nodepad++
Editplus 概述
EditPlus 是一款由韓國出品的小巧但是功能強(qiáng)大的可處理文本、HTML 和程序語言的 Windows 編輯器，你甚至可以通過設(shè)置用戶工具將其作為C，Java，PHP等等語言的一個簡單的IDE。
官方試用版下載地址：https://www.editplus.com/download.html
Nodepad++ 概述
Notepad++是 Windows操作系統(tǒng)下的一套文本編輯器，有完整的中文化接口及支持多國語言編寫的功能。
Notepad++功能比 Windows 中的 Notepad（記事本）強(qiáng)大，除了可以用來制作一般的純文字說明文件，也十分適合編寫計算機(jī)程序代碼。Notepad++ 不僅有語法高亮度顯示，也有語法折疊功能，并且支持宏以及擴(kuò)充基本功能的外掛模組。
Editplus 與 Nodepad++ 的對比
兩者都不可以做為編程的主力工具，只是在沒有其他編輯器情況下的一個備選項(xiàng)。另外，Editplus是收費(fèi)的，Nodepad++是免費(fèi)的。
前端開發(fā)神器——WebStorm
WebStorm，跨平臺IDE，為WEB開發(fā)項(xiàng)目提供更好的開發(fā)支持，專門針對JavaScript、CSS、HTML及各種Script設(shè)計。它是一個輕量級但功能強(qiáng)大的集成開發(fā)環(huán)境，完全具備了與復(fù)雜的客戶端開發(fā)和服務(wù)器端開發(fā)。毫不夸張的說，它是Web前端開發(fā)、JS開發(fā)的首選IDE，其強(qiáng)大之處不可理喻，被譽(yù)為Web開發(fā)神器。
簡單列舉一下優(yōu)點(diǎn)：
- 自帶的版本控制，這功能挽救了我好多次了。
- 優(yōu)秀的代碼定位能力，能輕松將光標(biāo)定位到變量/屬性/方法的定義處，對閱讀代碼非常有用。
- 聰明的代碼聯(lián)想、格式化功能。
- 可定制的code template，加強(qiáng)版的zen coding，而且不僅限于html和css。
- svn、git 等版本工具的支持，內(nèi)置的 gist 非常方便。
- nodejs 最好的開發(fā)工具，沒有之一。只要你會用 chrome 調(diào)試瀏覽器器端的 js，那么你就會用 webstorm 調(diào)試 nodejs。
- 預(yù)處理語言的支持，使less、sass、cofeescript 等等語言的自動編譯變得很簡單。
- 最爽的一點(diǎn)，remote host和live edit的組合使用，讓你直接編輯遠(yuǎn)程文件并實(shí)時刷新，一下省去了你這么多步驟：保存本地文件，上傳本地文件到遠(yuǎn)程服務(wù)器，刷新瀏覽器。
具體強(qiáng)大之處可以看一下這篇博文：WebStorm：令人眼前一亮的一款前端開發(fā)IDE | 安·記，也可以不看，反正只要知道它是神器一般的存在就足夠了。
官方試用版下載地址：https://www.jetbrains.com/webstorm/
官方下載之后可以試用30天，本文不提供破解教程，破解的話網(wǎng)上一搜一大把，但是還是建議讀者們有條件的話請使用正版（原價￥600）。
CSDN軟件商城正版購買：http://mall.csdn.net/product/627
夢想編織者——DreamWeaver
DreamWeaver 是 Adobe 旗下的極具競爭力的一款網(wǎng)頁開發(fā)工具，它的特點(diǎn)是可視化開發(fā)，即所見即所得，很適合初學(xué)者使用。所以在很多網(wǎng)頁開發(fā)的新手教程中，都會推薦使用 DreamWeaver。
DreamWeaver 也是一款商業(yè)軟件，故此處不提供下載地址。較于 WebStorm，它的可視化開發(fā)確實(shí)會提供一些便利，但是總體上仍然與WebStorm 有很大差距，就像美圖秀秀與 Photoshop 的差距一樣。另外，編程熟練之后，完全不需要可視化，所謂的所見即所得也會顯得很多余累贅。
原文：《選擇兵器》（From 《Before Coding》）
