<!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. CF-805D

    D. Minimum number of steps time limit per test 1 second memory limit per test 256 megabytes input st ...

  2. ElasticSearch基础+文档CRUD操作

    本篇博客是上一篇的延续,主要用来将年前学习ES的知识点做一个回顾,方便日后进行复习和汇总!因为近期项目中使用ES出现了点小问题,因此在这里做一个详细的汇总! [01]全文检索和Lucene (1)全文 ...

  3. c++中stl----vector

    1 vector是啥玩意 (1)可以使用下标访问个别的元素 (2)迭代器可以按照不同的方式遍历 (3)可以在容器的末尾增加或者删除元素 2 容器大小和容器的容量区别 (1)大小是元素的个数,容量是分配 ...

  4. lua中文教程【基本语法】

    代码例子:http://www.inf.puc-rio.br/~roberto/book/code.html 注意:没有“:” 1.特点:可扩展.简单.高效.跨平台 2.使用方式:嵌入程序.独立使用. ...

  5. 1 手写Java ArrayList核心源码

    手写ArrayList核心源码 ArrayList是Java中常用的数据结构,不光有ArrayList,还有LinkedList,HashMap,LinkedHashMap,HashSet,Queue ...

  6. angularjs 切换tab页的一个方法

    tab条的 css: .floor-tab-li { float: left; padding: 6px 12px; font-size: 14px; font-weight: normal; lin ...

  7. hdu3257【模拟】

    题意: 从案例找: 思路: 就是16进制,然后到2进制= =.就是个模拟= =.注意格式: #include <bits/stdc++.h> using namespace std; ty ...

  8. java 三大基本特征

    java中的面向对象的三大基本特征是:[封装].[继承].[多态] 封装:对象要有一个明确的边界:边界的划分(对象各司其职.对象的粒度.对象的可重用性) 属性(bean.pojo):私有的privat ...

  9. ES6入门系列二（数值的扩展）

    ES6 在 Number对象上新增了很多方法 1 .    Number.isFinite()判断是否为有限的数字 和全局的isFinite() 方法的区别是 isFinite('1') === tr ...

  10. __getitem__,__setitem__,__delitem__

    __getitem__.__setitem__.__delitem__ 总结: __getitem__,__setitem_,__delitem__ : obj[‘属性’]的方式去操作属性时触发的方法 ...