以下是在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. mongoexport遭遇Authentication failed

    今天使用mongoexport工具导出数据,遇到权限不足报错:[host]$mongoexport  -h 10.31.11.190:23820 -udbmgr -pMgr2mgdb -d rcmp ...

  2. RobotFramework与Redis库连接

    首先导入:RedisLibrary 具体写法 #连接Redis ${redis_conn} RedisLibrary.Connect To Redis ${DB_host} #获取验证码 ${smsV ...

  3. jquery.pagination参数释义

    参数名 参数说明 可选值 默认值callback 点击分页按钮的回调函数 函数 function(){return false;}current_page 初始化时选中的页码 数字 0items_pe ...

  4. Crystal Reports for Visual Studio 2015 安装

    如果你在vs2015下要用到Cystal Reports,请安装下面的插件.安装时请退出vs2015,安装后重启. https://www.aspsnippets.com/Articles/Downl ...

  5. System Workbench for STM32（based on Eclipse）开发环境配置

    导入现有项目 不能有同名项目,即使不是同一目录 编译 根目录的Debug目录是编译时自动生成的.另外如果项目使用了git,那么编译时会自动在根目录生成一个.gitignore文件,把Debug目录排除 ...

  6. 跨DLL操作fopen的返回值导致出错

    在设置成/MD或/MDd不会导致出错 设置成/MT或/MTd的情况下会导致出错 看了CRT的实现,估计是因为fopen创建了CriticalSection来保护文件,但是在/MT的情况下,一个DLL里 ...

  7. fatal: unable to auto-detect email address (got 'tim@newton.(none)')的解决方法

    问题描述: 使用git commit -m "wrote a readme file",就遇到了这个问题** Please tell me who you are. Run git ...

  8. react.js学习之路六

    学习react中,我一直认为,总组件里面才有构造函数,但是我才发现我的观点是错误的,构造函数是可以出现在子组件里面的. 今天有一个错误是点击增加/减少input框里面 的数值 我一直在寻找input框 ...

  9. 事件委托，元素节点操作，todolist计划列表实例

    一. 事件委托 事件委托就是利用冒泡的原理,把事件加到父级上,来代替子集执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能:其次可以让新加入的子元素也可以拥有相同的操作. 比如有20个&l ...

  10. easy-ui grid里的toobar按钮隐藏与显示

    //隐藏第一个按钮$('div.datagrid-toolbar a').eq(0).hide();//隐藏第一条分隔线$('div.datagrid-toolbar div').eq(0).hide ...