Notepad++ Emmet安装方法教程
Emmet的前身是大名鼎鼎的Zen coding,Web前端开发的话,对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度。
比如Notepad++ 快速编写HTML代码—初始化 HTML文档需要包含一些固定的标签,比如<html>、<head>、<body>等,现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”,然后按Tab键。
Emmet需要 Python Script 的支持,因此这两款插件必须同时安装才能使用。按照官方的方法教程,安装方法有两种。
第一种:用插件管理器安装,打开插件—插件管理器—显示插件下找到emmet插件安装
第二种:手动方法。
先安装Python Script插件 (Python Script:A Python Scripting plugin for Notepad++),官方教程上说可以在插件管理器里面安装。下载Emmet 插件,解压缩到\Program Files\Notepad++\plugins 安装目录,启动notepad++就可以看到Emmet插件了。插件址:https://github.com/emmetio/npp
官方建议是将快捷键Abbreviation设置为tab。
但是,奶牛在安装的过程中发现上面的方法不可行,因为插件根本不工作。有Unknown exception和python script plugin did not accept the script错误提示,环境是win7 x64位系统,找到解决方法是Python Script插件问题,下载Python Script插件重新安装解决了此问题。
插件介绍及安装地址:http://npppythonscript.sourceforge.net/download.shtml
再次安装前要卸载原来的Python Script插件。

打开Notepad++Settings > Shortcut Mapper…对话框,切换到 plugin commands,选中 Expand Abbreviation 项,修改其快捷键为Tab键即可。

Notepad++插件快捷键设置
!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
html:4s
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
html:xs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
#content.aticle.posts
<div id="content" class="aticle posts"></div>
ul#ccc.ddd
<ul id="ccc" class="ddd">
</ul>
div.aaa>ul>li
<div class="aaa">
<ul>
<li></li>
</ul>
</div>
div>ul>li^^span
<div>
<ul>
<li></li>
</ul>
</div>
<span></span>
div>ul>li^^div.clear
<div>
<ul>
<li></li>
</ul>
</div>
<div class="clear"></div>
div>ul>li*6
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
(div>dl>(dt+dl)*3)+footer>p
<div>
<dl>
<dt></dt>
<dl></dl>
<dt></dt>
<dl></dl>
<dt></dt>
<dl></dl>
</dl>
</div>
<footer>
<p></p>
</footer>
div.banner>ul>li*2>((dt+dl)*3)+footer^^span
<div class="banner">
<ul>
<li>
<dt></dt>
<dl></dl>
<dt></dt>
<dl></dl>
<dt></dt>
<dl></dl>
<footer></footer>
</li>
<li>
<dt></dt>
<dl></dl>
<dt></dt>
<dl></dl>
<dt></dt>
<dl></dl>
<footer></footer>
</li>
</ul>
<span></span>
</div>
a
<a href=""></a>
a>{我是链接标题}
<a href="">我是链接标题</a>
link
<link rel="stylesheet" href="">
ul>li.item$*5
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
$ 就表示一位数字,只出现一个的话,就从1开始。如果出现多个,就从0开始。如果我想生成三位数的序号,那么要写三个 $:
ul>li.item$$*5
<ul>
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>
<li class="item04"></li>
<li class="item05"></li>
</ul>
(header>ul.nav>li*5)+article+footer
<header>
<ul class="nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</header>
<article></article>
<footer></footer>
Notepad++ Emmet安装方法教程的更多相关文章
- win8.1系统的安装方法详细图解教程
win8.1系统的安装方法详细图解教程 关于win8.1系统的安装其实很简单 但是有的童鞋还不回 所以今天就抽空做了个详细的图解教程, 安装win8.1系统最好用U盘安装,这样最方便简单 而且系统安装 ...
- Sublime Text3 Package Control和Emmet插件安装方法
因为初学前端,所以今天安装了Sumblime Text 3,然后就停不下来去找Package Control的安装方法. 网络上我找到并尝试过的方法有两种,我使用的是用Python代码去安装并成安装成 ...
- 简单制作 OS X Yosemite 10.10 正式版U盘USB启动安装盘方法教程 (全新安装 Mac 系统)
原文地址: http://www.iplaysoft.com/osx-yosemite.html 简单制作 Mac OS X Yosemite 正式版 USB 启动盘的方法教程: 其实制作 OS X ...
- 面系那个对象开发原则.高内聚.低耦合+Python安装详细教程+print输出带颜色的方法
面系那个对象开发原则.高内聚.低耦合 软件设计中通常用耦合度和内聚度作为衡量模块独立程度的标准.划分摸块的一个准则就是高内聚低耦合. 这是软件工程中的概念,是判断设计好坏的标准,主要是面向OO的设计, ...
- 2018超详细sublime text3+python3.x安装配置教程(附常用插件安装教程)
导读 本文是关于2018年7月最新版sublime text3+pythin3.x下载及安装配置教程,sublime text3版本为3176,python版本为3.7,安装环境是基于windows1 ...
- 常用的Sublime Text插件及安装方法
Package Control 功能:安装包管理 简介:sublime插件控制台,提供添加.删除.禁用.查找插件等功能 使用:https://sublime.wbond.net/installatio ...
- Win7 64位系统,使用(IME)模式VS2010 编写 和 安装 输入法 教程(1)
原文:Win7 64位系统,使用(IME)模式VS2010 编写 和 安装 输入法 教程(1) 首先感谢:http://blog.csdn.net/shuilan0066/article/detail ...
- Ubuntu 16.04 一系列软件安装命令,包括QQ、搜狗、Chrome、vlc、网易云音乐安装方法
1 简介 Ubuntu 16.04安装完后,还需要做一些配置才能愉快的使用,包括添加软件源.安装搜狗输入法.Chrome浏览器.网易云音乐.配置快捷键.安装git等等,下面就跟着我来配置吧,just ...
- Notepad++离线安装使用Markdown插件
1.介绍 MarkdownViewerPlusPlus是Notepad++的Markdown插件, 这个Markdown插件可以在Notepad++中实时动态渲染, 可以同步查看使用Markdown的 ...
随机推荐
- Javascript ----字符串(String)中的方法
涉及字符串时,常用到的几个方法... --------------------------------------------------------------------------------- ...
- Linux下tmpfs与ramfs的区别
ramfs是Linux下一种基于RAM做存储的文件系统.在使用过程中你就可以把ramfs理解为在普通的HDD上建立了一个文件系统,而现在HDD被替换成了RAM,因为是RAM做存储所以会有很高的存储 ...
- 产生冠军 map 的 应用 .
开始 比赛 , 每一次的 比赛 都会有人失败 , 如果产生英雄的话 , 那就是产生 唯一一个 没有被打败的人 , 就是英雄, . #include<stdio.h> #includ ...
- BZOJ 1816 扑克牌
WA的我怀疑人生.. 发现原来是循环中间就要break掉,不然爆int. 总感觉这题可以直接构造啊.. #include<iostream> #include<cstdio> ...
- jquery中bind事件时的命名空间用法(转)
场景:页面上的某个元素bind多个click事件处理函数,视用户的具体交互情况来决定到底使用哪个处理函数. 问题: unbind时会解绑所有的click事件,造成误伤.如果之前bind时有定义处理函数 ...
- Magento后台订单显示产品图片的修改方法
Magento后台订单原来是没有显示产品图片,客服业务还得到网站前台查找这个产品的图片提供给发货部,这样是很不方便的.为提高工作效率,应客服业务要求,现对Magento后台订单进行修改,使订单页面就显 ...
- Dynamic支持CollectionView布局 、 MotionEffects特效 、 BlurImage效果 、 TextKit
1 使用UIDynamicAnimator对集合视图进行布局 1.1 问题 UIKit Dynamic动力模型一个非常有趣的用途就是影响集合视图的布局,可以给集合视图的布局添加各种动力行为,使其产生丰 ...
- C语言----变量及作用域 、 指针 、 指针和数组 、 进程空间 、 字符串
1 使用程序来模拟放球.取球的问题 1.1 问题 栈是一种特殊的线性表,它的逻辑结构和线性表相同,只是其运算规则较线性表有更多的限制,故又称为运算受限的线性表. 栈的定义是限制仅在表的一端进行插入和删 ...
- 《MORE EFFECTIVE C++》条款27 要求或者禁止对象分配在堆上
1. 要求对象分配在堆上 临时对象一般是存在于栈中的,或者是静态对象存在于常量存储区的.那么当创建一个这样的对象的时候,一般是需要隐式或显式地调用构造函数,在销毁的时候调用析构函数的.可以从这方面入手 ...
- 消格子时一个很深的bug的修复纪录
环境: cocos2d-x 2.2.2 jsb 条件:当快速在格子中来回拖拽选取时,会一直在计算指尖和格子的真实区域是否碰撞, 报错:touchMOve时由于不停的调用BOxItem的get ...