<!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. 1.SJ-SLAM-14

    1.引言 SLAM:Simultaneous Localization and Mapping 同时定位与地图构建 搭载特定传感器的主体,在没有环境先验信息的情况下,于运动过程中建立环境的模型,同时估 ...

  2. Eclipse中建立自己的类库,给不同的工程使用

    win7 进入服务 开始 运行 services.msc 在多个工程当中,可能使用到相同的jar包,这时,如果我们建立一个自己的类库,该类库中存放着所有工程均需要的jar包,就可以免去重复导入的麻烦. ...

  3. LeetCode: 620 Not Boring Movies(easy)

    题目: X city opened a new cinema, many people would like to go to this cinema. The cinema also gives o ...

  4. 洛谷 - P1072 Hankson - 的趣味题 - 质因数分解

    https://www.luogu.org/problemnew/show/P1072 一开始看了一看居然还想放弃了的. 把 \(x,a_0,a_1,b_0,b_1\) 质因数分解. 例如 \(x=p ...

  5. 读取MySQL数据表字段信息

    TP5句式 $fieldinfo = Db::query('SHOW FULL COLUMNS FROM '.$table);//查出数据表所有字段信息Field 字段Comment 字段注释

  6. Lightoj1012【DFS】

    题意: 输出和' @ '相连有多少个' . '包括' @ ',' # '代表墙不能走: 思路: 基础DFS,找到起点,然后跑一下DFS就好了: #include<cstdio> #incl ...

  7. Android真机调测Profiler

    U3D中的Profile也是可以直接在链接安卓设备运行游戏下查看的,导出真机链接U3D的Profile看数据,这样能更好的测试具体原因. 大概看了下官方的做法,看了几张帖子顺带把做法记录下来. 参考: ...

  8. 洛谷P3321 [SDOI2015]序列统计（NTT）

    传送门 题意:$a_i\in S$,求$\prod_{i=1}^na_i\equiv x\pmod{m}$的方案数 这题目太珂怕了……数学渣渣有点害怕……kelin大佬TQL 设$f[i][j]$表示 ...

  9. mysql项目实战经验

    一.项目的编码设置   目的:避免出现莫名其妙错误,笔者曾经就碰到因编码不对返回null而浪费大量时间:统一的编码可以减少解析的时间,提高效率 1.1修改my.ini文件 一般在C:\Program ...

  10. Luogu P1074靶形数独【搜索/剪枝】By cellur925

    题目传送门 显然是一个搜索.但是开始没有任何的剪枝,暴力从\((1,1)\)点开始搜索,很自然地T了6个点. #include<cstdio> #include<algorithm& ...