7.1 第一个html文档
我们来创建第一个html文档(html文件)。一般来说，web项目的主要html文件叫作index.html： 我建议我们也不例外。为此，右键单击web-storm-10文件夹：
然后输入文件名：
WebStorm将为你创建文件并立即打开它：
实际上，这是一个空的html文档。你在这里看到的都是一些服务信息。
所有实际的数据将位于<body> 和
</body>标签之间。关于标签的详细知识你将在下一节课了解到。
让我们在这些标签之间写一些有趣而又响亮的消息吧。例如：
千里之行，始于足下！
你可以直接复制并粘贴到第8行内(<body>标签之间)。
习惯复制文本——这样错误和拼写错误会更少。现在我的文档看起来像这样：
如果我的文字版本对你来说不够黑暗和响亮，那么选择你自己的吧——毕竟这是你的第一个Web项目。 我建议以下三个选项供选择：
- "黑暗面给了我光明所不能给予的：真正的自由。"
- "黑暗面——是通往无边力量的道路。"
- "我选择了自己的命运，它在黑暗中。"
7.2 启动第一个项目
现在让我们“启动”我们的项目，看看浏览器如何显示我们的html文件。
要启动项目，需要点击顶部菜单中的绿色三角形。在它的左边写着将要运行的文件名：
你也可以按Shift+F10来运行你的文件。
让我们这样做，你会看到浏览器如何显示你的第一个html文件。这是我的浏览器显示的内容：
host在url中用橙色书写 — 是WebStorm启动的项目web服务器。
在url中用绿色书写的路径 — 是从项目根目录到index.html的路径。
用蓝色书写的 — 是WebStorm的服务信息。
用红色标出的文本，是浏览器根据我们的html文档显示的。
7.3 错误的处理
如果我们犯了一些错误会发生什么？浏览器和WebStorm会如何反应？
让我们删掉第9行的第一个字符，看看WebStorm的反应。这是我得到的结果：
我们看到的有：
- 第9行的单词不再是一个标签，因此WebStorm现在用灰色而不是黄色显示它。
- 第10行有一个关闭标签
<html>，虽然<body>标签应该在关闭标签<html>之前。 因此WebStorm在这里看到一个错误。 - 文档中的错误数量显示在右上角——我们有一个错误。
- 错误的位置也在滚动条上重复——右下角。这对长文档来说非常方便。
现在，让我们运行这个文件，看看浏览器如何对错误做出反应：
浏览器也认为不完整的<body>标签只是文本，因此将其显示为普通文本。
缺少结束标签<body>浏览器也不在意：标签问题可能更严重。总体来说，结果还算不错。
GO TO FULL VERSION