emmet语法规则 - CSDN
精华内容
参与话题
  • 【Emmet】HTML速写之Emmet语法规则

    万次阅读 多人点赞 2020-09-09 17:26:30
    这里推荐一个Emmet语法规则,让你写的时候爽到飞起,能大大提高代码书写,只需要敲一行代码就能生成你想要的完整HTML结构,下面会介绍如何使用。 Emmet是一款插件,只要能安装他的编辑器都能使用,大部分编辑器都...

    Emmet—写HTML/CSS快到飞起

    在前端开发的过程中,最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等,头疼。这里推荐一个Emmet语法规则,让你写的时候爽到飞起,能大大提高代码书写,只需要敲一行代码就能生成你想要的完整HTML结构,下面会介绍如何使用。

    Emmet是一款插件,只要能安装他的编辑器都能使用,大部分编辑器都可以使用该语法规则,我们平时开发的Sublime TextEclipseNotepad++VS codeAtomDreamweaver等等编辑器都可以使用。

    安装方式和平时安装插件一样搜索这个emmet插件安装,每个编辑器安装方式不同,请各自尝试


    先来个例子:

    这里写图片描述
    这个普通的HTML结构,你需要多久打出来呢?
    我只需要几秒钟,写好下面这条语句,按下键盘Tab键即可看到上图中的结构了

    div#box>p.title+ul.list>li.child$*3{我是第$个}^div#box2
    

    是不是很爽,很快~~啊 ~ 啊~,仅仅一行代码就生成了一个复杂的HTML结构,并且id,class,内容都对应的上


    开始讲解语法吧

    1:html初始结构

    下图中的结构,偷懒的都会直接一个!=> Tab 解决,这样可以快速生成基础的结构,同时防止手写时忘记某个代码块,输入错误的代码。
    这里写图片描述

    2:id(#),class(.)

    id指令:# ; class指令:.

    • div#test
    <div id="test"></div>
    
    • div.test
    <div class="test"></div>
    

    3:子节点(>),兄弟节点(+),上级节点(^)

    子节点指令:> ; 兄弟节点指令:+ ; 上级节点:^

    • div>ul>li>p
    <div>
       <ul>
         <li>
           <p></p>
         </li>
       </ul>
     </div>
    
    • div+ul+p
    <div></div>
    <ul></ul>
    <p></p>
    
    • div>ul>li^div (这里的^是接在li后面所以在li的上一级,与ul成了兄弟关系,当然两个^^就是上上级)
    <div>
       <ul>
         <li></li>
       </ul>
       <div></div>
     </div>
    

    4:重复(*)

    重复指令:*

    • div*5(*号后面添加数字表示重复的元素个数
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
    

    5:分组(())

    分组指令:()

    • div>(ul>li>a)+div>p
      括号里面的内容为一个代码块,表示与括号内部嵌套和外面的的层级无关
    <div>
       <ul>
         <li><a href=""></a></li>
       </ul>
       <div>
         <p></p>
       </div>
     </div>
    

    解释:这里如果不加括号的话,猜想下,a+div这样div就是和a是兄弟关系了,会包含在li里面。懂了吧哈哈

     <div>
       <ul>
         <li>
           <a href=""></a>
           <div>
             <p></p>
           </div>
         </li>
       </ul
    

    6:属性([attr])——id,class都有怎么能少了属性呢

    属性指令:[]

    • a[href=’###’ name=‘xiaoA’] (中括号内填写属性键值对的形式,并且空格隔开
    <a href="###" name="xiaoA"></a>
    

    ###6:编号($)
    编号指令:$

    • ul>li.test$*3 ($代表一位数,后面更上*数字就代表从1递增到填写的数字
     <ul>
       <li class="test1"></li>
       <li class="test2"></li>
       <li class="test3"></li>
     </ul>
    

    注意

    • 一个$ 代表一位数,$$就是两位数了,以此类推就可以形成$(1),$$(01),$$$(001)
    • 如果想自定义从几开始递增的话就利用:$@+数字*数字
      例如:ul>li*3.test$@3
     <ul>
       <li class="test3"></li>
       <li class="test4"></li>
       <li class="test5"></li>
     </ul>
    

    7:文本({})

    文本指令:{}

    • ul>li.test$*3{测试$} ({里面填写内容,可以和$一起组合使用哦}
    <ul>
      <li class="test1">测试1</li>
      <li class="test2">测试2</li>
      <li class="test3">测试3</li>
    </ul>
    

    8:隐式标签

    这个标签没有指令,而是部分标签可以不使用输入标签,直接输入指令,即可识别父类标签。

    例如:.test

    <div class="test"></div>
    

    例如:ul>.test$*3

     <ul>
       <li class="test1"></li>
       <li class="test2"></li>
       <li class="test3"></li>
     </ul>
    

    例如:select>.test$*5

    <select name="" id="">
      <option class="test1"></option>
      <option class="test2"></option>
      <option class="test3"></option>
      <option class="test4"></option>
      <option class="test5"></option>
    </select>
    

    等等…
    隐私标签有如下几个:

    • li:用于 ul 和 ol 中
    • tr:用于 table、tbody、thead 和 tfoot 中
    • td:用于 tr 中
    • option:用于 select 和 optgroup 中

    最后就是:看没用,操作几遍,几分钟你就能掌握这些指令,然后飞快的撸码

    展开全文
  • emmet语法

    2020-03-07 11:59:41
    这里推荐一个Emmet语法规则,让你写的时候爽到飞起,能大大提高代码书写,只需要敲一行代码就能生成你想要的完整HTML结构。 Emmet是一款插件,只要能安装他的编辑器都能使用,大部分编辑器都可以使用该语法规...

                                         emmet语法

    在前端开发的过程中,最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等,头疼。这里推荐一个Emmet语法规则,让你写的时候爽到飞起,能大大提高代码书写,只需要敲一行代码就能生成你想要的完整HTML结构。

    Emmet是一款插件,只要能安装他的编辑器都能使用,大部分编辑器都可以使用该语法规则,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等编辑器都可以使用。

    1. 快速生产html骨架:!+ tab键盘

    1. 快速创建某个元素,并指定id、class属性值 id(#),class(.) +tab键盘

    div.allen

    div#my_id

    1. 子节点(>),兄弟节点(+),上级节点(^)

    div>ul>li>p + tab键盘

    div+ul+p  + tab键盘

    没有成功

    1. 重复(*)

    div*5(*号后面添加数字表示重复的元素个数

    1. 分组(())

    (括号里面的内容为一个代码块,表示与括号内部嵌套和外面的的层级无关)

    div>(ul>li>a)+div>p

    去掉括号,div>ul>li>a+div>p

    1. 属性

    1. 文本

    1. 隐式标签

     

    h41 + tab键àheight:41px; 要写在样式里,

    w66 + tab键àwidth:66px

    按住滚轮拖动滚轮:批量输入

    Div*4 + tab键—>生产4个div标签

    Ul>li*5>a + tab键à生产一个ul标签下有5个li子标签,每个li标签又都有一个a标签

    .one“+”.two   + tab键à生产2个div并且其class属性值分别是one、two

    .allen{家用电器}++ tab键—>

    展开全文
  • ———Emmet(Zen Coding)语法规则简介——— 【Zen Coding可谓快速开发HTML和CSS的利器,主要采用仿css类选择器方式编写代码,以下是该利器的基本语法规则和代码示例】 基础符号简介: 1."#"表示id,"."表示类,"+...

    ———Emmet(Zen Coding)语法规则简介———

    【Zen Coding可谓快速开发HTML和CSS的利器,主要采用仿css类选择器方式编写代码,以下是该利器的基本语法规则和代码示例】

    基础符号简介:

    1."#"表示id,"."表示类,"+"表示并列
    2.">"指子内容
    3."()"指同级范围
    4."[]"表示属性
    5.#和.的简写:div.ok等于.ok;div#no等于#no
    6."*"表示标签克隆
    7."{}"表示标签内容
    8."$"表示连续数

    代码示例:

    【Zencoding代码】

    html>head>(title+style+script[src=abc$.js]*3+body>((.content>.nav>ul>li*5>a>span)+(.sidebar>.top+.middle+bottom)+.main>.acticle*3>h1{文章标题$}+p).footer{版权信息})
     
    【展开后页面代码】
     1 <html>
     2 <head>
     3     <title></title>
     4     <style></style>
     5     <script src="abc1.js"></script>
     6     <script src="abc2.js"></script>
     7     <script src="abc3.js"></script>
     8     <body>
     9         <div class="footer">版权信息
    10             <div class="content">
    11                 <div class="nav">
    12                     <ul>
    13                         <li><a href=""><span></span></a></li>
    14                         <li><a href=""><span></span></a></li>
    15                         <li><a href=""><span></span></a></li>
    16                         <li><a href=""><span></span></a></li>
    17                         <li><a href=""><span></span></a></li>
    18                     </ul>
    19                 </div>
    20             </div>
    21             <div class="sidebar">
    22                 <div class="top"></div>
    23                 <div class="middle"></div>
    24                 <bottom></bottom>
    25             </div>
    26             <div class="main">
    27                 <div class="acticle">
    28                     <h1>文章标题1</h1>
    29                     <p></p>
    30                 </div>
    31                 <div class="acticle">
    32                     <h1>文章标题2</h1>
    33                     <p></p>
    34                 </div>
    35                 <div class="acticle">
    36                     <h1>文章标题3</h1>
    37                     <p></p>
    38                 </div>
    39             </div>
    40         </div>
    41     </body>
    42 </head>
    43 </html>

     

    转载于:https://www.cnblogs.com/luojun/p/6475356.html

    展开全文
  • div#Shizukuu <div id="Shizukuu"></div> div.Shizukuu <div class="Shizukuu"></div> 子节点指令:> div>ul>li>p <div> <ul> <.../ul&.

    20200531更新

    • type可以用冒号。
      input:submit
       <input type="submit" value="提交">
      
    CSS Emmets

    /* .test{
    m-5–10
    m-5
    m1.5
    m1.5em
    m1.5ex
    m10foo
    m-10ex20em
    m5ex-10
    w100p
    m10p5e6x
    c#3
    TODO:bd5#0s

    }
    .test p{
    p5+m5
    p!+m10e!
    lh5
    bdrs
    bdrs5
    trf
    h10p+m5e
    border: 1px solid #000;
    -webkit-transform: ;
    -moz-transform: ;
    transform: ;
    ovh
    fl
    position: absolute;
    m3-4-5-6+p3-4-5-6
    }
    TODO:bg+ */

    正文

    • div#Shizukuu
    <div id="Shizukuu"></div>
    
    • div.Shizukuu
     <div class="Shizukuu"></div>
    
    • 子节点指令:>
      div>ul>li>p
    <div>
        <ul>
            <li>
                <p></p>
            </li>
        </ul>
    </div>
    

    结合一下
    div.Shizukuu>ul>li.test>p.test

    	<div class="Shizukuu">
            <ul>
                <li class="test">
                    <p class="test"></p>
                </li>
            </ul>
        </div>
    
    • 兄弟节点指令:+
      div+ul+p
    	<div></div>
        <ul></ul>
        <p></p>
    
    • 上级节点:^
      div>ul>li>p^li>p^li>p
    	<div>
            <ul>
                <li>
                    <p></p>
                </li>
                <li>
                    <p></p>
                </li>
                <li>
                    <p></p>
                </li>
            </ul>
        </div>
    
    • 重复(*)
      div*3
        <div></div>
        <div></div>
        <div></div>
    
    • 分组(())
      div>(ul>li>a)+div>p
    	<div>
            <ul>
                <li><a href=""></a></li>
            </ul>
            <div>
                <p></p>
            </div>
        </div>
    
    • 属性指令:([])
      a[href=### name=##]
        <a href="###" name="##"></a>
    
    • 编号指令:($*)
      div.BLEACH>ul>li.BLEACH $*3>img
    	<div class="BLEACH">
            <ul>
                <li class="BLEACH1"><img src="" alt=""></li>
                <li class="BLEACH2"><img src="" alt=""></li>
                <li class="BLEACH3"><img src="" alt=""></li>
            </ul>
        </div>
    

    一个$ 代表一位数
    li.BLEACH$$*3

    	 <li class="BLEACH01"></li>
        <li class="BLEACH02"></li>
        <li class="BLEACH03"></li>
    
    
    • 自定义从几开始递增的话就利用:$@+数字数字

    • li.BLEACH$@42

    • 文本({})
      ul>li.BLEACH$$*3{202005$$}书写正确

    <ul>
        <li class="BLEACH01">20200501</li>
        <li class="BLEACH02">20200502</li>
        <li class="BLEACH03">20200503</li>
    </ul>
    

    ul>li.BLEACH$$*3{202005$$*3}是错误的

       <ul>
            <li class="BLEACH01">20200501*3</li>
            <li class="BLEACH02">20200502*3</li>
            <li class="BLEACH03">20200503*3</li>
        </ul>
    
    • 隐式标签
      .BLEACH
        <div class="BLEACH"></div>
    

    ul>.BLEACH$$*3>img+p

        <ul>
            <li class="BLEACH01">
                <img src="" alt="">
                <p></p>
            </li>
            <li class="BLEACH02">
                <img src="" alt="">
                <p></p>
            </li>
            <li class="BLEACH03">
                <img src="" alt="">
                <p></p>
            </li>
        </ul>
    

    select>.country$$*3

    <select name="" id="">
            <option class="country01"></option>
            <option class="country02"></option>
            <option class="country03"></option>
        </select>
    

    隐私标签
    li 用于 ul 和 ol 中
    tr 用于 table、tbody、thead 和 tfoot 中
    td 用于 tr 中
    option 用于 select 和 optgroup 中

    展开全文
  • Emmet 语法规则

    2020-07-24 10:19:22
    概念 Emmet (前身为 Zen Coding) 是一...按tab键自动扩展 基本语法 后代:>...//emmet语法 div.wrap>(div.left>div*3.div$)+div.right>a#test //扩展后 <div class="wrap"> <div class="left
  • 网上查了查,发现这位仁兄写的特别棒,就复制了下来,纯是为了自己查阅方便 ...Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性。 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标
  • Sublime3玩转ES6+ReactJs

    万次阅读 2016-08-22 18:04:07
    工欲善其事必先利其器,众所周知,ES6和JSX都是新的语法,而目前的Sublime2已经力不从心了,作为Sublime的忠实粉丝,换IDE又得重新适应,于是折腾了一番,升级Sublime3,不断找相应插件,这里给大家分享一下必
  • Notepad++插件Python Script和Emmet的安装

    千次阅读 2014-02-14 10:57:02
    Emmet,这款神器其实就是 Zen Coding 的升级版,它可以极大的提高代码编写的效率,并提供了一种非常简练的语法规则,立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。 Emmet支持...
  • VSCode 开发Vue必备插件

    万次阅读 多人点赞 2019-05-19 11:31:53
    Vetur —— 语法高亮、智能感知、Emmet等 包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着) EsLint —— 语法纠错 Debugger for Chrome —— 映射vscode上的...
  • emmet基本语法

    千次阅读 2015-03-27 23:20:24
    emmet基本语法
  • emmet下载安装

    千次阅读 2014-09-25 21:25:38
    今天结束个插件,emenet(原名叫zen-codding)
  • 使用Emmet插件,提高html开发效率

    千次阅读 2014-06-24 12:40:12
    Emmet是一个编辑器插件,官方网站提供多编辑器支持。 1. E 代表HTML标签。  2. E#id 代表id属性。  3. E.class 代表class属性。  4. E[attr=foo] 代表某一个特定属性。  5. E{foo} 代表标签包含的内容是...
  • 简写方法,主要是Emmet(常用项目)和Haml(ruby项目),本文主要介绍使用Emmet简写规则Emmet是一个插件,基本用法是简写形式+转化键。 转化键,不同IDE不同,MAC OS的是“tab键”,Wins是"<Ctr+y>,"...
  • Emmet 插件使用教程

    千次阅读 2016-01-08 09:10:35
    1)使用 Emmet 生成 HTML 的语法详解 生成 HTML 文档初始结构 HTML 文档的初始结构,就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个 “!” 就可以生成一个 HTML5 的标准文档初始结构,...
  • 安装插件Python Script和Emmet: 最近在做一个项目,涉及到大量的HTML、CSS代码的编写,手动写代码效率实在是 低下。于是想搜索一下,有没有Notepad++插件可以支持自动生成的,果不其然还真有。Emmet,这款神器...
  • Sublime Text3 搭建 React开发环境

    千次阅读 2016-06-29 10:57:46
    babel-sublime 支持ES6, React.js, jsx代码高亮,对 JavaScript, jQuery 也有很好的扩展。关于 babel 的更多介绍可以看这里:为什么说Babel将推动JavaScript的发展 安装 PC:Ctrl+shift+p Mac:Cmd+shift+p ...
  • VsCode中使用Emmet神器快速编写HTML代码 ...Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的
  • Sublime Text3(mac版)上好用的插件

    千次阅读 2018-03-10 22:50:26
    本节索引sublime Text3 插件的安装代码编辑非常有用的5个插件配置React 开发环境所需要的插件支持首先 请查看你的sublime Text3 上是否安装了Package Control ,安装 Package Ctrol: 使用 ctrl + ~ 打开控制台,...
  • Emmet快速编写html

    千次阅读 2017-12-15 13:22:37
    缩写是Emmet工具的核心,这些特殊的表达式通过Emmet解析并转化为结构化的代码块,而语法用CSS选择器,HTML标签和一些Emmet特定的代码生成,所以对于任何一个前端开发人员都可以很容易地掌握和使用。 你可以使用标签...
  • sublime text3里Emmet基本语法

    千次阅读 2017-02-14 14:22:21
    Emmet基本语法emmet-zen-coding-tutorial是个很不错的教程,下面是一些简单的语法规则元素通过元素名生成HTML标签,如div生成<div></div>,当需要生成自定义标签时,使用ctrl + e即可,如foo生成<foo></foo>子元素...
1 2 3 4 5 ... 20
收藏数 897
精华内容 358
热门标签
关键字:

emmet语法规则