Emmet插件比较实用常用的写法

看了一些关于Emmet插件写法的文档，港真，怎么可以写这么长啊。其实知道几个大概要点加上实践基本就能上手写了啊

杂话

我前面有一篇【今天发现新大陆：haml和Emmet 】，其实一开始的想法是写给自己看的。

有人去阅读我的博客和评论，虽然不算多，但是对于我这种刚入门的小白渣渣还是受宠若惊的。我这大喜的蠢样子也是经常被男票说四不四傻……ㄟ(⊙ω⊙ㄟ)

嗯，跑偏了。总之，以后写东西不管是给自己看也好，给别人看都好。秉持着分享的精神一定认真好好的写(~Q~)

关于Emmet

Emmet插件的前身是Zen coding，可以大幅度提高前端开发效率的一个工具，也有人说类似于jade（高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用）。再官方一些的官方语言的叽叽喳喳我就不详写了，直接百度可以找到。

Emmet支持的编辑器：

Sublime Text 2
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat （通过“Install Mixin”对话框添加)
Komodo Edit/IDE （通过Tools → Add-ons菜单添加)
Notepad++
PSPad
<textarea>
CodeMirror2/3
Brackets

第三方插件的支持

下面这些编辑器的插件都是由第三方开发者所提供的，所以可能并不支持所有Emmet的功能和特性。

Emmet安装方法(Sublime text 3安装emmet插件的方法：http://blog.csdn.net/mengke1124/article/details/41696779)

因为我用的是Sublime text 3，其他编辑器安装的方法可能要根据自己的需要在网上搜刮了

Emmet插件实用常用方法

（http://www.w3cplus.com/tools/emmet-cheat-sheet.html）

这篇文档写的很清晰，也有安装插件的方法。但是介绍的方法太多，感觉有点冗长，我汇总了一些我个人觉得比较实用常用的方法。

略写版：

div>(header>ul>li*2>a)+footer>p(+号连接下一个兄弟元素)
(div>dl>(dt+dd)*3)+footer>p(括号内为一个组)
ul>li$[title=item$]{hhh $}*5(li$,表示li自增+1)
h.item${hhh $}*5({}括号内为显示文本)
ul>li.item$$$*5($为自增,三个$为三位数字)
ul>li.item$@3*5(@从3开始自增+1)
ul>li.item$@-*5(@-,自减)
ul>li.item$@-3*5(@-3,自减最小数字为3)
form#search.wide(#为id,.为类)
p[title='hello word'](自定义属性)

(隐式标签)

.class
em>.class
ul>.class
table>.row>.col
!(页面html开始代码缩写)
(缩写)
a
a:link
hr
link
link.css
meta:utf
script:src
img

详写版：

div+div>p>span+em^bq(^为上级元素)

<div></div>

<div>

    <p><span></span><em></em></p>

    <blockquote></blockquote>

</div>

div+div>p>span+em^^bq

<div></div>

<div>

    <p><span></span><em></em></p>

</div>

<blockquote></blockquote>

ul>li*5(>为后代缩写,*表示有几个)

<ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

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$[title=item$]{hhh $}*5(li$,表示li自增+1)

<ul>

    <li1 title="item1">hhh 1</li1>

    <li2 title="item2">hhh 2</li2>

    <li3 title="item3">hhh 3</li3>

    <li4 title="item4">hhh 4</li4>

    <li5 title="item5">hhh 5</li5>

</ul>

h.item${hhh $}*5({}括号内为显示文本)

<h class="item1">hhh 1</h>

<h class="item2">hhh 2</h>

<h class="item3">hhh 3</h>

<h class="item4">hhh 4</h>

<h class="item5">hhh 5</h>

ul>li.item$$$*5($为自增,三个$为三位数字)

<ul>

    <li class="item001"></li>

    <li class="item002"></li>

    <li class="item003"></li>

    <li class="item004"></li>

    <li class="item005"></li>

</ul>

ul>li.item$@3*5(@从3开始自增+1)

<ul>

    <li class="item3"></li>

    <li class="item4"></li>

    <li class="item5"></li>

    <li class="item6"></li>

    <li class="item7"></li>

</ul>

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(@-3,自减最小数字为3)

<ul>

    <li class="item7"></li>

    <li class="item6"></li>

    <li class="item5"></li>

    <li class="item4"></li>

    <li class="item3"></li>

</ul>

form#search.wide(#为id,.为类)

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

p[title='hello word'](自定义属性)

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

(隐式标签)
.class

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

em>.class

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

ul>.class

<ul>

    <li class="class"></li>

</ul>

table>.row>.col

<table>

    <tr class="row">

        <td class="col"></td>

    </tr>

</table>

!(页面html开始代码缩写)

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

</body>

</html>

(缩写)
a

<a href=""></a>

a:link

<a href="http://"></a>

<hr>

link

<link rel="stylesheet" href="">

link.css

<link rel="stylesheet" href="" class="css">

meta:utf

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

script:src

<script src=""></script>

img

<img src="" alt="">

官方api：http://docs.emmet.io/cheat-sheet/

api表：http://www.w3cplus.com/sites/default/files/baiyaimages/CheatSheet.jpg

(●-●) 真心讨厌弄文本格式，感觉好浪费时间……

Emmet插件比较实用常用的写法的更多相关文章

sublime课程3 emmet插件中的常用符号有哪些
sublime课程3 emmet插件中的常用符号有哪些一.总结一句话总结:emmet插件中的符号和css选择器里面哪些符号的意思很像. 1.+是干嘛的? 组合 2.{}是干嘛的? 标签里面的inn ...
前端emmet插件的一些常用用法
以下是在webstorm中简单使用emmet插件,注意一点就是当编写完emmet命令后一定要把光标移动到命令的结尾处,不然生成的代码会不一样 <!DOCTYPE html> <htm ...
【转】sublime text 2中Emmet插件8个常用的技巧
因为开始做web项目,所以最近在用sublime编辑器,知道了一个传说中的emmet,原名是zen coding.html神插件可以说是.文章部分内容转自http://www.cnblogs.com/ ...
Sublime Text 2 安装emmet插件和常用快捷键
一.先安装package control1.按Ctrl+`调出console,输入以下命令然后回车 import urllib2,os; pf='Package Control.sublime-pac ...
“一键”生成HTML——Emmet插件常用语法
Emmet是一款文本编辑器/IDE的插件,用来快速生成复杂的HTML代码,只要掌握一些常用的语法(类似于CSS选择器),就可以减少重复编码的工作(主要是懒).我个人惯用的是sublime,因此下文介绍 ...
Emmet插件使用方法总结
Emmet插件使用方法总结在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等. ...
第 30 章使用 Emmet 插件
学习要点: 1.安装方式 2.自定义!生成 3.快速生成主讲教师:李炎恢本章主要探讨了解一下 Sublime Text3 的一个 HTML5 代码提示插件:Emmet,这个插件比自带原生的要强 ...
Sublime 插件安装、常用配置
安装:sublime + 插件安装Sublime: 官网:http://www.sublimetext.com/ 安装package control组件,之后我们会使用该组件给Sublime安装常用 ...
Emmet插件详解
http://www.ithao123.cn/content-10512551.html (webstorm的css编写插件)Emmet:HTML/CSS代码快速编写神器 [摘要:Emmet的前身 ...

随机推荐

python 自动化测试资料
python 自动化测试资料: http://yunpan.cn/QXVvwVJsAsPnb
common.css
/* global */ document,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockqu ...
C++ Web Service SDK
https://github.com/zaphoyd/websocketpp https://github.com/aws/aws-sdk-cpp
快乐的JS正则表达式（一）
上一篇介绍了为什么需要正则,那从这一篇开始我们就去学习如何使用正则. 在js中有两种方式创建正则表达式: var reg = new RegExp("表达式","可选规则 ...
各种Camera，总有一款适合你（一）
根据游戏类型的不一样,会需要各种各样的摄像机,下面将分享三种典型的摄像机类型:(1)地下城摄像机:(2)第三人称跟随摄像机:(3)鼠标控制旋转摄像机.将这些控制脚本拖动到场景的MainCamera上即 ...
Linux下打开串口设置
给出打开串口函数 int open_tty(char tty[]) { int fd; char tty_path[32]={0}; sprintf(tty_path,"/dev/%s&qu ...
bower的使用
一.bower的安装安装nodejs的最新版本: 安装npm. 由于npm是nodejs的包管理器,所以在将nodejs安装完成后,npm也就自动安装完成. 安装git. 安装bower. 使用 n ...
Yii中 RBAC(基于角色的访问控制权限)表结构原理分析
这里有几个概念很重要,我简单用大白话说一下; 权限:就是指用户是否可以执行哪些操作. 如:小张可以发帖.回帖.浏览,小红只能回帖.浏览角色:就是上面说的一组操作的集合. 如:高级会员有发帖.回帖.删 ...
Device.js – 快速检测平台、操作系统和方向信息
在 Web 项目中,有时候我们需要根据程序运行的环境采取特定操作.Device.js 是一个很小的 JavaScript 库,它简化了编写和平台,操作系统或浏览器相关的条件 CSS 或 JavaScr ...
初学Flask（1）
今天在学习Flask,边看官方文档一边动手运行例子,以注释的形式写了一些笔记,分享给大家. Flask官方文档,快速入门: ex1: #coding:utf-8 ################### ...

Emmet插件比较实用常用的写法

Emmet插件比较实用常用的写法的更多相关文章

随机推荐

热门专题