以下是在webstorm中简单使用emmet插件，注意一点就是当编写完emmet命令后一定要把光标移动到命令的结尾处，不然生成的代码会不一样

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <!--1.#box$*4-->

     <div id="box1"></div>

     <div id="box2"></div>

     <div id="box3"></div>

     <div id="box4"></div>

 <!--2.div[attr='attr']-->

     <!--div[attr='attr'][data-type='addText']-->

     <div attr="attr" data-type="addText"></div>

 <!--.box1[attr='attr']-->

     <div class="box1" attr="attr"></div>

 <!--3.div{content}-->

 <!--.box{这是测试emmet的内容部分}-->

     <div class="box">这是测试emmet的内容部分</div>

 <!--4.布局；div>#header+#main+footer-->

 <!--#container>(#header>ul>li*5>a)+(#main>#left+#right)+#footer-->

     <div id="container">

         <div id="header">

             <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 id="main">

             <div id="left"></div>

             <div id="right"></div>

         </div>

         <div id="footer"></div>

     </div>

 </body>

 </html>

前端emmet插件的一些常用用法的更多相关文章

  1. sublime课程3 emmet插件中的常用符号有哪些

    sublime课程3 emmet插件中的常用符号有哪些 一.总结 一句话总结:emmet插件中的符号和css选择器里面哪些符号的意思很像. 1.+是干嘛的? 组合 2.{}是干嘛的? 标签里面的inn ...

  2. Emmet插件比较实用常用的写法

    看了一些关于Emmet插件写法的文档,港真,怎么可以写这么长啊.其实知道几个大概要点加上实践基本就能上手写了啊 杂话 我前面有一篇[今天发现新大陆:haml和Emmet ],其实一开始的想法是写给自己 ...

  3. 【转】sublime text 2中Emmet插件8个常用的技巧

    因为开始做web项目,所以最近在用sublime编辑器,知道了一个传说中的emmet,原名是zen coding.html神插件可以说是.文章部分内容转自http://www.cnblogs.com/ ...

  4. Sublime Text 2 安装emmet插件和常用快捷键

    一.先安装package control1.按Ctrl+`调出console,输入以下命令然后回车 import urllib2,os; pf='Package Control.sublime-pac ...

  5. “一键”生成HTML——Emmet插件常用语法

    Emmet是一款文本编辑器/IDE的插件,用来快速生成复杂的HTML代码,只要掌握一些常用的语法(类似于CSS选择器),就可以减少重复编码的工作(主要是懒).我个人惯用的是sublime,因此下文介绍 ...

  6. Emmet插件使用方法总结

    Emmet插件使用方法总结 在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等. ...

  7. Emmet插件详解

    http://www.ithao123.cn/content-10512551.html   (webstorm的css编写插件)Emmet:HTML/CSS代码快速编写神器 [摘要:Emmet的前身 ...

  8. sublime text3中emmet插件的使用

    首先,想要快速编码需 要在编辑器中安装常用插件,下面是emmet插件的使用: html5文档结构的生成方式: 1).!+tab键 2).html:5 +tab键 头部head中meta字符集的生成: ...

  9. 【编程工具】Sublime Text3 之 Emmet 插件的详细使用的方法

    这篇关于 Emmet 插件使用的博文之前就想写了,今天刚好闲暇时间,就花了一些时间进行了总结. 我们都这道 Emmet 这款插件在前端设计里被称为神器,确实,神器称号名不虚传.因为这款插件可以帮助我们 ...

随机推荐

  1. c_c++基础问题(平时读书时笔记)

    1 IP私有地址: 10.0.0.0 -- 10.255.255.255 172.16.0.0 -- 172.31.255.255 192.168.0.0 -- 192.168.255.255 2OS ...

  2. MongoDB整理笔记のReplica Sets + Sharding

    MongoDB Auto-Sharding 解决了海量存储和动态扩容的问题,但离实际生产环境所需的高可靠.高可用还有些距离,所以有了"Replica Sets + Sharding" ...

  3. CSS选择器与jQuery选择器的异同：一些特殊的选择器

    在CSS3选择器标淮草案定义的选择器语法中,jQuery支持相当完整的一套子集,同时还添加了一些非标准但很有用的伪类.下面是一些jQuery扩展的选择器:(来自http://www.cnblogs.c ...

  4. Backup--压缩备份和数据库压缩

    1> 即使数据库启用了页压缩或行压缩,压缩备份也可以有效减小备份的大小,压缩备份的压缩效率取决于表中的数据类型 2> 数据库压缩有利于降低备份时间(因为数据库变小) 3> 对已启用压 ...

  5. c#设计模式系列：观察者模式（Observer Pattern）

    引言 在现实生活中,处处可见观察者模式,例如,微信中的订阅号,订阅博客和QQ微博中关注好友,这些都属于观察者模式的应用.在这一章将分享我对观察者模式的理解,废话不多说了,直接进入今天的主题. 观察者模 ...

  6. Python【filter、map、reduce】

    filter和map和reduce map(function,iterable...) -> list 映射,对列表中的每个值操作 返回操作后的数值组成列表 # 给列表值+1 l = [1,2, ...

  7. C语言顺序结构和分支结构总结

    1. 本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 感觉学的内容比较基础,也是日后编程的基石.今后还应多加练习,能够更自如地运用,避免低级错误,一步步地提 ...

  8. hdu Surround the Trees

    题目链接:戳我 凸包模板 #include<iostream> #include<cstdio> #include<cstring> #include<alg ...

  9. 【转】C#具名参数和可选参数

    源地址:https://www.cnblogs.com/similar/p/5006705.html 另:可选参数的一个陷阱 参考:https://www.cnblogs.com/still-wind ...

  10. [Maven实战-许晓斌]-[第三章] Mave使用入门二(在IDE中的使用) [第四章] 案例的背景介绍

    创建maven项目