<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>sublime text 3中emmet常用技巧</title>

</head>

<body>

	<!-- 生成html5格式文件先把文件保存成.html格式，然后输入html:5按下tab键 -->

	<!-- 简写div start -->

	<!-- div.box -->

	<div class="box"></div>

	<!-- .container 默认生成div标签-->

	<div class="container"></div>

	<!-- end 简写div -->

	<!-- 含糊标签名称 -->

	<!-- .wrap>ul.list>.site -->

	<div class="wrap">

		<ul class="list">

			<li class="site"></li>

		</ul>

	</div>

	<!--

		使用Emmet来扩展简单的class名称生成div的话。这个方式可以帮助你省去大量的时间。你只需要记住如下语法：

			> 子节点：在DOM树下一层添加创建一个元素

			+ 同级别：在DOM树同一层添加创建一个元素

			^ 向上层：向上一层添加创建创建一个元素。

	 -->

	 <!-- .outer>.inner>h1+p -->

	 <div class="outer">

	 	<div class="inner">

	 		<h1></h1>

	 		<p></p>

	 	</div>

	 </div>

	 <!-- .warp>p>a^p 向上一层-->

	 <div class="warp">

	 	<p><a href=""></a></p>

	 	<p></p>

	 </div>

	 <!-- .warp>p>span>a^^p 向上多层-->

	 <div class="warp">

	 	<p><span><a href=""></a></span></p>

	 	<p></p>

	 </div>

	 <!--

	 	使用分组来简化你的代码结构 的时候你可能会发现使用向上符号比较复杂，这时候可能使用分组更加的合理

	 -->

	 <!-- (.one>h1)+(.two>h1) -->

	 <div class="one">

	 	<h1></h1>

	 </div>

	 <div class="two">

	 	<h1></h1>

	 </div>

	 <!--

		插入文本和属性

		如果你需要生成HTML，内容和属性也是你常常需要添加的。很多开发人员只是使用Emmet来生成框架，然后再添加内容。其实你可以在生成页面框架的过程中同时添加属性和内容。

	  -->

	  <!-- h1{我是一个h1标签}+p{我是一个p标签} -->

	  <h1>我是一个h1标签</h1>

	  <p>我是一个p标签</p>

	  <!-- a[href="http://www.baidu.com"]{百度} -->

	  <a href="http://www.baidu.com">百度</a>

	  <!-- 	添加多个class到一个元素这个非常简单，你只需要使用逗号来添加多个class -->

	  <!-- .one.two.three -->

	  <div class="one two three"></div>

	  <!-- 重复添加 -->

	  <!-- ul>li{我是一个li标签}*4 -->

	  <ul>

	  	<li>我是一个li标签</li>

	  	<li>我是一个li标签</li>

	  	<li>我是一个li标签</li>

	  	<li>我是一个li标签</li>

	  </ul>

	  (section>.wrap)*2

	  <section>

	  	<div class="wrap"></div>

	  </section>

	  <section>

	  	<div class="wrap"></div>

	  </section>

		<!--

			自动列表计数

			如果你需要按顺序生成HTML元素，这个技巧你一定喜欢，使用$符号可以帮助你生成一系列数字，支持class，id，属性，内容等等

		-->

		<!-- ul>li.item${item $$}*11 -->

		<ul>

			<li class="item1">item 001</li>

			<li class="item2">item 002</li>

			<li class="item3">item 003</li>

			<li class="item4">item 004</li>

			<li class="item5">item 005</li>

			<li class="item6">item 006</li>

			<li class="item7">item 007</li>

			<li class="item8">item 008</li>

			<li class="item9">item 009</li>

			<li class="item10">item 010</li>

			<li class="item11">item 011</li>

		</ul>

</body>

</html>

　　

sublime text 3中emmet常用技巧的更多相关文章

  1. 关于Sublime text 2中Emmet的安装 _html:xt无效

    其实这个网上很多教程,有一些方法是可行的,但是有一些方法是行不通的. 虽然Sublime text 2有不同平台的版本,但是安装起来,还是有点差异的. 先简单介绍一下Emmet,Emmet是Zen-c ...

  2. 【转】sublime text 2中Emmet插件8个常用的技巧

    因为开始做web项目,所以最近在用sublime编辑器,知道了一个传说中的emmet,原名是zen coding.html神插件可以说是.文章部分内容转自http://www.cnblogs.com/ ...

  3. Sublime Text 3下Emmet使用技巧

    链接:http://jingyan.baidu.com/article/92255446a87900851648f4d6.html

  4. Sublime Text 3下 Emmet 使用小技巧

    Emmet常用技巧:(输入下面简写,按Tab键可触发效果)                          生成 HTML 文档初始结构 html:5 或者 ! 生成 HTML5 结构        ...

  5. Sublime Text编辑器的12个技巧和诀窍

    本文为您提供Sublime Text编辑器的12个技巧和诀窍,深入挖掘这个看似简洁的代码编辑器,背后所隐藏的实现各种高级功能的无限可能. 1) 选择 以下是一些Sublime Text选择文本的快捷键 ...

  6. sublime Text 3 安装emmet

    Emmet简介 Emmet是一个支持大部分流行文本编辑器的插件,能够极大得提高编写HTML和CSS的工作效率. 官网:http://emmet.io/ 在Sublime Text 3中安装 前提Sub ...

  7. Sublime Text 3前端开发常用优秀插件介绍

    . 首页 博客园 联系我 前言:关于Sublime Text 3. Package Control插件管理. Package Control使用方法/安装Emmet插件. Emmet插件. JsFor ...

  8. Sublime Text 2中自定义代码模板

    Sublime Text 2中自定义代码模板 2012-12-06 10:13 9921人阅读 评论(0) 收藏 举报  分类: 编辑器-Sublime Text 2(5)  版权声明:本文为博主原创 ...

  9. sublime text 3 前端开发常用插件

    sublime text 3 前端开发常用插件 https://packagecontrol.io/browse 代码对齐: Alignment html代码补全:  Emmet CoffeeScri ...

随机推荐

  1. java读取文件：二进制文件

    FileWriter只能接受字符串形式的参数,也就是说只能把内容存到文本文件.相对于文本文件,采用二进制格式的文件存储更省空间 InputStream用于按字节从输入流读取数据.其中的int read ...

  2. javascript runat server

    <script runat="server"> protected void SubmitBtn_Click(object sender, EventArgs e) { ...

  3. Codeforces482B【线段树构造】

    题意: 有M个限制,每个限制有l,r,q,表示从a[l]~a[r]取且后的数一定为q,问是否有满足的数列. 思路: 看到大牛说是线段树,线段树对于区间操作,印象中乘啊,+啊,-啊都不错,但是并没有就是 ...

  4. laravel V层引入css 和js方法

    引入css  默认引入public目录 <link rel="stylesheet" href="{{URL::asset('css/xxx.css')}}&quo ...

  5. MySQL习题1 一对多实例 产品和分类

    /* 需求:建立产品和分类表 1.查询每种分类的产品数量,没有产品的分类也要统计.(cname,quantity) 2.根据分类名称查询分类中的所有产品 */ -- ----------------- ...

  6. ios开发static关键字的理解

    :static关键字修饰局部变量::当static关键字修饰局部变量时,该局部变量只会初始化一次,在系统中只有一份内存 :static关键字不可以改变局部变量的作用域,但是可延长局部变量的生命周期,该 ...

  7. [模板]manacher

    這麼簡單的算法現在才學...... https://segmentfault.com/a/1190000008484167?utm_source=tag-newest#articleHeader3 h ...

  8. [BZOJ2251/BJWC2010]外星联络

    Description 小 P 在看过电影<超时空接触>(Contact)之后被深深的打动,决心致力于寻找外星人的事业.于是,他每天晚上都爬在屋顶上试图用自己的收音机收听外星人发来的信息. ...

  9. POJ1129（贪心）

    笔者休息娱乐.贪心即可,爱怎么暴力怎么暴力.莽WA,改了几下算法发现是输出中二了-- int T, color[26], tot; bool adj[26][26]; string s; void g ...

  10. 深入理解synchronized

    上一篇博客虽然题目叫内置锁的基本使用,但其实也是讲synchronized关键字的使用的.这篇博客是在看了许多大佬的博客记录后总结出的synchronized更底层的知识和原理. 一.synchron ...