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