开发者学堂课程【零基础学前端 HTML+CSS ：工具使用】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5108
工具使用
内容介绍：
一、提高工作效率-开发工具
二、DREAMWEAVER
三、WebStorm
一、提高工作效率-开发工具
记事本工具写 HTML 代码不方便，不能进行代码提醒和关键词高亮显示。因此采用开发工具的代码视图。
之前我们写 html 代码时所用工具都是文本编辑器，但文本编辑器在经过不断升级和改造后，有 DREAMWEAVER、WebStorm 这种开发的工具
二、DREAMWEAVER
首先介绍第一个软件 DREAMWEAVER，在打开软件后，看到这是一个可视化的面板，在面板中新建 html 文档
可以看到现在这种代码窗口跟刚才 EditPlus 窗口本身是一样的，都是属于带颜色标记的代码窗口，然后在这个界面可以直接写我们上节写的内容
输入：
<p>你好</p>
<p>中国</p>
我们先回到问题这种界面为什么叫可视化开发工具呢？
简单说它是一个直接设计就可以写代码的一个工具。所以从设计的面板就可以看到它就像 IE 浏览器一样将生成好的内容直接显示出来。同时也可以在此处直接可视化工具，直接继续写入你好 北京，返回代码板块时，会反向生成代码，是一个互换的工具
然后点击保存，生成的文件可以点击上方预览
如下图会直接调用我们的浏览器进行预览
三、WebStorm
接着介绍 WebStorm
它没有设计的窗口，但是有很多新的组件，但是运行这样的开发工具要求电脑配置高
进入后新建项目，我们可以看到在新建项目时有很多框架
创建了 html5 后就可以用 html5 的语法来生成新的一个项目，它也是一个带彩色多提示的开发工具，在这里是直接从 github 下载相关的工具包，这时需要自己进行联网。
打开后界面
敲<p会出现提醒下面会应用到的一些词，比如说它的属性都可以直接调用出来。具体调用出来的版本是根据上面创建的项目的版本去决定，比如创建 HTML 5 file
下列就有创建 HTML 5 file 的声明 <!DOCTYPE html>
并且修改标签时，里面会出现 html5 相关的属性
总结：这种工具能极大方便我们开发的效率，减少我们写代码出错的情况。所以推荐大家使用这种工具来写 html 的代码
