工具使用| 学习笔记-阿里云开发者社区

工具使用| 学习笔记

2022-11-01 99

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 快速学习工具使用。

开发者学堂课程【零基础学前端 HTML+CSS ：工具使用】学习笔记，与课程紧密联系，让用户快速学习知识。

内容介绍：

一、提高工作效率-开发工具

二、DREAMWEAVER

三、WebStorm

记事本工具写 HTML 代码不方便，不能进行代码提醒和关键词高亮显示。因此采用开发工具的代码视图。

之前我们写 html 代码时所用工具都是文本编辑器，但文本编辑器在经过不断升级和改造后，有 DREAMWEAVER、WebStorm 这种开发的工具

首先介绍第一个软件 DREAMWEAVER，在打开软件后，看到这是一个可视化的面板，在面板中新建 html 文档

可以看到现在这种代码窗口跟刚才 EditPlus 窗口本身是一样的，都是属于带颜色标记的代码窗口，然后在这个界面可以直接写我们上节写的内容

输入：

<p>你好</p>

<p>中国</p>

我们先回到问题这种界面为什么叫可视化开发工具呢？

简单说它是一个直接设计就可以写代码的一个工具。所以从设计的面板就可以看到它就像 IE 浏览器一样将生成好的内容直接显示出来。同时也可以在此处直接可视化工具，直接继续写入你好北京，返回代码板块时，会反向生成代码，是一个互换的工具

然后点击保存，生成的文件可以点击上方预览

如下图会直接调用我们的浏览器进行预览

接着介绍 WebStorm

它没有设计的窗口，但是有很多新的组件，但是运行这样的开发工具要求电脑配置高

进入后新建项目，我们可以看到在新建项目时有很多框架

创建了 html5 后就可以用 html5 的语法来生成新的一个项目，它也是一个带彩色多提示的开发工具，在这里是直接从 github 下载相关的工具包，这时需要自己进行联网。

打开后界面

敲<p会出现提醒下面会应用到的一些词，比如说它的属性都可以直接调用出来。具体调用出来的版本是根据上面创建的项目的版本去决定，比如创建 HTML 5 file

下列就有创建 HTML 5 file 的声明 <!DOCTYPE html>

并且修改标签时，里面会出现 html5 相关的属性

总结：这种工具能极大方便我们开发的效率，减少我们写代码出错的情况。所以推荐大家使用这种工具来写 html 的代码

工具使用| 学习笔记