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还有许多提高编辑效率的方法，读者可以在使用过程中逐步熟悉。