2-5 我的第一個HTML文件

2-5-1 編輯我的第一個HTML文件

HTML是純文本格式的文檔，可以使用Windows內附的記事本來編輯HTML文件。除了記事本，目前也有一些公司開發了HTML文件編輯器，非常好用，例如Notepad++（2-5-3節將做簡單說明）和WebStorm等。

程序實例ch2_1.html：下面筆者將以記事本為例做解說。在記事本中輸入如下所示的內容。

然后執行“文件”→“保存”命令。

隨后可以看到“另存為”對話框，選擇欲保存的文件夾，如“ch2”，然后在“文件名”輸入框中輸入“ch2_1.html”，在“編碼”下拉列表框中選擇“UTF-8”，然后單擊“保存”按鈕。HTML文件的擴展名是.html或.htm，本書全部使用.html為擴展名。

文件保存完成后，可以在記事本標題欄看到所指定的文件名“ch2_1”。

這時進入ch2文件夾可以看到下面的畫面。

2-5-2 執行我的第一個HTML文件

雙擊上述ch2_1文件的圖標或是將ch2_1文件的圖標拖曳至瀏覽器，可以打開這份HTML文件，并顯示如下結果。

說明，本例筆者使用的是Microsoft公司的Internet Explorer（簡稱IE）瀏覽器，該瀏覽器到9.0版以后才對HTML5有較好的支持。筆者在撰寫本書時，除了使用Internet Explorer瀏覽器外，還使用了Apple公司的Safari、Google公司的Chrome、Opera公司的Opera和Mozilla基金會的Firefox瀏覽器做測試。

2-5-3 Notepad++

Notepad++是適合在Windows環境中使用的HTML文件編輯器，主要優點如下：

1. 具有智能輸入功能，輸入元素或屬性時，只要輸入前面的英文字母，其后關聯的英文字母即跳出供選用。這個功能除了可以加快輸入速度，還可以避免輸入錯誤。例如，當輸入“he”時，可自動跳出相關的元素或屬性供選用。

2. HTML文件設計完成時，元素、元素內容、屬性與屬性值分別用不同顏色顯示，方便檢查程序。

3. 方便除錯(debug)。HTML文件語法出問題時，可通過顯示為不同顏色的元素或屬性找出錯誤。例如下圖是<meta>元素名稱輸入錯誤時顯示的畫面。

4. 可以選擇使用哪一種瀏覽器執行所編寫的HTML文件。

5. 文件左邊有行號，方便用戶了解目前的編輯狀況與閱讀文件。