以下是在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. 关于super关键字与继承

    super它只是一个限定词,当用super引用时,它也是引用当前对象本身,只是super只是限定了访问当前对象从父类那里继承得到成员变量或方法. import java.util.Date; publ ...

  2. ubuntun16.0 登陆密码忘记

    1. 开机,如下图所示(没有装虚拟机,手机拍的图片凑合这看把): 2. 此时会有一个选项:Advanced Options for Ubuntu, 选中直接回车 ,如下图: 3. 看到里面有很多选项, ...

  3. [LeetCode 题解]: Maximum Depth of Binary Tree

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  4. MSSQL Server中partition by与group by的区别

    在使用over等开窗函数时,over里头的分组及排序的执行晚于“where,group by,order by(但此排序顺序优先级是最高的)”的执行. ①group by 列名 合并(列值相同的并作一 ...

  5. HttpWebRequest(System.Net)模拟HTTP发送POST

    相关参考网上很多,但需要理解并转成自己的情况 public static string HttpWebRequestPost(string url, string param) { HttpWebRe ...

  6. python学习之路 八 ：面向对象编程基础

    本节重点 了解面向对象.面向过程的区别 掌握什么是类,什么是对象 掌握如何定义及使用类和对象 了解类与对象间的关系 掌握类属性和实例属性 掌握绑定方法 一.编程范式 ​    ​编程即写程序or写代码 ...

  7. 「HNOI 2014」米特运输

    题目链接 戳我 \(Describe\) 谁出的题目啊?这么长的题面,看完就滚粗了.强烈谴责 给一棵树,每个点有一个权值,要求修改一些权值,使: 一个点的权值必须是其所有儿子的权值之和 一个点的儿子权 ...

  8. Android源码：(一) 安卓2.1到4.4操作系统通用的Actionbar实现的tab导航例子。

    说一下我在完成这个例子之前的尝试吧 一,修改“actionbarsherlock”的导航例子.我在实现这个例子之前,尝试过“actionbarsherlock”,修改它的一个tab导航的例子,修改成功 ...

  9. linux命令之文件系统管理命令（下）

    1.mount:挂载文件系统 该命令可以将指定的文件系统挂载到指定目录(挂载点),在linux中必须先挂载所有的设备,才能够访问,挂载的目录必须事先存在并且最好为空. 参数 说明 -t(常用) 指定挂 ...

  10. 4.client、offset、scroll系列

    client.offset.scroll系列 他们的作用主要与计算盒模型.盒子的偏移量和滚动有关 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域 ...