文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！
7 Emmet 实例教程
何为 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.jikexueyuan.com"]{文本内容--我是 GEEK} -->
<a href="http://www.jikexueyuan.com">文本内容--我是 GEEK</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,浏览器前缀等。
官网的 Emmet Cheat Sheet : http://docs.emmet.io/cheat-sheet/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论