emmet 系列(1)基础语法
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)基础语法的更多相关文章
- 【03】emmet系列之CSS语法
[01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 单位: 有几个常用值别 ...
- 【02】emmet系列之HTML语法
[01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 初始化 :快速编写HTML ...
- 【01】emmet系列之基础介绍
[01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 相关网址 官网:http: ...
- openresty开发系列15--lua基础语法4表table和运算符
openresty开发系列15--lua基础语法4表table和运算符 lua中的表table 一)table (表)Table 类型实现了一种抽象的"关联数组".即可用作数组,也 ...
- openresty开发系列14--lua基础语法3函数
openresty开发系列14--lua基础语法3函数 一)function (函数) 有名函数: optional_function_scope function function_name( ar ...
- openresty开发系列13--lua基础语法2常用数据类型介绍
openresty开发系列13--lua基础语法2常用数据类型介绍 一)boolean(布尔)布尔类型,可选值 true/false: Lua 中 nil 和 false 为"假" ...
- 前端开发利器 Emmet 介绍与基础语法教程
在前端开发的过程中,编写 HTML.CSS 代码始终占据了很大的工作比例.特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”.闭合标签等.而现在 Emmet 就是为了提高代码编写 ...
- Python3 系列之 基础语法篇
基础数据类型 整数 python 可以处理任意大小的整数 浮点数 python 可以处理任意大小的浮点数,但是需要注意的一点是:整数运算永远是精确的(除法也是精确的),而浮点数运算则可能会有四舍五入的 ...
- VUE 入坑系列 一 基础语法
html代码 <div id="app"> {{message}} </div> JavaScript代码 var vm = new Vue({ el: & ...
- 【05】emmet系列之各种缩写
[01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 各种缩写 缩写:! & ...
随机推荐
- 一种简单,轻量,灵活的C#对象转Json对象的方案
简单,是因为只有一个类 轻量,是因为整个类代码只有300行 灵活,是因为扩展方式只需要继承重写某个方法即可 补充:修正无法处理可空值类型的bug 首先我将这个类称之为JsonBuilder,我希望它以 ...
- Java继承
Java只支持单继承,不支持多继承. 一个类只能有一个父类,不可以有多个父类. class SubDemo extends Demo{} //ok class SubDemo extends Demo ...
- ABP(现代ASP.NET样板开发框架)系列之19、ABP应用层——审计日志
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之19.ABP应用层——审计日志 ABP是“ASP.NET Boilerplate Project (ASP.NET ...
- js自动提示查询添加功能(不是自动补全)
在工作中遇到查询某些数据,并添加到一个列表里的时候,写了一个小功能. 优点: 1.纯手工JS代码,不需要任何js框架,复制下来就能测试,无毒副作用. 2.通过模糊查询快速定位数据,并添加到列表里. 缺 ...
- 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. ...
- html5中canvas的使用 获取鼠标点击页面上某点的RGB
1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(29)-T4模版
系列目录 本节不再适合本系统,在58,59节已经重构.请超过本节 这讲适合所有的MVC程序 很荣幸,我们的系统有了体验的地址了.演示地址 之前我们发布了一个简单的代码生成器,其原理就是读取数据库的表结 ...
- java中的文件读取和文件写出:如何从一个文件中获取内容以及如何向一个文件中写入内容
import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; import java.io.Fi ...
- 【NLP】基于机器学习角度谈谈CRF(三)
基于机器学习角度谈谈CRF 作者:白宁超 2016年8月3日08:39:14 [摘要]:条件随机场用于序列标注,数据分割等自然语言处理中,表现出很好的效果.在中文分词.中文人名识别和歧义消解等任务中都 ...
- linux内核调试技术之自构proc
1.简介 在上一篇中,在内核中使用printk可以讲调试信息保存在log_buf缓冲区中,可以使用命令 #cat /proc/kmsg 将缓冲区的数区的数数据打印出来,今天我们就来研究一下,自己写k ...