emmet 系列(1)基础语法

emmet 是一个能显著提升开发html和css开发效率的web开发者工具

emmet基本上目前已知的编辑器都有相应的插件,各个编辑器的emmet插件的下载地址:点我下载

子集元素:>

nav>ul>li

    <nav>
<ul>
<li></li>
</ul>
</nav>

兄弟元素:+

div+p+bq

    <div></div>
<p></p>
<blockquote></blockquote>

父级元素:^

div+div>p>span+em^bq

    <div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>

分组:()

div>(header>ul>li*2>a)+footer>p

    <div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>

(div>dl>(dt+dd)*3)+footer>p

    <div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>

多个:*

ul>li*5

    <ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

项目编号:$

ul>li.item$*5

    <ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>

h$[title=item$]{Header $}*3

    <h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

ul>li.item$@-*5

    <ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>

ul>li.item$@3*5

    <ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>

ID和Class属性# .

#header

	<div id="header"></div>

.title

<div class="title"></div>

Form#search.wide

    <form action="" id="search" class="wide"></form>

p.class1.class2.class3

   <p class="class1 class2 class3"></p>

常用属性:[]

p[title="hello world"]

   <p title="hello world"></p>

td[rowspan=2 colspan=3 title]

   <td rowspan="2" colspan="3" title=""></td>

[a='value1' b='value2']

    <div a="value1" b="value2"></div>

文本:{}

a{click me}

<a href="">Click me</a>

p>{Click }+a{here}+{ to continue}

    <p>Click<a href="">here</a> to continue</p>

默认规则

默认规则,当指明父标签时,符合默认规则的子标签可不必写出具体标签名

.aaa

<div class="aaa"></div>

em>.classs

    <em><span class="classs"></span></em>

ul>.classs

    <ul>
<li class="classs"></li>
</ul>

table>.row>.col

    <table>
<tr class="row">
<td class="col"></td>
</tr>
</table>

emmet 系列(1)基础语法的更多相关文章

  1. 【03】emmet系列之CSS语法

    [01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写   单位: 有几个常用值别 ...

  2. 【02】emmet系列之HTML语法

    [01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 初始化 :快速编写HTML ...

  3. 【01】emmet系列之基础介绍

    [01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 相关网址 官网:http: ...

  4. openresty开发系列15--lua基础语法4表table和运算符

    openresty开发系列15--lua基础语法4表table和运算符 lua中的表table 一)table (表)Table 类型实现了一种抽象的"关联数组".即可用作数组,也 ...

  5. openresty开发系列14--lua基础语法3函数

    openresty开发系列14--lua基础语法3函数 一)function (函数) 有名函数: optional_function_scope function function_name( ar ...

  6. openresty开发系列13--lua基础语法2常用数据类型介绍

    openresty开发系列13--lua基础语法2常用数据类型介绍 一)boolean(布尔)布尔类型,可选值 true/false: Lua 中 nil 和 false 为"假" ...

  7. 前端开发利器 Emmet 介绍与基础语法教程

    在前端开发的过程中,编写 HTML.CSS 代码始终占据了很大的工作比例.特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”.闭合标签等.而现在 Emmet 就是为了提高代码编写 ...

  8. Python3 系列之 基础语法篇

    基础数据类型 整数 python 可以处理任意大小的整数 浮点数 python 可以处理任意大小的浮点数,但是需要注意的一点是:整数运算永远是精确的(除法也是精确的),而浮点数运算则可能会有四舍五入的 ...

  9. VUE 入坑系列 一 基础语法

    html代码 <div id="app"> {{message}} </div> JavaScript代码 var vm = new Vue({ el: & ...

  10. 【05】emmet系列之各种缩写

    [01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 各种缩写   缩写:! & ...

随机推荐

  1. 一种简单,轻量,灵活的C#对象转Json对象的方案

    简单,是因为只有一个类 轻量,是因为整个类代码只有300行 灵活,是因为扩展方式只需要继承重写某个方法即可 补充:修正无法处理可空值类型的bug 首先我将这个类称之为JsonBuilder,我希望它以 ...

  2. Java继承

    Java只支持单继承,不支持多继承. 一个类只能有一个父类,不可以有多个父类. class SubDemo extends Demo{} //ok class SubDemo extends Demo ...

  3. ABP(现代ASP.NET样板开发框架)系列之19、ABP应用层——审计日志

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之19.ABP应用层——审计日志 ABP是“ASP.NET Boilerplate Project (ASP.NET ...

  4. js自动提示查询添加功能(不是自动补全)

    在工作中遇到查询某些数据,并添加到一个列表里的时候,写了一个小功能. 优点: 1.纯手工JS代码,不需要任何js框架,复制下来就能测试,无毒副作用. 2.通过模糊查询快速定位数据,并添加到列表里. 缺 ...

  5. Dapper:The member of type SeoTKD cannot be used as a parameter Value

    异常汇总:http://www.cnblogs.com/dunitian/p/4523006.html#dapper 上次说了一下Dapper的扩展Dapper.Contrib http://www. ...

  6. html5中canvas的使用 获取鼠标点击页面上某点的RGB

    1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...

  7. ASP.NET MVC5+EF6+EasyUI 后台管理系统(29)-T4模版

    系列目录 本节不再适合本系统,在58,59节已经重构.请超过本节 这讲适合所有的MVC程序 很荣幸,我们的系统有了体验的地址了.演示地址 之前我们发布了一个简单的代码生成器,其原理就是读取数据库的表结 ...

  8. java中的文件读取和文件写出:如何从一个文件中获取内容以及如何向一个文件中写入内容

    import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; import java.io.Fi ...

  9. 【NLP】基于机器学习角度谈谈CRF(三)

    基于机器学习角度谈谈CRF 作者:白宁超 2016年8月3日08:39:14 [摘要]:条件随机场用于序列标注,数据分割等自然语言处理中,表现出很好的效果.在中文分词.中文人名识别和歧义消解等任务中都 ...

  10. linux内核调试技术之自构proc

    1.简介 在上一篇中,在内核中使用printk可以讲调试信息保存在log_buf缓冲区中,可以使用命令 #cat /proc/kmsg  将缓冲区的数区的数数据打印出来,今天我们就来研究一下,自己写k ...