1.3 編輯HTML文件

1.3.1 常用HTML編輯軟件

網站制作及前端開發軟件是指用于制作HTML網頁的工具軟件。

1.Dreamweaver

Dreamweaver是美國Adobe公司推出的一套擁有可視化編輯界面，用于制作并編輯網站和移動應用程序的網頁設計軟件。由于Dreamweaver支持代碼、拆分、設計、實時視圖等多種方式來創作、編寫和修改網頁，對于初級人員，無須編寫任何代碼就能快速創建Web頁面。其成熟的代碼編輯工具更適用于Web開發高級人員的創作，新版本使用了自適應網格版面創建頁面，在發布前使用多屏幕預覽審閱設計，可大大提高工作效率。所以，Dreamweaver是一款比較好的HTML代碼編輯器。

2.Visual Studio Code

Visual Studio Code（簡稱VS Code）是Microsoft公司開發的運行于Windows、Mac OS X和Linux系統之上的，開源、免費、跨平臺、高性能、輕量級的代碼編輯器。它在性能、語言支持、開源社區方面都做得很不錯。該編輯器支持多種語言和文件格式的編寫，也集成了所有現代編輯器所應該具備的特性，包括語法高亮、可定制的熱鍵綁定、括號匹配以及代碼片段收集。

3.Hbuilder X

HBuilder X（簡稱HX）編輯器是DCloud（數字天堂）推出的一款支持HTML5的Web開發軟件。該軟件體積小，啟動快。通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、JS、CSS的開發效率。Hbuilder X在使用上比較符合中國人的開發習慣，用HBuilder X編寫HTML代碼還是很方便的。

4.Sublime Text3漢化版

Sublime Text是一款具有代碼高亮、語法提示、自動完成且反應快速的編輯器軟件，它不僅具有華麗的界面，還支持插件擴展，而且很容易上手。

5.Notepad++

Notepad++旨在替代Windows默認的notepad，它比notepad的功能更為強大。Notepad++支持插件，可通過添加不同的插件支持不同的功能。Notepad++屬于輕量級的文本編輯類軟件，比其他一些專業的文本編輯類工具啟動更快，占用資源更少，其功能不亞于專業工具。

6.記事本

任意文本編輯器都可以用于編寫網頁源代碼，最常見的文本編輯器就是Windows自帶的記事本。

1.3.2 網頁文件的創建

本書前幾章的網頁源代碼采用在記事本中手工輸入，有助于初學者對網頁結構和樣式更深入地了解。后幾章在HBuilderX中編輯，以提高編輯效率。

一個網頁可以簡單得只有幾個文字，也可以復雜得像一張或幾張海報。下面創建一個只有文本組成的簡單頁面，來學習網頁的編輯和保存過程。下面用最簡單的“記事本”來編輯網頁文件。

1）打開記事本。單擊Windows的“開始”按鈕，在“Windows附件”中單擊“記事本”。

2）在記事本窗口中輸入HTML代碼，如圖1-6所示。

3）在記事本的“文件”菜單中，選擇“保存”選項。顯示“另存為”對話框，在“保存在”下拉列表框中選擇文件要存放的路徑，在“文件名”文本框輸入以.html為后綴的文件名，如index.html，在“保存類型”下拉列表框中選擇“文本文檔（*.txt）”選項，在“編碼”下拉列表框中選擇“UTF-8”或“Unicode”選項，如圖1-7所示。最后單擊“保存”按鈕，將記事本中的內容保存在磁盤中。

4）在如圖1-8所示的文件資源管理器中，雙擊index.html文件啟動瀏覽器，即可看到網頁的顯示結果，如圖1-9所示。如果保存時選擇的編碼是“ANSI”，中文將顯示為亂碼。

本書所有的應用實例均是在Windows 10操作系統下的Google Chrome瀏覽器中運行。