1.4.2 HTML文件的創建

一個網頁可以簡單得只有幾個文字，也可以復雜得像一張或幾張海報。任意文本編輯器都可以用于編寫網頁源代碼，當前比較流行的網頁編輯器是HBuilder X。使用HBuilder X編輯HTML文件的操作非常簡單，在HBuilder X的代碼窗口中手工輸入代碼，有助于設計人員對網頁結構和樣式有更深入的了解。

下面使用HBuilder X創建一個只有文本組成的簡單頁面，通過它來學習網頁的編輯、保存和瀏覽過程。

1）在桌面上雙擊HBuilder X的快捷方式圖標。

2）打開HBuilder X，如果是初次使用HBuilder X，則將顯示“歷次更新說明”，如圖1-6所示。如果以前編輯過網頁，則將顯示上次編輯的HTML文件，如圖1-7所示。若不需要則關閉該標簽卡。

圖1-6 初次使用HBuilderX

圖1-7 顯示上次編輯的HTML文件

3）新建一個HTML文件，選擇“文件”→“新建”→“html文件”命令，如圖1-8所示。

4）顯示“新建html文件”對話框，如圖1-9所示。在“文件名”文本框中輸入html文件名，如“welcome.html”，保持.html不變。

圖1-8 新建html文件

圖1-9 “新建html文件”對話框

5）單擊“瀏覽”按鈕，顯示“選擇文件夾”對話框，如圖1-10所示，找到保存html文件的文件夾，如“D：/web/ch1”，單擊“選擇文件夾”按鈕。返回“新建html文件”對話框，單擊“創建”按鈕，如圖1-11所示。

6）顯示代碼編輯區，其中已經有HTML5網頁結構代碼，如圖1-12所示。在此結構代碼的基礎上輸入示例代碼，如圖1-13所示。

7）如果文件中的縮進排列不整齊，則在文件中右擊，從彈出的快捷菜單中選擇“重排代碼格式”命令，如圖1-14所示，或者直接按〈Ctrl+K〉組合鍵重排文件。

圖1-10 “選擇文件夾”對話框

圖1-11 修改后的“新建html文件”對話框

圖1-12 新建的HTML5網頁結構代碼

圖1-13 在結構代碼的基礎上輸入示例代碼

8）單擊窗口左上角的“保存”按鈕，保存文件。

9）選擇“運行”→“運行到瀏覽器”→“Edge”命令，或者選擇自己安裝的瀏覽器，如圖1-15所示。

圖1-14 快捷菜單

圖1-15 運行菜單

10）運行結果顯示在Edge瀏覽器中，如圖1-16所示。

圖1-16 運行結果

HBuilder X還有許多提高編輯效率的方法，讀者可以在使用過程中逐步熟悉。