<!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. C - Bear and Five Cards

    Description A little bear Limak plays a game. He has five cards. There is one number written on each ...

  2. 理解复杂的const和typedef和指针的关系

    // container.cpp : 定义控制台应用程序的入口点. //   #include "stdafx.h" #include<iostream> #inclu ...

  3. 图数据库初探之Neo4j

    图数据库初试之Neo4j 自从进入了移动互联网时代,各种新事物出现的速度都好像坐上了宇宙飞船,几乎隔几天一个新概念.就拿数据库而言,什么Oracle.DB2.SQL Server.MySQL,这些你都 ...

  4. 重温sql 设计的基本三大范式

    第一范式:确保每列的原子性. 如果每列(或者每个属性)都是不可再分的最小数据单元(也称为最小的原子单元),则满足第一范式. 例如:顾客表(姓名.编号.地址.……)其中"地址"列还可 ...

  5. Spring入门(四)：使用Maven管理Spring项目

    让我们先回顾下本系列的前3篇博客: Spring入门(一):创建Spring项目 Spring入门(二):自动化装配bean Spring入门(三):通过JavaConfig装配bean 1.为什么要 ...

  6. 使用WebStorm/IDEA上传本地项目到GitHub

    在使用 WebStorm/IDEA 上传本地项目到 GitHub 之前,先要做一些相关配置. 以 WebStorm 为例,IDEA 同. 首先打开 WebStorm ,依次点击File -> S ...

  7. 2016CCPC东北地区大学生程序设计竞赛

    吧啦啦啦啦啦啦啦啦啦啦啦能量,ACM,跨!变身!变成一个智障! http://blog.csdn.net/keyboarderqq/article/details/52743062

  8. memcached连接说明

    memcached 客户端与服务器端通信使用的基于文本的协议,不是二进制,可通过Telnet进行互交

  9. MongoDb 抛出"Error retrieving nonce"异常

    MongoDb在读取一个数据时抛出此异常, google之后也是只有源码没有任何相关结果, 考虑到之前同样的Db下不同的Collection没有发现此问题, 对比之后发现出错的url为: mongod ...

  10. [Xcode 实际操作]八、网络与多线程-(16)使用网址会话对象URLSession下载图片并显示下载进度

    目录:[Swift]Xcode实际操作 本文将演示如何通过网址会话对象URLSession显示下载图片的进度. 网址会话对象URLSession具有在后台上传和下载.暂停和恢复网络操作.丰富的代理模式 ...