emmet的用法

emmet 是一个提高前端开发效率的一个工具。
emmet允许在html、xml、和css等文档中输入缩写，然后按tab键自动展开为完整的代码片段。

一、Sublime Text 3 安装插件Emmet
点击菜单栏的首选项
->Package Control
-> 在弹出命令行中输入ip，在列表中点击“install Package”
-> 弹出命令行输入框，输入“emmet”进行安装

本人安装完后提示
Error while loading PyV8 binary:exit code 4
Try to manually install PyV8 from
https://github.com/emmetio/pyv8-binaries
解决方法：
按提示打开https://github.com/emmetio/pyv8-binaries，选择自己版本下载pyv8，本人下载pyv8-win64-p3.zip。
点击Sublime Text 3菜单栏的首选项->浏览插件目录，打开Packages目录，再切换到上一层Installed Packages目录，
新建目录PyV8，把pyv8-win64-p3.zip解压后的文件放进去，重启ST编辑器。

二、emmet的用法
emmet插件的官方文档： https://docs.emmet.io/abbreviations/syntax/

新建一个html文件
1、元素
可以使用元素的名称（如DIV或P）生成HTML标记。
如输入div按tabl键后，自动生成<div></div>。
如果输入！，则自动生成一个HTML5基本结构

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

</body>

</html>

2、嵌套操作符
（1）子元素：>

<!-- div>ul>li -->

<div>

    <ul>

        <li></li>

    </ul>

</div>

备注：div>ul>li的中间和后面不能有空格，否则按tab键后emmet 会停止解析，后面的例子也一样不能有空格。

（2）兄弟元素：+

<!-- div+p+bq --> -->

<div></div>

<p></p>

<blockquote></blockquote>

（3）向上一层：^，和>相反，可以多次使用

<!-- div+div>p>span+em -->

<div></div>

<div>

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

</div>

<!-- div+div>p>span+em^^^bq  -->

<div></div>

<div>

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

</div>

<blockquote></blockquote>

（4）乘法：*，重复指定次数生成元素

<!-- ul>li*5  -->

<ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

（5）分组：()，括号里面的内容为一个代码块，括号后面的元素与括号的第一个元素在同一级别

<!-- div>(header>ul>li*2>a)+footer>p  -->

<div>

    <header>

        <ul>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

        </ul>

    </header>

    <footer>

        <p></p>

    </footer>

</div>

3、属性操作符

（1）id和class

<!-- div#header+div.page+div#footer.class1.class2.class3 -->

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

<div class="page"></div>

<div id="footer" class="class1 class2 class3"></div>

（2）自定义属性：[attr]

<!-- td[title="Hello world!" colspan=3] -->

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

（3）项目编号：$

<!-- 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>

使用任意个$在数字前加任意个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>

倒序，在$后面加@-

<!-- 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，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>

4、文本：{}，为元素添加文本

<!-- a{Click me} -->

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

因为文本也是节点，所以 a[href=1.htm]{click me} 与 a[href=1.htm]>{click me} 等价。

但是有多个元素时生成的结果会不同，用子元素>后面有元素时，也会放在a元素里面，例如

<!-- a{click}+b{here} -->

<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->

<a href="">click<b>here</b></a>

emmet的用法的更多相关文章

sublime Emmet的用法及相关语法
本节来讲一下Emmet插件的用法及相关语法. Emmet插件极大的提高了编程员的编程速度,下面我们来讲讲它的具体语法: 一.生成 HTML 文档初始结构 HTML 文档的初始结构,就是包括 docty ...
Web 前端利器Emmet 的HTML用法总结
在tutsplus那里看到一篇文章介绍Emmet 的用法,形象的gif图片一目了然,本来想翻译过来的(虽然翻译用法倒不是很难),但搜索发现已经有国人翻译过了,遂直接拿来转载在这里. Emmet 简介 ...
HTML代码简写法：Emmet和Haml
http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html?bsh_bid=657901854 HTML代码简写法:Emmet和Haml ...
HTML的快速写法：Emmet和Haml
HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容.还有一种就是我今天想要介绍的方法—-简写法. 常用的简写法,目前主要是Emmet和Haml两种 ...
sublime text3中emmet插件的使用
首先,想要快速编码需要在编辑器中安装常用插件,下面是emmet插件的使用: html5文档结构的生成方式: 1).!+tab键 2).html:5 +tab键头部head中meta字符集的生成: ...
工欲善其事必先利其器，用Emmet提高HTML编写速度
HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板,在别人写好的骨架内,填入自己的内容.还有一种很炫的方法----简写法. 常用的简写法,目前主要是Emmet和Haml两种.这两种简写 ...
sublime + emmet(Zen Coding)
今天接触sublime这个编辑器,一下子就喜欢上它了,以前我一直使用NOTEPAD++,果断换上sublime玩玩,呵呵编辑功能啥的没话,作为前端开发的话,和emmet(原名叫Zen Coding) ...
HTML代码简写法：Emmet和Haml（转）
HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容.还有一种就是我今天想要介绍的方法----简写法. 常用的简写法,目前主要是Emmet和Haml ...
learn
1.JQ (随时) 2.微信小程序(关注群,专栏知乎,自己申请一个小程序弄个实战) 3.支付宝小程序(2017.08.18 新生代类似微信api) 4.vue(优秀的mvvm框架,手机端主流) 5. ...

随机推荐

golang中，new和make的区别
在golang中,make和new都是分配内存的,但是它们之间还是有些区别的,只有理解了它们之间的不同,才能在合适的场合使用. 简单来说,new只是分配内存,不初始化内存: 而make即分配又初始化内 ...
Python 類和對象 Class vs Object
類別定義 class 類別名: 例如: >>> class Point:... x = 0.0... y = 0.0 1. 宣告 >>> p1 = ...
Pycharm2019最新激活注册码（pycharm激活教程）
给大家分享一下PyCharm2019最新可用的激活注册码.激活Pycharm专业版的方法有很多,这里主要给大家分享最有效的两种,一种是使用最新可用的注册激活码,一种是使用破解补丁的方法,这种方法虽然麻 ...
【转】Kotlin的inline内联函数
原文链接:https://blog.csdn.net/Jaden_hool/article/details/78437947 方法调用流程调用一个方法是一个压栈和出栈的过程,调用方法时将栈针压入方法 ...
Java中的“scanf()、cin()、input()"
最近在写一个Java程序时遇到一个问题,就是如何在Java里面输入数值,又叫做获取键盘输入值. 因为c语言里面有scanf(),C++里面有cin(),python里面有input().Java里面有 ...
微信小程序API交互反馈,wx.showToast显示消息提示框
导读:wx.showToast(OBJECT) 显示消息提示框. OBJECT参数说明: 参数类型必填说明最低版本 title String 是提示的内容 icon String 否图标, ...
站点部署，IIS配置优化指南[转]
站点部署,IIS配置优化指南目录一. 设置应用程序池默认设置二. 常规设置三. 优化回收策略四. 性能五. IIS初始化(预加载 ...
2. 词法"陷阱"
1. 练习2-1 某些编译器允许嵌套注释.请写一个程序测试,要求:无论是对允许嵌套注释的编译器,还是对不允许嵌套注释的编译器,该程序都能正常通过编译,但是这两者情况下执行的结果却不相同. #inclu ...
Azure Sphere Development Environment Setup
1. Visual Studio 目前,Visual Studio 2017/2019支持Azure Sphere开发,后续,微软会加入Visual Studio Code的支持.以Visual St ...
Python连载6-time包函数简介
一.接连载5中time模块 1.函数:altzone (1)含义:获取当前时间与UTC时间相差的秒数,再有夏令时的情况下. (2)格式:time.altzone 2.函数:daylight (1)含义 ...

emmet的用法

emmet的用法的更多相关文章

随机推荐

热门专题