3.7 用HBuilder X编辑HTML文档
17 用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-11 初次打开时的显示效果
图3-12 显示上次编辑的HTML代码
3）新建一个HTML文档，选择“文件”→“新建”→“7.html文件”菜单命令，如图3-13所示。
4）显示“新建html文件”对话框，如图3-14所示。在文件名框中输入HTML文档名，例如“3-7”，文件类型保持.html不变。
图3-13 新建HTML文档
图3-14 “新建html文件”对话框
5）单击“浏览”按钮，显示“选择文件夹”对话框，浏览到保存HTML文档的文件夹，例如“D：\WebHTML5”，单击“选择文件夹”按钮，如图3-15所示。返回“新建html文件”对话框，单击“创建”按钮，如图3-16所示。
图3-15 “选择文件夹”对话框
图3-16 返回“新建html文件”对话框
6）显示代码编辑区，其中已经有HTML5的网页结构代码，如图3-17所示。在﹤title﹥﹤/title﹥标签之间单击，输入网页标题，例如“个人博客网站”。
7）在标签﹤body﹥后按〈Enter〉键，插入空行，将自动缩进。输入标签后按〈Enter〉键，例如输入﹤h3﹥﹤/h3﹥标签，输入“h”，显示h开头的标签，接着输入第2个字符“3”，或者按〈↓〉键到h3或用鼠标选择“h3”选项，如图3-18所示，按〈Enter〉键，则该标签插入到当前位置。在﹤h3﹥﹤/h3﹥标签之间输入文字。
图3-17 HTML5网页结构代码
图3-18 输入标签的第一个字母
8）在﹤h3﹥…﹤/h3﹥后面按〈Enter〉键插入一个空行。按〈p〉键，再按〈Enter〉键，插入﹤p﹥﹤/p﹥标签，如图3-19所示。在﹤p﹥﹤/p﹥标签之间输入“img”，如图3-20所示，按〈Enter〉键，则插入﹤img src=""﹥标签，鼠标指针在src后的双引号中，输入“D：\WebHTML5\images\blog.jpg”。
图3-19 插入﹤p﹥﹤/p﹥标签
图3-20 输入“img”
9）选择“编辑”→“插入”→“向下插入空行”菜单命令，或者直接按〈Ctrl+Enter〉组合键插入空行。输入“p”后按〈Enter〉键，在﹤p﹥﹤/p﹥之间输入相关文字。
10）如果文档中的缩进排列不整齐，在文档中右击，从快捷菜单中选择“重排代码格式”，如图3-21所示，或者直接按〈Ctrl+K〉组合键重排文档。
11）单击窗口左上角的“保存”按钮，保存文件。
12）选择“运行”→“运行到浏览器”→“Chrome”菜单命令，或者选择自己安装的浏览器，如图3-22所示。
图3-21 快捷菜单
图3-22 “运行”菜单
13）运行结果显示在Chrome浏览器中，如图3-23所示。
HBuilder X还有许多提高编辑效率的方法，读者可以在使用过程中逐步熟悉。