<!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. Bean的不同配置方式比较与应用场景

    基于XML配置 Bean的定义:           在XML文件中通过<bean>元素定义. Bean的名称:           通过<bean>的id或name属性定义. ...

  2. 菜鸟-@responsebody 理解-用法

    @responsebody表示该方法的返回结果直接写入HTTP response body中一般在异步获取数据时使用,在使用@RequestMapping后,返回值通常解析为跳转路径,加上@respo ...

  3. Ubuntu安装vnc+gnome的xstartup配置

    Log 1 安装vncserver并且在xstartup配置gnome 背景:学习Ruby,想在ubuntu下使用rubymine 时间:2014-3-10 环境:Ubuntu 记录:Roy 其实这个 ...

  4. struts2 中的 addActionError 、addFieldError、addActionMessage的方法

    addActionError .addFieldError.addActionMessage都是ActionSupport的方法 一.addActionError("错误内容"): ...

  5. SQL2005恢复只有mdf文件的数据库

    我把原来的数据库分离后,直接把日志文件给干掉了.原来在SQL 2000里经常这么干,只用一个mdf就附加了.没想到sql2005居然不行.我试验了一圈 终于找到一个成功的方法.转载,供后来者参考. S ...

  6. POJ - 3494 Largest Submatrix of All 1’s 单调栈求最大子矩阵

    Largest Submatrix of All 1’s Given a m-by-n (0,1)-matrix, of all its submatrices of all 1’s which is ...

  7. STL——stack

    首先,堆栈是一个线性表,插入和删除只在表的一端进行.这一端称为栈顶(Stack Top),另一端则为栈底(Stack Bottom).堆栈的元素插入称为入栈,元素的删除称为出栈.由于元素的入栈和出栈总 ...

  8. hdoj5493【树状数组+二分】

    题意: 给你n个人的高度, 再给出一个值代表该高度下有前面比他高的 或 后面比他高的人数, 求满足条件下的最小字典序, 不行的话输出"impossible" 思路: 对于最小字典序 ...

  9. Mecanim Control

    http://www.ufe3d.com/doku.php/mecanimcontrol Mecanim Control Your ultimate solution for Mecanim base ...

  10. 51nod1475(贪心&枚举)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1475 题意:中文题诶- 思路:看懂题意后,首先想到的是贪心: ...