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. ...
随机推荐
- ABP入门教程1 - 开篇
点这里进入ABP入门教程目录 基于DDD的现代ASP.NET开发框架 - ABP ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ASP.NET ...
- 此 iCloud 帐户已经存在。
0x00 事件 将 Apple ID 换了一个邮箱,然后在 macOS 重新登陆的时候出现登录不上异常,始终显示 若要将此 Apple ID 用作主要的 iCloud 帐户,请从"互联网帐户 ...
- ACM 基本输入
单次输入 C语言 int a,b; scanf("%d %d",&a,&b); C++语言 int a,b; cin >> a >> b; ...
- STL 中 list 的使用
list 容器实现了双向链表的数据结构,数据元素是通过链表指针串连成逻辑意义上的线性表,这样,对链表的任一位置的元素进行插入.删除和查找都是极快速的.由于list对象的节点并不要求在一段连续的内存中, ...
- Druid-代码段-1-4
所属文章:池化技术(一)Druid是如何管理数据库连接的? 本代码段对应流程1.3,连接可用性测试: //数据库连接可用性测试 protected boolean testConnectionInte ...
- 验证登录的前世今生:session、cookie
参考地址:彻底理解cookie,session,token 使用JSON Web Token设计单点登录系统 1.很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, 不需要记录 ...
- Codeforces Round #597 (Div. 2) F. Daniel and Spring Cleaning 数位dp
F. Daniel and Spring Cleaning While doing some spring cleaning, Daniel found an old calculator that ...
- 一文学会 TypeScript 的 82% 常用知识点(下)
一文学会 TypeScript 的 82% 常用知识点(下) 前端专栏 2019-11-23 18:39:08 都已经 9021 年了,TypeScript(以下简称 TS)作为前端工程师不得 ...
- python做中学(四)main函数的用法
什么场景下会有main函数? 当该python脚本被作为模块(module)引入(import)时,其中的main()函数将不会被执行. main函数的作用? __name__ == '__main_ ...
- Python爬虫实践~BeautifulSoup+urllib+Flask实现静态网页的爬取
爬取的网站类型: 论坛类网站类型 涉及主要的第三方模块: BeautifulSoup:解析.遍历页面 urllib:处理URL请求 Flask:简易的WEB框架 介绍: 本次主要使用urllib获取网 ...