HTML5基础教程(二) - 博客详情

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

1.如何使用WebStrom创建web静态页面项目

如何使用WebStrom创建web静态页面项目。具体步骤如下：

1.创建工作空间

在D盘创建文件夹html_lesson作为项目的工作空间。

2.打开WebStorm->New Project->Empty Project,右侧选择工作空间目录。如下图：

3.选择工作空间目录，弹出菜单选择New->Directory,如下下图：

4.输入子目录名字作为模块名称。例如：helloworld,弹出菜单选择 New->HTML,如下图：

5.文件命名为index.html如下图,编辑代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
<h1>欢迎大家访问我的个人主页</h1>
<hr>
</body>
</html>

在右上角的浏览器工具栏，选择适合的浏览器打开。推荐使用Chrome.

运行效果如下：

2.静态项目目录结构

就像写Java程序一样，编写静态页面项目也必须遵守大家约定的命名规范和目录结构。一个常见的静态项目的目录结构遵循以下规律。如下图所示：