3.7 用HBuilder X編輯HTML文檔

上一章為了幫助讀者理解HTML文檔，采用記事本編輯HTML網頁。為了提高效率，本章以后采用HBuilder X編輯HTML文檔。用HBuilder X編輯HTML文檔非常簡單，只需簡單幾個步驟。下面以HBuilder X標準版為例介紹其操作步驟。

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

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

3）新建一個HTML文檔，選擇“文件”→“新建”→“7.html文件”菜單命令，如圖3-13所示。

4）顯示“新建html文件”對話框，如圖3-14所示。在文件名框中輸入HTML文檔名，例如“3-7”，文件類型保持.html不變。

5）單擊“瀏覽”按鈕，顯示“選擇文件夾”對話框，瀏覽到保存HTML文檔的文件夾，例如“D：\WebHTML5”，單擊“選擇文件夾”按鈕，如圖3-15所示。返回“新建html文件”對話框，單擊“創建”按鈕，如圖3-16所示。

6）顯示代碼編輯區，其中已經有HTML5的網頁結構代碼，如圖3-17所示。在﹤title﹥﹤/title﹥標簽之間單擊，輸入網頁標題，例如“個人博客網站”。

7）在標簽﹤body﹥后按〈Enter〉鍵，插入空行，將自動縮進。輸入標簽后按〈Enter〉鍵，例如輸入﹤h3﹥﹤/h3﹥標簽，輸入“h”，顯示h開頭的標簽，接著輸入第2個字符“3”，或者按〈↓〉鍵到h3或用鼠標選擇“h3”選項，如圖3-18所示，按〈Enter〉鍵，則該標簽插入到當前位置。在﹤h3﹥﹤/h3﹥標簽之間輸入文字。

8）在﹤h3﹥…﹤/h3﹥后面按〈Enter〉鍵插入一個空行。按〈p〉鍵，再按〈Enter〉鍵，插入﹤p﹥﹤/p﹥標簽，如圖3-19所示。在﹤p﹥﹤/p﹥標簽之間輸入“img”，如圖3-20所示，按〈Enter〉鍵，則插入﹤img src=""﹥標簽，鼠標指針在src后的雙引號中，輸入“D：\WebHTML5\images\blog.jpg”。

9）選擇“編輯”→“插入”→“向下插入空行”菜單命令，或者直接按〈Ctrl+Enter〉組合鍵插入空行。輸入“p”后按〈Enter〉鍵，在﹤p﹥﹤/p﹥之間輸入相關文字。

10）如果文檔中的縮進排列不整齊，在文檔中右擊，從快捷菜單中選擇“重排代碼格式”，如圖3-21所示，或者直接按〈Ctrl+K〉組合鍵重排文檔。

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

12）選擇“運行”→“運行到瀏覽器”→“Chrome”菜單命令，或者選擇自己安裝的瀏覽器，如圖3-22所示。

13）運行結果顯示在Chrome瀏覽器中，如圖3-23所示。

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