emmet 基本使用方法

官网:http://docs.emmet.io/

返回上级:^

输入: div+div>p>span+em

输出:

<div></div>
<div>
    <p><span></span><em></em></p>
</div>

添加多个类

输入: div.a1.a2.a3

输出: <div class="a1 a2 a3"></div>

自定义属性:[]

输入: td[title="Hello world!" colspan=3]

输出: <td title="Hello world!" colspan="3"></td>

计数:$

用来计数重复元素

通过使用@n来改变计数的起始数据

在$后添加@- 是数据递减

  demo1 demo2 demo3 demo4
    输入  ul>li.item$*3   ul>li.item$$$*3  ul>[email protected]*3   ul>[email protected]*3 
   输出      

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

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
</ul>

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

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

插入文字:{}

输入: a{Click me}

输出: <a href="">Click me</a>

时间: 2024-08-30 16:13:55

emmet 基本使用方法的相关文章

Sublime Text3 Package Control和Emmet插件安装方法

因为初学前端,所以今天安装了Sumblime Text 3,然后就停不下来去找Package Control的安装方法. 网络上我找到并尝试过的方法有两种,我使用的是用Python代码去安装并成安装成功,在此记录安装过程.另一种下载Package Control安装包覆盖的办法没有成功(应该是个人操作问题). 1.将python代码以命令的方式去安装. 代码:import urllib.request,os; pf = 'Package Control.sublime-package'; ipp

sublime text3 emmet 插件 安装方法,快捷键

preference->package control->install package> 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&

webstrom 中启用emmet插件的方法

参考页面:https://www.jetbrains.com/help/webstorm/2016.2/enabling-emmet-support.html Basics Native Emmet support allows you to generate XML/HTML, JavaScript (JSX Harmony) and CSS structures based on abbreviations. WebStorm supports basic Emmet andEmmet ve

前端开发必备!Emmet使用手册

介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”.虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能再运行时进行拓展. Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容.Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前

sublime text高效插件emmet的安装教程

sublime text是一款编辑器,很受前端工程师的欢迎. 这里,介绍它的一个自动补全代码插件emmet的安装方法. 要想安装emmet,首先需要在sublime中安装package control. 安装方法可以参照其官网 截图如下,可见有两种安装方法: 我按照上面的两种方法安装了一遍,下面是截图: 方法1: 复制如下代码: import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e3

前端开发必备!Emmet使用手册(转自 http://www.w3cplus.com/tools/emmet-cheat-sheet.html)

介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”.虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能再运行时进行拓展. Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容.Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前

#002 Emmet完整API

介绍 这里包含了,所有的Emmet API,非常的详细,但是有一点详细过头了,如果只想快速上手,那么推荐<#001 Emmet的API图片> Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能再运行时进行拓展. Emmet把片段这个概念提高到了一个新的层次:你可

解决 TextMate 2 无法安装 Emmet 插件

本篇文章由:http://xinpure.com/solving-textmate-2-cannot-install-emmet-plugin/ 前端神器 Emmet 插件原名为 ZedCoding 前端开发,Emmet 插件是必不可少的开发神器,神奇之处这里就不赘述了. 最喜欢使用的编辑器就是 Textmate 和 Sublime 其实无论是 TextMate 还是 Sublime 安装 Emmet 插件的方法网上比比皆是,也非常简单 然而从 GitHub 找到的 Emmet.tmplugin

Emmet (前身为 Zen Coding)

使用示例: 在编辑器中输入缩写代码:ul>li*5 ,然后按下拓展键(默认为tab),即可得到代码片段: <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 下载和安装 Emmet为大部分流行的编辑器都提供了安装插件,下面是它们的下载链接: Sublime Text Eclipse/Apt