zoukankan      html  css  js  c++  java
  • 快速编写HTML,CSS代码的有力工具Emmet插件

    Emmet 是一个编辑器插件,它以一种简写的语法规则可用于快速编写html或css文档内容,它支持多种编辑器。

    从官网:http://emmet.io/ 可下载各个编辑器的插件。
    notepad++ 插件下载地址为:https://github.com/emmetio/npp#readme
    也可以从Notepad++ “插件”->“插件管理器”菜单中安装Emmet插件,如果是手动下载安装包方式安装还需要安装Python插件。
    安装好插件后可以在“设置”-》“快捷键管理”菜单中修改快捷键配置为Tab键,这样只需要在编辑器中输入Emmet代码然后按Tab键就可以生成对应的html代码了。

    image

    Emmet支持的简写规则,类似于CSS选择器。(大写的E代表一个HTML标签):

    E: 生成<E></E>
    E#N: 生成<E id="N"></E>
    E.N: 生成<E class="N"></E>
    E{value}: 生成<E>value</E>
    E+N: 生成<E></E><N></N>
    E>N: 生成<E><N></N><E>
    B>E^N: 生成<B><E></E></B><N></N>. >表示下级,^表示上级
    E[attr1="foo1" attr2="foo2"]: 生成<E attr1="foo1" attr2="foo2"></E>
    E*n:生成n个<E></E>
    E$*n: 自动编号,生成<E1></E1><E2></E2>...<EN></EN>, $表示一位数字,如果$$表示01开始编号,$$$表示001开始编号
    E$@m*n: 从m开始自动编号。
    E$@-*n: 倒序自动编号,生成<EN></EN>...<E1></E1>
    (E): 分组

    请看下面的例子。

    p
      
    p#main.item
      
    a[href=http://wikipedia.org]{维基百科}
      
    div>p
      
    div+p
      
    p>span^div

    对应的HTML代码为:

    <p></p>
      
    <p id="main" class="item"></p>
      
    <a href="http://wikipedia.org">维基百科</a>
      
    <div>
      <p></p>
    </div>
      
    <div></div>
    <p></p>
      
    <p><span></span></p>
    <div></div>

    html:5或! : 生成html5骨架代码,如下:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>

    html:xt :生成html4 traditional 骨架代码。
    html:4s : 生成html4 strict 骨架代码。

     

    [1] 不错的Emmet教程:http://www.tedlife.com/qian_duan_dai_ma_li_qi_emmet.html

    [2] Emmet的高级功能:http://salonglong.com/emmet-advanced.html

    [3] Emmet全部符号介绍:http://docs.emmet.io/cheat-sheet/ 

  • 相关阅读:
    Java 代码块
    Java 方法签名
    Java 中的继承
    Java 中的this关键字
    Java 静态对象 static
    Java报错 -- The public type c must be defined in its own file
    Java 构造方法
    Java 成员变量和局部变量
    Java 对象的创建和使用
    JavaScript单线程和异步机制
  • 原文地址:https://www.cnblogs.com/weekend001/p/3566250.html
Copyright © 2011-2022 走看看