您的当前位置:首页Emmet插件使用方法总结
广告

Emmet插件使用方法总结

2023-11-28 来源:酷申汽车网
Emmet插件是一种简化开发的工具,不难发现在前端开发的过程中,很大一部分的工作内容是 HTML、CSS 代码的编写。尤其是没有编辑器的帮助或者工具的使用时效率会特别低下。所以根据HTML和CSS语言的特点诞生了 Emmet(前身是Zen Coding),它可以帮助你更快的进行前端开发,实现自动补齐、填充和代码生成等功能,在它的帮助下能极大的提高代码编写的效率,更有效率的进行前端开发。

一、安装emmet:packages安装

下面方法适用于 sublime text 3。

1、安装 Package ctrl: 使用 ctrl + ~ 打开控制台,输入以下代码:

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen('http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

2、在 Package ctrl 中选择 Install package;

3、搜索 emmet 并安装。

二、快速编写HTML代码

先来看一下这个插件的效果,

新建一个HTML文档,输入“!”或“html:5”,然后按Tab键:

基本语法:

1、生成后代元素:> 大于号表示后面要生成的内容是当前标签的后代

命令:nav>ul>li

每个命令输完后按下Tab键即可快速得到代码

<nav> <ul> <li></li> </ul></nav>

2、生成兄弟元素:+ 加号表示后面的元素和前面的元素是兄弟元素

命令:p+p+bq 得到代码如下:

<p></p><p></p><blockquote></blockquote>

3、生成上级元素:^ 表示^后面的元素与^前面的元素的父元素是平级,即兄弟元素。一个^表示提升一个层级,两个提升两级

命令:p+p>p>span+em^bq 得到代码如下:

<p></p><p> <p><span></span><em></em></p> <blockquote></blockquote></p>

命令:p+p>p>span+em^^bq 得到代码如下:

<p></p><p> <p><span></span><em></em></p></p><blockquote></blockquote>

4、生成类名: . Emmet 默认的标签为 p ,如果我们不给出标签名称的话,默认就生成 p 标签。Emmet会根据父标签进行判定。比如在<ul>中输入.item,就会生成<li class="item"></li>。

命令:.container 得到代码如下:

<p class="container"></p>

如果想生成多个类名可连续写

命令: .container.wrapper.more 得到代码如下:

<p class="container wrapper more"></p>

5、生成ID:#

命令:#container 得到代码如下:

<p id="container"></p>

6、生成分组:() 用括号进行分组,这样可以更加明确要生成的结构,特别是层次关系

命令:(.foo>h1)+(.bar>h2) 得到代码如下:

<p class="foo"> <h1></h1></p><p class="bar"> <h2></h2></p>

7、重复生成多份:* *号后面是想重复生成的份数

命令:ul>li*5 得到代码如下:

<ul> <li></li> <li></li> <li></li> <li></li> <li></li></ul>

8、对生成内容依次编号:$ $就表示一位数字,只出现一个的话,就从1开始。如果出现多个,就从0开始。如果我想生成三位数的序号,那么要写三个$

命令: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>

只能这样单调的生成序号?对于强大的 Emmet 来说,肯定不会了,我们也可以在 $ 后面增加 @- 来实现倒序排列:命令:ul>li.item$@-*5 得到代码如下:

<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li></ul>

同样,我们也可以使用 @N 指定开始的序号

命令:ul>li.item$@3*5 得到代码如下:

<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li></ul>

至于ul>li.item$@-3*5 生成什么你们自己琢磨吧!

9、生成自定义属性:[attr] 中括号里面的内容是你想添加的属性

命令:td[rowspan=2 colspan=3 title] 得到代码如下:

<td rowspan="2" colspan="3" title=""></td>

10、生成文本内容:{} 大括号里面是你想添加的文本内容

命令:a{Click me} 得到代码如下:

<a href="">Click me</a>

命令:p>{Click }+a{here}+{ to continue} 得到代码如下:

<p>Click <a href="">here</a>to continue</p>

到此为止基本语法内容也就这么多,剩下的就是加强理解与练习了。

注意:在写命令的时候,你可能为了代码的可读性,使用一些空格什么的排版一下,这将会导致代码无法使用。但是{}[]中可存在空格

ul>li.item${item$}*3

 <ul> <li class="item1">item1</li> <li class="item2">item2</li> <li class="item3">item3</li> </ul>

#content>.article>h1.ok[title=parpername][style=color:#000;]+h3.no[title=subname][style=color:#fff;]+p.words

 <p id="content"> <p class="article"> <h1 class="ok" title="papername" style="color:#000;"></h1> <h3 class="no" title="subname" style="color:#fff;"></h3> <p class="words"></p> </p> </p> 

练习的过程中我们可以试着反推出命令行

 <p class="header"> <ul class="nav"> <li><a href="" style="block"><span>name</span></a></li> <li><a href="" style="block"><span>name</span></a></li> <li><a href="" style="block"><span>name</span></a></li> <li><a href="" style="block"><span>name</span></a></li> <li><a href="" style="block"><span>name</span></a></li> <li><a href="" style="block"><span>name</span></a></li> </ul> </p>
 <table> <thead> <td class="col1"></td> <td class="col2"></td> <td class="col3"></td> <td class="col4"></td> </thead> <tbody> <tr class="row01"> <td class="col1"></td> </tr> <tr class="row02"> <td class="col2"></td> </tr> <tr class="row03"> <td class="col3"></td> </tr> </tbody> <tfoot> <td></td> <td></td> <td></td> <td></td> <td></td> </tfoot> </table>
 <html> <head> <title></title> <style type="text/css"></style> <script src="abc1.js" type="text/javascript"></script> <script src="abc2.js" type="text/javascript"></script> <script src="abc3.js" type="text/javascript"></script> </head> <body> <p class="content"> <p class="nav"> <ul> <li><a href=""><span></span></a></li> </ul> </p> </p> <p class="sidebar"> <p class="top"></p> <p class="middle"></p> <p class="bottom"></p> </p> <p class="mian"> <p class="article"> <h1>article1</h1> </p> <p class="article"> <h1>article2</h1> </p> <p class="article"> <h1>article3</h1> </p> </p> </body> <p class="footer">copyright</p> </html>

这些代码的命令你反推出来了吗?

1.命令:.header>ul.nav>li*6>a[style=block]>span{name}

2.命令:table>(thead>td.col$*4)+(tbody>tr.row$$*3>td.col$)+(tfoot>td*5)

3.命令: html>(head>title+style[type=text/css]+script[type=text/javascript][src=abc$.js]*3)+(body>(.content>.nav>ul>li>a>span)+(.sidebar>.top+.middle+.bottom)+(.mian>.article*3>h1{article$}))+(.footer{copyright})

三、emmet在HTML与CSS中的应用

emmet除了能快速编辑出上面的代码以外,还有一些其他代码也可快速编辑,具体的、全面的快速编辑方式,还请浏览emmet官方文档(有详细说明哦!)

下面只列出一些常用的快速编辑方式

命令:link

<link rel="stylesheet" href="" />

命令:script:src

<script src=""></script>

命令:img

<img src="" alt="" />

命令:inp

<input type="text" name="" id="" />

命令:input:p

<input type="password" name="" id="">

命令:btn 结果:<button></button>

命令:btn:s 结果:<button type="submit"></button>

命令:btn:r 结果:<button type="reset"></button>

CSS中缩写

单位:

  • p 表示%
  • e 表示 em
  • r表示 rem
  • 宽度:

    命令:w100 结果:width:100px; 默认单位px

    命令:w100p 结果:width:100%;

    高度:

    命令:h100r 结果:height: 100rem;

    颜色:

    命令:c#3 结果: color: #333;

    命令:c#e0 结果: color: #e0e0e0;

    命令:c#fc0 结果: color: #ffcc00;

    CSS3前缀:

  • w 表示 -webkit-
  • m 表示 -moz-
  • s 表示 -ms-
  • o 表示 -o-
  • 命令:-wmso-transform

    结果:

    -webkit-transform: ; -moz-transform: ; -ms-transform: ; -o-transform: ; transform: ;

    属性模糊匹配:

    如果有些缩写你拿不准,Emmet会根据你的输入内容匹配最接近的语法,比如输入ov:h、ov-h、ovh和oh,生成的代码是相同的:

    所以在平时使用的时候可留意emmet的提示

    命令:h10p+m5e 结果:height: 10%;margin: 5em;

    四、定制Emmet插件

  • 添加新缩写或更新现有缩写,可修改snippets.json文件
  • 更改Emmet过滤器和操作的行为,可修改preferences.json文件
  • 定义如何生成HTML或XML代码,可修改syntaxProfiles.json文件
  • 这里都是英文文档,没有英语基础的同学可就有点抓瞎了。

    “公欲利其事,必先利其器”,在前端的开发过程中,掌握一些开发工具的使用技巧,能够使开发过程变得轻松快捷,更有利于关注于代码程序的开发。

    小编还为您整理了以下内容,可能对您也有帮助:

    在Eclipse中在线安装Emmet和图文使用教程

    ZenCoding 升级为 Emmet 之后,基于 Eclipse 的插件安装地址也发生了变化,下面是在基于 Eclipse 的 IDE 中安装和使用 Emmet 的图文示例。

    一、打开 Eclipse 的插件安装界面

    启动 Eclipse,选择 HelpInstall New Software ...

    二、输入插件安装地址:

    单击弹出的对话框中的 Add... 按钮,弹出输入插件安装地址及插件名称的对话框:

    在弹出的对话框的 Location 一栏输入 http://emmet.io/eclipse/updates/ ,在 Name 一栏随便输入一个名字,比如 Emmet,单击 OK:

    三、下载 Emmet:

    当 Install 对话框中显示出了 Emmet 选择项后,选择 Emmet,一路 Next,到最后一步,选择 I accept the terms of th license agreements,单击 Finish,弹出下载对话框,开始下载必要的组件:

    四、安装 Emmet:

    下载完毕后,会弹出要求确认安装的对话框,点击 OK,安装过程很快就完成了。

    五、使用 Emmet:

    单击上一步中的 Yes,重启 Eclipse,就可以使用 Emmet 了。

    新建或打开一个 HTML、XML 类的文件(JSP、PHP文件也可以),输入 Emmet 指令,再按下 Tab 键,就可以了。

    sublime text 3装了emmet插件怎么用

    先关闭Sublime

    text

    3:

    第一步:下载sublime_package_control-master.zip

    ,解压命名文件夹为Package

    Control。(注意大小写)

    第二步:下载sublime_package_control-python3.zip,解压后覆盖到刚刚的Package

    Control中,完成插件API函数的更新。

    第三步:打开Sublime

    Text

    3,选择菜单:Preference-->Browse

    Package...

    浏览插件

    第四步:把package

    control复制到此目录,重启

    Sublime

    text

    3。

    然后菜单Preferences就会多了两个Package..的东西如下:

    Package

    Control

    安装成功

    第五步:

    点击菜单Preference-->Package

    Control

    点击Install

    Package

    等待几秒后再弹出如下内容,敲键盘emmet,选择如下:

    Emmet

    安装完成后,会显示如下屏幕:然后会自动安装PyV8,安装完成,重启

    Sublime

    Text

    3。

    测试:

    重启之后还会看到左下角再次呈现

    Loading

    PyV8

    的提示,待其载入完毕,打开一个新文档最后测试,输入指令(不行就再重启一下)

    ul#test>li*4

    按Ctrl+e

    生成---

    复制代码

    代码如下:

    notepad的emmet插件怎么使用

    1
    首先当然是要下载Notepad++,没有他你的插件也没法安装呀。一般直接百度
    notepad++,百度给推荐的这个就很好用。notepad++是开源的,随便一个都不用担心使用过程中出现问题的。
    2
    安装Emmet插件,这个一般也比较简单,就是把下载的文件安装到Notepad++目录下面的plugins下面即可。这样emmet插件就算安装完了,重新打开notepad++,在插件下面就可以看到他。当然就算你看到,当你想使用的时候发现是不起作用的。那就需要安装Python Script了。
    3
    安装Python Script,他是最麻烦的一键事情,我是走了好多弯路才安装成功的。一开始也是以为直接把插件放到plugins下面就可以了。但是启动Notepad++的时候发现报错。这可郁闷死我了,感觉要成功的样子.下面我就开始讲一下重点了。
    4
    下载的文件一个是PythonScript_1.0.8.0.msi这个格式的。这时候你就要解压一下(右键解压到当前文件夹就可以了),解压出一个文件夹如图所示。我们需要的是里面的PythonScript这个文件夹。里面红框的四个文件是重点,其他可以忽略不用。
    多图
    5
    然后将python27.dll文件复制到Notepad++安装目录的根目录下。
    6
    最后把其他三个文件放到plugins文件夹中就ok了。
    7
    最后重新打开软件,安装完Emmet后,强烈建议更改 Expand Abbreviation 的键盘快捷键为Tab键。打开Notepad++设置 > 管理快捷键…对话框,切换到 plugin commands,选中 Expand Abbreviation 项,修改其快捷键为Tab键即可。
    8
    最后的最后测试一打开 HTML 或 CSS 文件->按语法编写指令->按下 TAB 键->生成!例如:ul>li*5,后按下tab键,就是制动生成了一个5个li.

    notepad的emmet插件怎么使用

    1
    首先当然是要下载Notepad++,没有他你的插件也没法安装呀。一般直接百度
    notepad++,百度给推荐的这个就很好用。notepad++是开源的,随便一个都不用担心使用过程中出现问题的。
    2
    安装Emmet插件,这个一般也比较简单,就是把下载的文件安装到Notepad++目录下面的plugins下面即可。这样emmet插件就算安装完了,重新打开notepad++,在插件下面就可以看到他。当然就算你看到,当你想使用的时候发现是不起作用的。那就需要安装Python Script了。
    3
    安装Python Script,他是最麻烦的一键事情,我是走了好多弯路才安装成功的。一开始也是以为直接把插件放到plugins下面就可以了。但是启动Notepad++的时候发现报错。这可郁闷死我了,感觉要成功的样子.下面我就开始讲一下重点了。
    4
    下载的文件一个是PythonScript_1.0.8.0.msi这个格式的。这时候你就要解压一下(右键解压到当前文件夹就可以了),解压出一个文件夹如图所示。我们需要的是里面的PythonScript这个文件夹。里面红框的四个文件是重点,其他可以忽略不用。
    多图
    5
    然后将python27.dll文件复制到Notepad++安装目录的根目录下。
    6
    最后把其他三个文件放到plugins文件夹中就ok了。
    7
    最后重新打开软件,安装完Emmet后,强烈建议更改 Expand Abbreviation 的键盘快捷键为Tab键。打开Notepad++设置 > 管理快捷键…对话框,切换到 plugin commands,选中 Expand Abbreviation 项,修改其快捷键为Tab键即可。
    8
    最后的最后测试一打开 HTML 或 CSS 文件->按语法编写指令->按下 TAB 键->生成!例如:ul>li*5,后按下tab键,就是制动生成了一个5个li.

    如何在Dreamweaver中使用emmet插件

    首先需要保证你的Dreamweaver是完整版的,也就是说有安装插件的部分可以用。

    然后我们可以在网上找到emmet插件,是以zxp后缀名结尾的。

    再然后打开Dreamweaver软件,单击菜单栏的帮助按钮,在子菜单中选择“扩展管理”选项。

    然后会弹出安装插件的窗口,点击上面的“安装”按钮。

    再然后会弹出选择的窗口,找到emmet插件,点击打开即可。

    安装好之后就可以在扩展管理界面看到插件了,如果想禁用插件,只要在插件名称前面去掉对勾即可。

    如何在Dreamweaver中使用emmet插件

    首先需要保证你的Dreamweaver是完整版的,也就是说有安装插件的部分可以用。

    然后我们可以在网上找到emmet插件,是以zxp后缀名结尾的。

    再然后打开Dreamweaver软件,单击菜单栏的帮助按钮,在子菜单中选择“扩展管理”选项。

    然后会弹出安装插件的窗口,点击上面的“安装”按钮。

    再然后会弹出选择的窗口,找到emmet插件,点击打开即可。

    安装好之后就可以在扩展管理界面看到插件了,如果想禁用插件,只要在插件名称前面去掉对勾即可。

    DroidEdit中emmet如何使用

    1、双桌面已经安装好的 “Notepad++” 程序,启动 Notepad++ 程序。

    2、点开菜单 “插件--->Plugin Manager--->Show Plugin Manager”。

    3、进入 “Plugin Manager” 对话框,打开 “Available” 选项卡,勾选 “Emmet”,点右下角的 “Install”。

    4、因为Emmet 需要 PythonScript 插件的支持。所以默认它会把这两个插件都安装。

    5、安装完成后,提示需要重新启动 “Notepad++”,点“是”即可。

    为什么我安装完emmet后不能快速生成html

    如果你从事Web前端开发,使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度
      工具/原料
      电脑一台,Emmet插件,reamweaver CS5
      方法/步骤
      初始化
      HTML文档需要包含一些固定的标签,比如<html>、<head>、<body>等,现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”,然后按Tab键:

      html:5 或!:用于HTML5文档类型
      html:xt:用于XHTML过渡文档类型
      html:4s:用于HTML4严格文档类型

      轻松添加类、id、文本和属性
      连续输入元素名称和ID,Emmet会自动为你补全,比如输入p#foo:
      连续输入类和id,比如p.bar#foo,会自动生成
      嵌套
      现在你只需要1行代码就可以实现标签的嵌套。
      >:子元素符号,表示嵌套的元素
      +:同级标签符号
      ^:可以使该符号前的标签提升一行
      效果如下图所示:

      分组
      你可以通过嵌套和括号来快速生成一些代码块,比如输入(.foo>h1)+(.bar>h2),会自动生成如下代码:

      Html代码

      <div class="foo">
      <h1></h1>
      </div>
      <div class="bar">
      <h2></h2>
      </div>

      隐式标签
      声明一个带类的标签,只需输入div.item,就会生成<div class="item"></div>。 在过去版本中,可以省略掉div,即输入.item即可生成<div class="item"></div>。现在如果只输入.item,则Emmet会根据父标签进行判定。比如在<ul>中输入.item,就会生成<li class="item"></li>。
      下面是所有的隐式标签名称:
      li:用于ul和ol中
      tr:用于table、tbody、thead和tfoot中
      td:用于tr中
      option:用于select和optgroup中

      定义多个元素
      要定义多个元素,可以使用*符号。比如,ul>li*3可以生成如下代码:

      Html代码

      <ul>
      <li></li>
      <li></li>
      <li></li>
      </ul>

      定义多个带属性的元素
      如果输入 ul>li.item$*3,将会生成如下代码:

      Html代码

      <ul>
      <li class="item1"></li>
      <li class="item2"></li>
      <li class="item3"></li>
      </ul>

    为什么我安装完emmet后不能快速生成html

    如果你从事Web前端开发,使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度
      工具/原料
      电脑一台,Emmet插件,reamweaver CS5
      方法/步骤
      初始化
      HTML文档需要包含一些固定的标签,比如<html>、<head>、<body>等,现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”,然后按Tab键:

      html:5 或!:用于HTML5文档类型
      html:xt:用于XHTML过渡文档类型
      html:4s:用于HTML4严格文档类型

      轻松添加类、id、文本和属性
      连续输入元素名称和ID,Emmet会自动为你补全,比如输入p#foo:
      连续输入类和id,比如p.bar#foo,会自动生成
      嵌套
      现在你只需要1行代码就可以实现标签的嵌套。
      >:子元素符号,表示嵌套的元素
      +:同级标签符号
      ^:可以使该符号前的标签提升一行
      效果如下图所示:

      分组
      你可以通过嵌套和括号来快速生成一些代码块,比如输入(.foo>h1)+(.bar>h2),会自动生成如下代码:

      Html代码

      <div class="foo">
      <h1></h1>
      </div>
      <div class="bar">
      <h2></h2>
      </div>

      隐式标签
      声明一个带类的标签,只需输入div.item,就会生成<div class="item"></div>。 在过去版本中,可以省略掉div,即输入.item即可生成<div class="item"></div>。现在如果只输入.item,则Emmet会根据父标签进行判定。比如在<ul>中输入.item,就会生成<li class="item"></li>。
      下面是所有的隐式标签名称:
      li:用于ul和ol中
      tr:用于table、tbody、thead和tfoot中
      td:用于tr中
      option:用于select和optgroup中

      定义多个元素
      要定义多个元素,可以使用*符号。比如,ul>li*3可以生成如下代码:

      Html代码

      <ul>
      <li></li>
      <li></li>
      <li></li>
      </ul>

      定义多个带属性的元素
      如果输入 ul>li.item$*3,将会生成如下代码:

      Html代码

      <ul>
      <li class="item1"></li>
      <li class="item2"></li>
      <li class="item3"></li>
      </ul>

    sublimer 的插件要怎么用,我设置了emmet,但是这个文件里不能用注释,这个 注释投入插件要怎么用

    1. 文件快速导航: 这是sublime上面很好用的功能之一,ctrl+p可以调出窗口,菜单上的解释是gotoanythings ,确实如其所言,调出窗口后,直接输入关键字,可以在已打开的项目文件夹中进行快速文件名导航,而且支持模糊搜索,对于不想一直鼠标点开文件夹的同学来说极为方便,并且在该窗口里加上:前缀即为行跳转(ctrl+G),加上@(ctrl+R)前缀在html里是id 关键字导航,css里是每条规则导航,js里则是每个function导航。追问我是想问这个注释插件要怎么用

    我设置了Emmet就不能设置这个注释插件了?

    sublimer 的插件要怎么用,我设置了emmet,但是这个文件里不能用注释,这个 注释投入插件要怎么用

    1. 文件快速导航: 这是sublime上面很好用的功能之一,ctrl+p可以调出窗口,菜单上的解释是gotoanythings ,确实如其所言,调出窗口后,直接输入关键字,可以在已打开的项目文件夹中进行快速文件名导航,而且支持模糊搜索,对于不想一直鼠标点开文件夹的同学来说极为方便,并且在该窗口里加上:前缀即为行跳转(ctrl+G),加上@(ctrl+R)前缀在html里是id 关键字导航,css里是每条规则导航,js里则是每个function导航。追问我是想问这个注释插件要怎么用

    我设置了Emmet就不能设置这个注释插件了?

    sublime text3 emmet插件怎么安装

    preference->package control->install package> emmet / jQuery

    先说jQuery

    jQuery 集成了很多JS的补全功能.例如appendChild, 它会有.

    Emmet

    快捷键

    http://docs.emmet.io/cheat-sheet/

    ! tab 生成html基本格式

    table tab 生成table的标签

    a tab link tab? 生成链接, 和css 链接

    nav>ul>li 生成:

    <nav> <ul> <li></li> </ul></nav>

    nav>ul>li*5

    <nav> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></nav>

    生成#id. class

    div#header

    <div id="header"></div>

    span.abc

    <span class="abc"></span>

    span.abc.def

    <span class="abc def"></span>

    CSS
    po/ pos
    弹出:position:relative;
    poa/ pos:a;/posa
    弹出: position:absolute;

    p
    弹出:padding:;
    b/bo
    bottom:;
    backg/bg
    background:;
    bg+
    image
    bd
    boarder
    m
    margin
    m:a
    margin:auto

    sublime text3 emmet插件怎么安装

    preference->package control->install package> emmet / jQuery

    先说jQuery

    jQuery 集成了很多JS的补全功能.例如appendChild, 它会有.

    Emmet

    快捷键

    http://docs.emmet.io/cheat-sheet/

    ! tab 生成html基本格式

    table tab 生成table的标签

    a tab link tab? 生成链接, 和css 链接

    nav>ul>li 生成:

    <nav> <ul> <li></li> </ul></nav>

    nav>ul>li*5

    <nav> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></nav>

    生成#id. class

    div#header

    <div id="header"></div>

    span.abc

    <span class="abc"></span>

    span.abc.def

    <span class="abc def"></span>

    CSS
    po/ pos
    弹出:position:relative;
    poa/ pos:a;/posa
    弹出: position:absolute;

    p
    弹出:padding:;
    b/bo
    bottom:;
    backg/bg
    background:;
    bg+
    image
    bd
    boarder
    m
    margin
    m:a
    margin:auto

    如何给Notepad++安装Emmet和Python Script插件

    1、下载Emmet和Python Script

    Emmet需要 Python Script 的支持,因此这两款插件必须同时安装才能使用。

    下载地址:

    PythonScript_full_0.9.2.0

    Emmet的Notepad++插件

    2、安装

    Emmet的安装比较简单,下载完解压后复制到Notepad++安装目录的plugins下即可。

    Python Script的安装则稍稍复杂,我走了一些弯路后才搞定。一开始以为将解压后的文件扔到plugins下就行了,但启动Notepad++时总是报错。

    于是我打开 Python Script 的帮助文件,看了一遍安装手册才搞明白。

    下载完PythonScript_full_0.9.2.0.zip后解压,将python27.dll文件复制到Notepad++安装目录的根目录下,同时在plugins文件夹中的全部内容复制到Notepad++安装目录的plugins下。

    为表达清楚,摘录Python Script 的目录结构如下:

    Notepad++ (Notepad++ 安装主目录,一般位于"C:\Program Files"下)

    +

    |-- python27.dll(放在Notepad++ 安装主目录下,和notepad++.exe属于同一目录)

    +-- plugins

    \

    |-- PythonScript.dll

    |

    |-- PythonScript

    | \

    | |-- lib

    | | \

    | | |-- (*.py) 很多 *.py 文件和子目录

    | |

    | |-- scripts

    | \

    | |-- (脚本和一些示例)

    |

    |

    |-- doc

    | \

    | |-- PythonScript

    | \

    | |-- PythonScript.chm(PythonScript帮助文档,英文版)

    Notepad++ (Notepad++ 安装主目录,一般位于"C:\Program Files"下)

    +

    |-- python27.dll(放在Notepad++ 安装主目录下,和notepad++.exe属于同一目录)

    +-- plugins

    \

    |-- PythonScript.dll

    |

    |-- PythonScript

    | \

    | |-- lib

    | | \

    | | |-- (*.py) 很多 *.py 文件和子目录

    | |

    | |-- scripts

    | \

    | |-- (脚本和一些示例)

    |

    |

    |-- doc

    | \

    | |-- PythonScript

    | \

    | |-- PythonScript.chm(PythonScript帮助文档,英文版)

    3、Emmet的工作流程

    安装完Emmet后,强烈建议更改 Expand Abbreviation 的键盘快捷键为Tab键。

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

    然后,就可以按照 Emmet 的工作流程来干活了:

    打开 HTML 或 CSS 文件->按语法编写指令->按下 TAB 键->生成!

    hbuilder emmet插件怎么使用

    包括图片、链接、颜色、字体、脚本、样式、URI、ID、class、自定义JS对象、方法。

    hbuilder emmet插件怎么使用

    包括图片、链接、颜色、字体、脚本、样式、URI、ID、class、自定义JS对象、方法。

    酷申汽车网还为您提供以下相关内容希望对您有帮助:

    sublime text 3装了emmet插件怎么用

    第一步:下载sublime_package_control-master.zip ,解压命名文件夹为Package Control。(注意大小写)第二步:下载sublime_package_control-python3.zip,解压后覆盖到刚刚的Package Control中,完成插件API函数的更新。第三步:...

    notepad的emmet插件怎么使用

    1 首先当然是要下载Notepad++,没有他你的插件也没法安装呀。一般直接百度 notepad++,百度给推荐的这个就很好用。notepad++是开源的,随便一个都不用担心使用过程中出现问题的。2 安装Emmet插件,这个一般也比较简单,就是把...

    emmet如何使用?

    在Emmet中,还有一个功效,能快速帮助你添加类名、ID、文本和属性。使用E#ID添加ID名 使用E.class添加类名 使用E[attr]添加属性 使用E{text}添加文本 省略标签名 在Emmet中可以省略标签名,默认情况下,如.item和div.it...

    DroidEdit中emmet如何使用

    1、双桌面已经安装好的 “Notepad++” 程序,启动 Notepad++ 程序。2、点开菜单 “插件---&gt;Plugin Manager---&gt;Show Plugin Manager”。3、进入 “Plugin Manager” 对话框,打开 “Available” 选项卡,勾选 “Emmet”...

    sublime emmet配置文件在哪

    sublime text 2 emmet插件使用和配置 工具/原料 电脑 sublime text 2 方法/步骤 1 生成一个html空模版文件。html:xt-&gt;tab(图1)。注:要把文件类型更改成html,点击右下角的列表更改(图2-图3)2 生成多个元素,例如...

    Sublime Text 3: Emmet 快速生成无意义文字

    3如果安装了Emmet插件,在html页面中输入: lorem 或者 lipsum ,按tab键可以直接生成一段无意义的文字(dummy text)。文字内容如下 这套无意义文字4个为一套,所以可以一次生成四种。得到:还可以在li中使用 得到 ...

    sublime按tab键没特效反应是什么原因?

    1、先看看 emmet 是否安装正确,按下快捷键 Ctrl+Shift+P 打开命令面板,输入 emmet ,如果 emmet 插件安装正常会出现对应的命令;2、排除快捷键冲突,就是尝试不用快捷键会怎样,我们可以通过命令面板调用命令。新建一个...

    HTML速写之Emmet语法规则

    Emmet 使用类似于 CSS 选择器的语法来描述元素的结构与属性。可以使用 &gt; 运算符将元素嵌套在彼此内部 较准确的含义是: 使用 **&gt;** 运算符,您将下降生成的树,所有兄弟元素的位置将根据最深的元素解析 表现为:...

    vs code快速生成HTML头部快捷键或者插件?

    按shift+1打出!,会出现选第一个就可以了,按Enter或tab

    Sublime Text怎么提示html标签属性

    2、输入或选择需要的插件再按Enter(回车)就可以安装插件了:3、在安装过程中,左下角会显示正在安装的提示,静候片刻 4、若安装成功,相应的,左下角会出现安装成功的提示 5、Emmet插件可以说是使用Sublime Text进行前端...

    本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

    Top