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網頁結構代碼