何为Emmet

简言之,Emmet的前身是大名鼎鼎的Zen coding;

功能

snippet(代码片段,不如用专门的片段插件)
abbreviation expand(简写展开)

目的

只有一个,加快web开发(编码速度)

Emmet基础

知识预备

HTML/CSS标签熟悉掌握 — 知道是干什么的做什么的
知道选择器的关系,比如兄弟,子代,后代等
解析简写代码可以用Tab键或者Ctrl+E来调用

Emmet特性

简写支持嵌套
简写支持分组
简写支持乘法
简写支持自增和自减,起序,编号

Emmet语法

HTML

文档初始化
html:5 或!：用于HTML5文档类型 —看代码
html:xt：用于XHTML过渡文档类型 — 不演示
html:4s：用于HTML4严格文档类型 — 不演示

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

id#|类.|属性[]|内容{},若是不带父元素,则默认为隐性生成(就近原则)

<!-简写格式我就放在注释里面啦啦!!--><!--#test.test--><div id="test" class="test"></div><!-- p#test.test  --><p id="test" class="test"></p><!-- a[href="http://www.baidu.com"]{文本内容--我是百度} --><a href="http://www.baidu.com">文本内容--我是百度</a>

后代> | 兄弟+ | 上级^

<!-- div>ul>li 后代 -->
<div><ul><li></li></ul>
</div><!-- div>p+p  兄弟-->
<div><p></p><p></p>
</div><!-- div>p>ul>li>^span+b  上级-->
<div><p><ul><li></li><span></span><b></b></ul></p>
</div>

分组()/乘法*/自增$/自减$@-/起序$@数字

<!-- div>ul>(li>a)*2 -->
<div><ul><li><a href=""></a></li><li><a href=""></a></li></ul>
</div><!-- div>ul>(li>a{文本$$})*2 -->
<!--$是匹配数字,一个代表1开始,两个01开始,依次001-->
<div><ul><li><a href="">文本01</a></li><li><a href="">文本02</a></li></ul>
</div><!-- div>ul>(li>a{文本$@-})*3 -->
<!-- @-代表启用自减,降序排列   -->
<div><ul><li><a href="">文本3</a></li><li><a href="">文本2</a></li><li><a href="">文本1</a></li></ul>
</div><!-- div>ul>(li>a{文本$@2})*5 -->
<!-- $@number 代表几号开始出现数字  -->
<div><ul><li><a href="">文本2</a></li><li><a href="">文本3</a></li><li><a href="">文本4</a></li><li><a href="">文本5</a></li><li><a href="">文本6</a></li></ul>
</div>

综合运用-静态布局

Emmet简写

(#header>.nav>ul>(li>a{首页/美女/关于/……})5)+(#container>(#(.left_sidebar>.category>ul>(li>a[herf=”#” title=”这是测试链接啊”]{我是侧边栏链接$$$})5)+(#right_content>ul>li>a[href=”#”]>(img[alt=”哟吼吼吼” src=” “])+span{这是用来描述图片用的}12)))+#footer>ul>(li>a{关于/联系我们/…..})4

只是简单的排版下.添加了下背景颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>这是一个测试DEMO</title><style>*{margin:0;padding:0}ul{list-style: none}#header{height:300px;width:100%;background: #5ecc17;border:2px solid #000;}#container{margin:0 auto;height:500px;width:800px;background: #e97726;border:1px solid #000;}#footer{height:200px;width:100%;background: #000;border:1px solid #000;}.left_sidebar{float:left;background: #02c4bc;height:500px;border:1px solid #000;}.right_content{float:right;background: #113a0d;height:500px;border:1px solid #000;}</style>
</head>
<body><div id="header"><div class="nav"><ul><li><a href="">首页/美女/关于/......</a></li><li><a href="">首页/美女/关于/......</a></li><li><a href="">首页/美女/关于/......</a></li><li><a href="">首页/美女/关于/......</a></li><li><a href="">首页/美女/关于/......</a></li></ul></div></div><div id="container"><div id=""><div class="left_sidebar"><div class="category"><ul><li><a href="" herf="#" title="这是测试链接啊">我是侧边栏链接001</a></li><li><a href="" herf="#" title="这是测试链接啊">我是侧边栏链接002</a></li><li><a href="" herf="#" title="这是测试链接啊">我是侧边栏链接003</a></li><li><a href="" herf="#" title="这是测试链接啊">我是侧边栏链接004</a></li><li><a href="" herf="#" title="这是测试链接啊">我是侧边栏链接005</a></li></ul></div></div></div><div id="right_content"><ul><li><a href="#"><img src=" " alt="哟吼吼吼"><span>这是用来描述图片用的</span><span>这是用来描述图片用的</span><span>这是用来描述图片用的</span><span>这是用来描述图片用的</span><span>这是用来描述图片用的</span><span>这是用来描述图片用的</span><span>这是用来描述图片用的</span><span>这是用来描述图片用的</span><span>这是用来描述图片用的</span><span>这是用来描述图片用的</span><span>这是用来描述图片用的</span><span>这是用来描述图片用的</span></a></li></ul></div></div><div id="footer"><ul><li><a href="">关于/联系我们/.....</a></li><li><a href="">关于/联系我们/.....</a></li><li><a href="">关于/联系我们/.....</a></li><li><a href="">关于/联系我们/.....</a></li></ul></div>
</body>
</html>

结语

CSS的写法和HTML大同小异,emmet也能写IE hack,浏览器前缀等
我不再做介绍了..因为我接下来的图片可以清晰的看到各种写法

转载于:https://www.cnblogs.com/tangge/p/7653335.html

Emmet Cheat Sheet（Sublime编辑）相关推荐

mysql 递归_「MySQL」 - SQL Cheat Sheet - 未完成
近几个月的心情真是安排的妥妥的,呈现W状.多的不说了,这里对SQL的测试进行简单梳理,制作一份SQL Cheat Sheet. 0x01.数据库基本架构 Clinet层 Server层连接器网络连 ...
容器编排技术 -- kubectl Cheat Sheet
容器编排技术 -- kubectl Cheat Sheet 1 Kubectl 自动补全 2 Kubectl 上下文和配置 3 创建对象 4 显示和查找资源 5 更新资源 6 修补资源 7 编辑资源 ...
139.00.007 Git学习-Cheat Sheet
@(139 - Environment Settings | 环境配置) Git虽然极其强大,命令繁多,但常用的就那么十来个,掌握好这十几个常用命令,你已经可以得心应手地使用Git了. 友情附赠国外网 ...
ubuntu cheat sheet 目录结构
Ubuntu Cheat Sheet Ubuntu系统目录结构以下为Ubuntu目录的主要目录结构,您稍微了解它们都包含了哪些文件就可以了,不需要记忆. / 根目录 │ ├boot/ 启动文件.所 ...
Nmap Cheat Sheet Part 1
译者:未知原文:Nmap Cheat Sheet: From Discovery to Exploits – Part 1: Introduction to Nmap 在侦查期间,扫描一直是信息收集 ...
XSS Cheat Sheet
XSS Cheat Sheet XSS 101 <h1>Hello,<script>alert(1)</script>!</h1> 1. With &l ...
Tmux Cheat Sheet
Tmux Cheat Sheet 文章目录 Tmux Cheat Sheet 1. Sessions 2. Windows(个人不常用) 3. Panes 4. Tips 5. 配置文件:`.tmux ...
Cheat sheet FOR Python Packages
Cheat sheet FOR Python Packages Pyspark Pandas And SO ON
cheat sheet 打包打印版大全python R machine learning
python (1)精简版: https://perso.limsi.fr/pointal/_media/python:cours:mementopython3-english.pdf (2)图片打包 ...

Emmet Cheat Sheet（Sublime编辑）