前端Emmet语法文档

Emmet语法

https://www.w3cplus.com/tools/emmet-cheat-sheet.html
sublime安装emmet

按Ctrl+`调出sublime text的console
粘贴以下代码到底部命令行并回车： import urllib2,os;pf=’Package Control.sublime-package’;ipp=sublime.installedpackagespath();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/‘+pf.replace(’ ‘,’%20’)).read())
重启Sublime Text
在Perferences->package settings中看到package control，则表示安装成功

ul>li*5

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

后代 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+div>p>span+em^^bq

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

分组 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

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

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$@-*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和类属性 #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=’value’ b=”value2”]

    <div a="value" 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>

隐式标签 .class

    <div class></div>

em>.class

    <em><span class></span></em>

ul>.class

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

table>.row>.col

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

a

    <a href=""></a>

a:link

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

a:mail

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

abbr

    <abbr title=""></abbr>

acronym

    <acronym title=""></acronym>

base

    <base href="">

basefont

    <basefont>

br

    <br>

frame

    <frame>

hr

    <hr>

bdo

    <bdo dir=""></bdo>

bdo:r

    <bdo dir="rtl"></bdo>

bdo:l

    <bdo dir="ltr"></bdo>

col

    col>

link

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

link:css

    <link rel="stylesheet" href="style.css">

link:print

    <link rel="stylesheet" href="print.css" media="print">

link:favicon

    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

link:touch

    <link rel="apple-touch-icon" href="favicon.png">

link:rss

    <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">

link:atom

    <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml">

meta

    <meta>

meta:utf

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

meta:win

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

meta:vp

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

meta:compat

    <meta http-equiv="X-UA-Compatible" content="IE=7">

style

    <style></style>

script

    <script></script>

script:src

    <script src=""></script>

img

    <img src="" alt="">

iframe

    <iframe src="" frameborder="0"></iframe>

embed

    <embed src="" type="">
```html

object  

```html
    <object data="" type=""></object>

param

    <param name="" value="">

map

    <map name=""></map>

area

    <area shape="" coords="" href="" alt="">

area:c

    <area shape="circle" coords="" href="" alt="">

area:r

    <area shape="rect" coords="" href="" alt="">

area:p

    <area shape="poly" coords="" href="" alt="">

form

    <form action=""></form>

form:get

    <form action="" method="get"></form>

form:post

    <form action="" method="post"></form>

label

    <label for=""></label>

input

    <input type="text">

inp

    <input type="text" name="" id="">

input:hidden

    <input type="hidden" name="">

input:h

    <input type="hidden" name="">

input:hidden

    <input type="hidden" name="">

input:text,input:t

    <input type="text" name="" id="">

input:search

    <input type="search" name="" id="">

input:email

    <input type="email" name="" id="">

input:url

    <input type="url" name="" id="">

input:password

    <input type="password" name="" id="">

input:p

    <input type="password" name="" id="">

input:datetime

    <input type="datetime" name="" id="">

input:date

    <input type="date" name="" id="">

input:datetime-local

    <input type="datetime-local" name="" id="">

input:month

    <input type="month" name="" id="">

input:week

    <input type="week" name="" id="">

input:time

    <input type="time" name="" id="">

input:number

    <input type="number" name="" id="">

input:color

    <input type="color" name="" id="">

input:checkbox

    <input type="checkbox" name="" id="">

input:c

    <input type="checkbox" name="" id="">

input:r

    <input type="radio" name="" id="">

input:range

    <input type="range" name="" id="">

input:file

    <input type="file" name="" id="">

input:f

    <input type="file" name="" id="">

input:s

    <input type="submit" value="">

input:image

    <input type="image" src="" alt="">

input:i

    <input type="image" src="" alt="">

input:button

    <input type="button" value="">

input:b

    <input type="button" value="">

isindex

    <isindex>

input:reset

    <input type="reset" value="">

select

    <select name="" id=""></select>

option

    <option value=""></option>

textarea

    <textarea name="" id="" cols="30" rows="10"></textarea>

menu:context

    <menu type="context"></menu>

menu:c

    <menu type="context"></menu>

menu:toolbar

    <menu type="toolbar"></menu>

menu:t

    <menu type="toolbar"></menu>

video

    <video src=""></video>

audio

    <audio src=""></audio>

html:xml

    <html xmlns="http://www.w3.org/1999/xhtml"></html>

keygen

    <keygen>

command

    <command>

bq

    <blockquote></blockquote>

acr

    <acronym title=""></acronym>

fig

    <figure></figure>

figc

    <figcaption></figcaption>

ifr

    <iframe src="" frameborder="0"></iframe>

emb

    <embed src="" type="">

obj

    <object data="" type=""></object>

src

    <source></source>

cap

    <caption></caption>

colg

    <colgroup></colgroup>

fst,fest

    <fieldset></fieldset>

btn

    <button></button>

btn:r

    <button type="reset"></button>

btn:s

    <button type="submit"></button>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,384评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,845评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,148评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,640评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,731评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,712评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,703评论 3赞 415
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,473评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,915评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,063评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,706评论 3赞 324
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2赞 352

推荐阅读更多精彩内容

  • emmet语法
    原文:https://www.w3cplus.com/tools/emmet-cheat-sheet.html 语...
    情怀已售罄丶阅读 443评论 0赞 0
  • emmet
    使用方法 emmet的使用方法也非常简单，以sublime text为例，直接在编辑器中输入HTML或CSS的代码...
    jrg陈咪咪sunny阅读 361评论 0赞 1
  • html 快捷键
    Child: >nav>ul>li Sibling: +div+p+bq Clim...
    Michael_涵阅读 409评论 0赞 1
  • VS Code
    [TOC] 插件 VSCode折腾记-(1)快捷键大全 【备忘】 vscode 必备插件VsCode中使用Emme...
    百炼阅读 980评论 0赞 1
  • 原来研究生的生活是酱紫滴……
    不知不觉，从研究生开学到现在已经整整一个学期了，跟本科相比，变化还真的是蛮大的。 去年的现在，还在辛辛苦苦的准备考...
    小阳光Sunshine阅读 604评论 2赞 13