1.3 编写第一个HTML文件
1.3.1 HTML文件的编写方法
编写HTML文件主要有3种方法，下面分别进行介绍。
1.手工直接编写
由于HTML语言编写的文件是标准的ASCII文本文件，所以我们可以使用任何文本编辑器来打开并编写HTML文件，如Windows系统自带的记事本。
2.使用可视化软件
可以使用WebStorm、Dreamweaver、Sublime等软件进行可视化的网页编辑制作。
3.由Web服务器一方实时动态生成
这需要通过后端的网页编程来实现，如JSP、ASP、PHP等，一般情况下需要数据库的配合。
1.3.2 手工编写页面
下面使用记事本来编写第一个HTML文件，操作步骤如下：
（1）选择“开始”→“程序”→“附件”→“记事本”命令，打开 Windows 系统自带的记事本，如图1.4所示。
图1.4 打开记事本
（2）在记事本中直接输入HTML代码，具体代码如下：
（3）输入代码后，在记事本中显示出代码的内容，如图1.5所示。
图1.5 显示了代码的记事本
（4）选择记事本菜单栏中的“文件”→“保存”命令，弹出如图1.6所示的“另存为”对话框。
图1.6 “另存为”对话框
（5）在“另存为”对话框中，首先选择存盘的文件夹，然后在“保存类型”下拉列表框中选择“所有文件”，在“编码”下拉列表框中选择“UTF-8”，并填写文件名，例如，将文件命名为1-2.html，最后单击“保存”按钮。
（6）关闭记事本，回到存盘的文件夹，双击如图1.7所示的1-2.html文件，可以在浏览器（推荐谷歌浏览器）中看到最终页面效果，如图1.8所示。
图1.7 保存好的HTML文件
图1.8 最终页面效果
1.3.3 使用可视化软件WebStorm制作页面
WebStorm是JetBrains公司旗下的一款JavaScript开发工具。该软件支持不同浏览器的代码执行效果，同时支持当前流行的JavaScript框架，如jQuery、YUI、Dojo、Prototype、Mootools和Bindows等，被广大JavaScript开发者誉为Web前端开发神器、最强大的HTML5编辑器、最智能的JavaScript IDE等。
下面以WebStorm英文版为例，首先说明安装WebStorm 2018.2.5的过程，然后介绍制作HTML5页面的方法。
1.下载与安装
（1）打开浏览器，输入网址https：//www.jetbrains.com/webstorm/download/＃section=windows，进入WebStorm官网地址下载页，如图1.9所示。
图1.9 WebStorm官网地址下载页
（2）单击DOWNLOAD按钮，开始下载WebStorm 2018.2.5程序，如图1.10所示。
图1.10 下载WebStorm 2018.2.5程序
（3）下载完成之后，双击打开WebStorm-2018.2.5.exe文件，进入WebStorm的安装欢迎界面，如图1.11所示。
（4）单击Next按钮，将显示如图1.12所示的界面，在该界面中单击Browse按钮选择一个安装路径（默认的安装路径是“C：\Program Files\JetBrains\WebStorm 2018.2.5”）。
图1.11 安装欢迎界面
图1.12 选择安装路径
（5）单击Next按钮，弹出选择安装选项的界面，在该界面中可以设置是否创建WebStorm的桌面快捷方式，以及选择创建关联文件，如图1.13所示。
（6）单击Next按钮，选择开始菜单文件夹，默认为JetBrains，如图1.14所示。
（7）单击Install按钮，显示安装进度条，如图1.15所示。
（8）安装进程结束后，弹出如图 1.16 所示的界面，在该界面中单击 Finish 按钮，完成WebStorm 2018.2.5的安装。
图1.13 选择安装选项
图1.14 选择“开始”菜单文件夹
图1.15 显示安装进度条
图1.16 安装完成
2.创建并运行HTML文件
（1）选择“开始”→“所有程序”→JetBrains WebStorm 2018.2.5命令，启动WebStorm软件的主程序，进入WebStorm欢迎界面，如图1.17所示。
图1.17 WebStorm欢迎界面
（2）单击Create New Project链接，新建一个工程，在Location文本框中输入工程存放的路径，也可以单击文本框右侧的文件夹按钮选择路径，如图1.18所示。然后单击Create按钮，完成工程的创建。
图1.18 输入工程存放的路径
（3）选定新创建的HTML工程，单击鼠标右键，在弹出的快捷菜单中选择New→HTML File命令，创建一个HTML文件，如图1.19所示。
图1.19 创建HTML文件
（4）选择完成之后会弹出如图1.20所示的对话框，在Name文本框中输入文件名，在这里将HTML文件命名为index.html，并在Kind下拉列表框中选择HTML 5 file选项。
图1.20 为HTML5文件命名
（5）单击OK按钮，打开新建的HTML5文件，如图1.21所示。
图1.21 新建的HTML5文件
（6）接下来就可以编辑HTML5文件了，在＜body＞标签中输入文字，如图1.22所示。
图1.22 编辑HTML5文件
输入完成后，WebStorm 会自动进行保存。此时，双击 D：\Documents\untitled 路径下的index.html文件，浏览器将显示如图1.23所示的运行效果。
图1.23 运行HTML5文件