以下是在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语言B组（省赛）第八题

    原创  问题描述: 移动距离 X星球居民小区的楼房全是一样的,并且按矩阵样式排列.其楼房的编号为1,2,3...当排满一行时,从下一行相邻的楼往反方向排号.比如:当小区排号宽度为6时,开始情形如下: ...

  2. Centos配置多个tomcat服务器，并用nginx实现负载均衡

    centos配置tomcat请参见上一篇博文 :http://www.cnblogs.com/nanyangzp/p/4897655.html 一:多tomcat利用不同端口开启服务器 多个tomca ...

  3. 折腾了两天的跨站脚本提交问题，与IIS7有关

    根据这里提供的方法,本地测试通过没有问题,但是部署到服务器上之后,只有GET请求可以跨站提交,POST请求继续报错,折腾了两天之后觉得,是不是IIS7的问题?果然,找到了这篇文章,照做之后解决.

  4. [Asp.net Mvc]为js,css静态文件添加版本号

    方式一: 思路 string version = ViewBag.Version; @Scripts.RenderFormat("<script type=\"text/ja ...

  5. 【09】循序渐进学 docker：docker swarm

    写在前面的话 至此,docker 的基础知识已经了解的差不多了,接下来就来谈谈对于 docker 容器,我们如何来管理它. docker swarm 在学习 docker swarm 之前,得先知道容 ...

  6. “全栈2019”Java第六十五章：接口与默认方法详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  7. 洛谷T46780 ZJL 的妹子序列（生成函数）

    题面 传送门 题解 这居然是一道语文题? 首先不难看出,因为每一次相邻元素交换最多减少一个逆序对,所以至少\(m\)次交换就代表这个序列的逆序对个数为\(m\) 我们考虑一下,假设现在已经放完了\(i ...

  8. 为什么 SQLite 用 C 编写？

    简评:SQLite 官方出品. C是最好的选择 从 2000 年 5 月 29 日开始,SQLite 就选择了 C 语言.直到今天,C 也是实现 SQLite 这样软件库的最佳语言. C语言是实现 S ...

  9. gdb调试参数

    参考 这里 1)gdb 打印字符串的全部内容 set print element 0 2)用x命令查看内存(examine的缩写) (gdb) x/1ub 0x7ffff7fbf7a00x7ffff7 ...

  10. numpy的一维线性插值函数

    前言:      在用生成对抗网络生成二维数据点的时候遇到代码里的一个问题,就是numpy中的一维线性插值函数interp到底是怎么用的,在这个上面费了点功夫,因此现将其用法给出.      在生成对 ...