Notepad器结合Emmet插件教学要点笔记.pdfVIP

理达课堂教学笔记

第8课：代码编辑器NPP的安装

Npp,指的是Notepadplus,

1：集成IDE开发工具：eclipsestudio/PHP，Dreamweaver,phpStorm

2：文本编辑器开发工具：vim/gvim,editplus,NotepadPlus,Sublime

其中：NotepadPlus,这是我们介绍的重点，以后我们所有的开发，都放在这个

环境下完成。NPP原生支持27种编程语言，通过插件扩展，功能不输那些庞大

的IDE集成软件，最关键的是，这么好用的东西，还是免费，还能定期更新版本！

好用又免费，我们没有理由不用！

1：NPP的与安装：可以到网上直接找，我这直接从软件管家中下；

2：安装很傻瓜，注意一下在桌面放一个快捷方式，方便使用；安装完成后，会

添加到你的右键菜单中，这个是很贴心的设计！

如果仅仅是这样的话，你是体会不到这款工具的强大之处，大量的插件才是NPP

这么受欢迎的根本。下节课，介绍一个超级牛*的工具，让程序员受不释手，

无法割舍的插件：emmet

第9课：NPP中的emmet插件的安装方法

1：并安装：PythonScript;

Emmet插件依赖于Python环境，所以要在系统中安装PythonScript,这个网

上可以直接到;

2：安装emmet插件；

3：设置emmet快捷键；设置为我们熟悉的TAB

下节课是重点，详细介绍一下emmet的常用语法，体现他的迷人！

第10课：emmet插件的使用技巧

Emmet功能强大，语法也很多，但是常用的就那么几个，为了让大家快速上手，

我这里介绍几个最常用的，其它的内容，网上搜一下相关的

1：HTML框架：

Html:5或者“！”直接生成HTML５的框架

html:xt生成HTML4过渡型

html:4s生成HTML4严格型

2：输入后直接按TAB，自动生成对；如div+TAB

3：的嵌套关系：用符合连接有嵌套关系的名称即可

如：divpa+TAB，注意之间不能有空格

4：重复成生用“*”：如：div*3+TAB,

实例，生成一个有5个列表项的列表：ulli*5

5：用“.”给添加类属性，用“#”给添加ID属性；

如：h3.header，div#box

6：用{“文本内容”}给添加文本

如：a{了解详情}

7：同级用“+”连接

如：div#box1+div#box2

8：用（）给进行分组

如：div#box(lass+p#id)*3

9：给的属性直接赋值，将赋值语句