以下是在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. Android-显示意图和隐式意图

    显示意图,一般情况下是用于,APP应用自身:组件(Activity,Service,...) 与 组件(Activity,Service,...) 的激活调用: 显示意图,是可以看得到,明确激活哪一个 ...

  2. Ubuntu安装python

    一.下载 手动或者命令都行 wget http://www.python.org/ftp/python/2.7.12/Python-2.7.12.tar.xz 二.解压: #xz -d Python- ...

  3. C# winfrom 存取图片到数据库（二进制，image）

    1.读取本地图片到PictureBox public void InageShow(PictureBox PB) { OpenFileDialog openfile = new OpenFileDia ...

  4. layui后台框架的搭建

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从 ...

  5. django drf SearchFilter与OrderingFilter

    View Demo from django.shortcuts import render from rest_framework.views import APIView from rest_fra ...

  6. docker 进入容器

  7. 理解图像Garbor和HOG特征的提取方法及实例应用

    前言:今天接触到了这两个特征,看了课本和博客后很蒙蔽,没有理解这两个特征,本篇博客的目的是只是参考其他的博客总结这两个特征,如果未来能研究和工作领域是这方面的话再回来自己研学,如有错误也欢迎指出. G ...

  8. 深入了解java虚拟机（JVM） 第五章 如何判断对象为垃圾对象

    本章开始学习垃圾回收的过程,垃圾回收的过程首先就是要确定对象是否是垃圾对象,如果是垃圾对象,垃圾回收器才会进行回收.垃圾回收主要又两种算法:引用计数算法和可达性分析算法. 一.引用计数算法 引用计数算 ...

  9. OCP 12c最新考试原题及答案（071-8）

    8.(5-4) choose the best answer:You need to produce a report where each customer's credit limit has b ...

  10. [sloved] IDE JavaServlet "Error: Could not find or load main class Servlet"

    [ sloved ] JavaServlet "Error: Could not find or load main class Servlet" 报错内容: 提供一份 Servl ...