在sublime上装了Emmet插件后,我们就可以利用以下技巧快速编写代码

1、自动生成html头文件

html:5 或!:用于HTML5文档类型

html:xt:用于XHTML过渡文档类型

html:4s:用于HTML4严格文档类型

例如,输入 html:5 然后按下Tab键,就会自动将html头文件补全

2、快速填加 类、id

连续输入元素名称和ID,Emmet会自动为你补全,比如输入p#example按下Tab键就会得到

<p id="example"></p>

输入div.cls#con按下Tab键得到

<div class="cls" id="con"></div>

3、定义多个元素

例如输入 ul>li*3 会得到

<ui>
  <li></li>
  <li></li>
  <li></li>
 </ui>

4、嵌套

现在你只需要1行代码就可以实现标签的嵌套。

    • >:子元素符号,表示嵌套的元素
    • +:同级标签符号
    • ^:可以使该符号前的标签提升一行

例如输入 div#con>div得到

<div id="con">
  <div></div>
 </div>

5、嵌套定义多个带class 或 id的元素

例如: ul.d1>li#d2$*3 会得到

<ul class="d1">
  <li id="d21"></li>
  <li id="d22"></li>
  <li id="d23"></li>
 </ul>

sublime 快速编写代码技巧的更多相关文章

  1. 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解

    前端html.CSS快速编写代码插件-Emmet使用方法技巧详解   Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来 ...

  2. Emmet快速编写代码

    Emmet快速编写代码 ★div → <div></div>, span → <span></span> ★CSS选择器 ​ 给标签指定id选择器 di ...

  3. 前端开发入门到进阶第一集【使用sublime快速编写Html和Css】

    1,安装sublime编辑器,下载地址:http://www.sublimetext.com/3 2,要使用sublime的插件机制必须安装package control:https://packag ...

  4. 快速编写代码zencode

    #是 id .是class $是数字 {}是标签中内容 *个数 ^上一级

  5. Intellij IDEA快速编写代码经验总结

    sout=System.out.println(); soutp=System.out.println(""); soutv=System.out.println("变量 ...

  6. Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧

    <!DOCTYPE html> Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧--summer-rain博客园 xiayuhao 东风夜放花千树. 博 ...

  7. Sublime Text、webstorm等编译器快速编写HTML/CSS代码的技巧

    Sublime Text.webstorm等编译器,如果你从事Web前端开发的话,对这几款软件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演 ...

  8. sublime text3---Emmet:HTML/CSS代码快速编写神器

    Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: ...

  9. Sublime Text 3插件之Emmet:HTML/CSS代码快速编写神器

    一.快速编写HTML代码 1.  初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签. ...

随机推荐

  1. 018 oauth协议

    1.作用 2.流程步骤 3.授权模式 4.授权码模式

  2. SVN 从主干合并到分支库

    主干库:平时开发用的库, 分支库:中途需要进行上生产环境的库 分支库的版本从主干库拉过去就行 红色的为分支库. 创建的速度很快. 1.创建好后,在主干库添加一个文件. 2.然后分支库进行合并,这里用e ...

  3. MQTT研究之EMQ:【EMQX使用中的一些问题记录(3)】

    EMQX功能强大,但是帮助信息或者可用资料的确有限,遇到个问题,比较难找到处理的头绪,今天,我要记录的是,使用中出现EMQX宕机,但是呢,启动也启动不了. 今天记录的内容,就以操作EMQX 3.2.3 ...

  4. Linux内核链表复用实现队列

    有了前面Linux内核复用实现栈的基础,使用相同的思想实现队列,也是非常简单的.普通单链表复用实现队列,总会在出队或入队的时候有一个O(n)复杂度的操作,大多数采用增加两个变量,一个head,一个ta ...

  5. LeetCode 108. Convert Sorted Array to Binary Search Tree (将有序数组转换成BST)

    108. Convert Sorted Array to Binary Search Tree Given an array where elements are sorted in ascendin ...

  6. (原)关于使用imagemagick将gif叠加到图片或者画布上的方法,以及疑难杂症

    今天因为项目过程中,有一个小需求,需要将一个指定的gif按照指定大小,叠加到画布的指定位置上,本来对于熟悉这块的人,简直就是小菜一碟哈,但本人因为对imagemagick的不熟悉,导致在这个需求上摸索 ...

  7. Flutter入门(一)

    Flutter的sdk地址https://flutter.dev/docs/development/tools/sdk/releases 如果网络不能翻墙,只需要在环境变量里增加如下 FLUTTER_ ...

  8. 导出excel按照指定格式

    1.项目有个需求,要按照特定格式 导出Excel表格. 正常的都是一行 ,下面是数据.这次有个变动,就是每隔 几列要换行,下面是数据.在下面是数据部分.花了一上午写了下需求,不难但是花时间 //实现特 ...

  9. java 快速定位线上cpu偏高

    1.top -c 加 大写P 查找高进程ID 2.top -Hp 加 大写 P 查找高线程ID 3.printf '%x\n' 线程ID 转成16进制 4.jstack 进程ID | grep 16进 ...

  10. idea 打开eclipse 项目 编译出现 Error:(1, 1) java: 非法字符: ‘\ufeff’

    原因分析: Eclipse可以智能的把UTF-8+BOM文件转为普通的UTF-8文件,IDEA没有这个智能转换. 解决: 1 用IDEA转换,先转换为GBK,再转回UTF-8