Emmet基本语法与使用
基本语法
官方的API文档
https://docs.emmet.io/abbreviations/syntax/
1、后代:>
缩写:nav>ul>li
<nav><ul><li></li></ul>
</nav>
2、兄弟:+
缩写:div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>
3、上级:^
(1)缩写:div+div>p>span+em^bq
<div></div>
<div><p><span></span><em></em></p><blockquote></blockquote>
</div>
(2)缩写:div+div>p>span+em^^bq
<div></div>
<div><p><span></span><em></em></p>
</div>
<blockquote></blockquote>
4、分组:()
(1)缩写: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>
(2)缩写:(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>
5、乘法:*
缩写:ul>li*5
<ul><li></li><li></li><li></li><li></li><li></li>
</ul>
6、自增符号:$
(1)缩写: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>
(2)缩写:h [ t i t l e = i t e m [title=item [title=item]{Header $}*3
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
(3)缩写: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>
(4)缩写: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>
(5)缩写: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>
7、ID和类属性
(1)缩写:#header
<div id="header"></div>
(2)缩写:.title
<div class="title"></div>
(3)缩写:form#search.wide
<form id="search" class="wide"></form>
(4)缩写:p.class1.class2.class3
<p class="class1 class2 class3"></p>
8、自定义属性
(1)缩写:p[title=“Hello world”]
<p title="Hello world"></p>
(2)缩写:td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>
(3)缩写:[a=‘value1’ b=“value2”]
<div a="value1" b="value2"></div>
9、文本:{}
(1)缩写:a{Click me}
<a href="">Click me</a>
(2)缩写:p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p>
10、隐式标签
(1)缩写:.class
<div class="class"></div>
(2)缩写:em>.class
<em><span class="class"></span></em>
(3)缩写:ul>.class
<ul><li class="class"></li>
</ul>
(4)缩写:table>.row>.col
<table><tr class="row"><td class="col"></td></tr>
</table>
HTML标签语法
1、所有未知的缩写都会转换成标签
缩写:hangge
<hangge></hangge>
2、基本html标签
(1)缩写:!
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body></body>
</html>
(2)缩写:a
<a href=""></a>
(3)缩写:a:link
<a href="http://"></a>
(4)缩写:a:mail
<a href="mailto:"></a>
(5)缩写:abbr
<abbr title=""></abbr>
(6)缩写:acronym
<acronym title=""></acronym>
(7)缩写:base
<base href="" />
(8)缩写:basefont
<basefont />
(9)缩写:br
<br />
(10)缩写:frame
<frame />
(11)缩写:hr
<hr />
(12)缩写:bdo
<bdo dir=""></bdo>
(13)缩写:bdo:r
<bdo dir="rtl"></bdo>
(14)缩写:bdo:l
<bdo dir="ltr"></bdo>
(15)缩写:col
<col />
(16)缩写:link
<link rel="stylesheet" href="" />
(17)缩写:link:css
<link rel="stylesheet" href="style.css" />
(18)缩写:link:print
<link rel="stylesheet" href="print.css" media="print" />
(19)缩写:link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
(20)缩写:link:touch
<link rel="apple-touch-icon" href="favicon.png" />
(21)缩写:link:rss
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
(22)缩写:link:atom
<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />
(23)缩写:meta
<meta />
(24)缩写:meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
(25)缩写:meta:win
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
(26)缩写:meta:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
(27)缩写:meta:compat
<meta http-equiv="X-UA-Compatible" content="IE=7" />
(28)缩写:style
<style></style>
(29)缩写:script
<script></script>
(30)缩写:script:src
<script src=""></script>
(31)缩写:img
<img src="" alt="" />
(32)缩写:iframe
<iframe src="" frameborder="0"></iframe>
(33)缩写:embed
<embed src="" type="" />
(34)缩写:object
<object data="" type=""></object>
(35)缩写:param
<param name="" value="" />
(36)缩写:map
<map name=""></map>
(37)缩写:area
<area shape="" coords="" href="" alt="" />
(38)缩写:area:d
<area shape="default" href="" alt="" />
(39)缩写:area:c
<area shape="circle" coords="" href="" alt="" />
(40)缩写:area:r
<area shape="rect" coords="" href="" alt="" />
(41)缩写:area:p
<area shape="poly" coords="" href="" alt="" />
(42)缩写:form
<form action=""></form>
(43)缩写:form:get
<form action="" method="get"></form>
(44)缩写:form:post
<form action="" method="post"></form>
(45)缩写:label
<label for=""></label>
(46)缩写:input
<input type="text" />
(47)缩写:inp
<input type="text" name="" id="" />
(48)缩写:input:hidden
别名:input[type=hidden name]
<input type="hidden" name="" />
(49)缩写:input:h
别名:input:hidden
<input type="hidden" name="" />
(50)缩写:input:text, input:t
别名:inp
<input type="text" name="" id="" />
(50)缩写:input:search
别名:inp[type=search]
<input type="search" name="" id="" />
(51)缩写:input:email
别名:inp[type=email]
<input type="email" name="" id="" />
(52)缩写:input:url
别名:inp[type=url]
<input type="url" name="" id="" />
(53)缩写:input:password
别名:inp[type=password]
<input type="password" name="" id="" />
(54)缩写:input:p
别名:input:password
<input type="password" name="" id="" />
(55)缩写:input:datetime
别名:inp[type=datetime]
<input type="datetime" name="" id="" />
(56)缩写:input:date
别名:inp[type=date]
<input type="date" name="" id="" />
(57)缩写:input:datetime-local
别名:inp[type=datetime-local]
<input type="datetime-local" name="" id="" />
(58)缩写:input:month
别名:inp[type=month]
<input type="month" name="" id="" />
(59)缩写:input:week
别名:inp[type=week]
<input type="week" name="" id="" />
(60)缩写:input:time
别名:inp[type=time]
<input type="time" name="" id="" />
(61)缩写:input:number
别名:inp[type=number]
<input type="number" name="" id="" />
(62)缩写:input:color
别名:inp[type=color]
<input type="color" name="" id="" />
(63)缩写:input:checkbox
别名:inp[type=checkbox]
<input type="checkbox" name="" id="" />
(64)缩写:input:c
别名:input:checkbox
<input type="checkbox" name="" id="" />
(65)缩写:input:radio
别名:inp[type=radio]
<input type="radio" name="" id="" />
(66)缩写:input:r
别名:input:radio
<input type="radio" name="" id="" />
(67)缩写:input:range
别名:inp[type=range]
<input type="range" name="" id="" />
(68)缩写:input:file
别名:inp[type=file]
<input type="file" name="" id="" />
(69)缩写:input:f
别名:input:file
<input type="file" name="" id="" />
(70)缩写:input:submit
<input type="submit" value="" />
```html
(71)缩写:input:s
别名:input:submit
```html
<input type="submit" value="" />
(72)缩写:input:image
<input type="image" src="" alt="" />
(73)缩写:input:i
别名:input:image
<input type="image" src="" alt="" />
(74)缩写:input:button
<input type="button" value="" />
(75)缩写:input:b
别名:input:button
<input type="button" value="" />
(76)缩写:isindex
<isindex />
(77)缩写:input:reset
别名:input:button[type=reset]
<input type="reset" value="" />
(78)缩写:select
<select name="" id=""></select>
(79)缩写:option
<option value=""></option>
(80)缩写:textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
(81)缩写:menu:context
别名:menu[type=context]>
<menu type="context"></menu>
(82)缩写:menu:c
别名:menu:context
<menu type="context"></menu>
(83)缩写:menu:toolbar
别名:menu[type=toolbar]>
<menu type="toolbar"></menu>
(84)缩写:menu:t
别名:menu:toolbar
<menu type="toolbar"></menu>
(85)缩写:video
<video src=""></video>
(86)缩写:audio
<audio src=""></audio>
(87)缩写:html:xml
<html xmlns="http://www.w3.org/1999/xhtml"></html>
(88)缩写:keygen
<keygen />
(89)缩写:command
<command />
(90)缩写:bq
别名:blockquote
<blockquote></blockquote>
(91)缩写:acr
别名:acronym
<acronym title=""></acronym>
(92)缩写:fig
别名:figure
<figure></figure>
(93)缩写:figc
别名:figcaption
<figcaption></figcaption>
(94)缩写:ifr
别名:iframe
<iframe src="" frameborder="0"></iframe>
(95)缩写:emb
别名:embed
<embed src="" type="" />
(96)缩写:obj
别名:object
<object data="" type=""></object>
(97)缩写:src
别名:source
<source></source>
(98)缩写:cap
别名:caption
<caption></caption>
(99)缩写:colg
别名:colgroup
<colgroup></colgroup>
(100)缩写:fst, fset
别名:fieldset
<fieldset></fieldset>
(101)缩写:btn
别名:button
<button></button>
(102)缩写:btn:b
别名:button[type=button]
<button type="button"></button>
(103)缩写:btn:r
别名:button[type=reset]
<button type="reset"></button>
(104)缩写:btn:s
别名:button[type=submit]
<button type="submit"></button>
参考: Atom - Emmet插件的使用详解(HTML/CSS代码自动补全)
Emmet基本语法与使用相关推荐
- 一篇文章搞懂【Emmet】语法规则(前端必备技能)
前端人员编写网页代码时可以依靠一些编辑器的语法提示加快编写速度.大多数编辑器也提供emmet插件来更快的编写HTML和css代码.emmet的语法规则比较简单易理解可以极大的提高编码速度,基本上是前端 ...
- Emmet常用语法总结
Emmet简介 Emmet它是一组专门用来提高编写 HTML 和 CSS 代码速度的便利工具.将它整合进文本编辑器,可以提供一些功能和快捷方式,加快开发速度.在Emmet中包括HTML语法和CSS语法 ...
- [转]Emmet 生成 HTML 的语法
在上篇文章前端开发神器 Emmet 介绍中,我简单的介绍了一下 Emmet ,并且用了一句指令迅速生成了一大片 HTML 代码.本文,就会介绍 Emmet 的 HTML 语法,看完之后,你就会看懂并且 ...
- Emmet语法及使用介绍
Emmet语法及使用介绍 什么是Emmet? Emmet 是一个支持大多数流行文本编辑器的极大改善 html 和 css 的工作流的一个插件. 在输入emmet表达式时会出现提示和预览效果,在出现提示 ...
- 使用 Emmet 生成 HTML 的语法详解
生成 HTML 文档初始结构 HTML 文档的初始结构,就是包括 doctype.html.head.body 以及 meta 等内容.你只需要输入一个 "!" 就可以生成一个 H ...
- 使用 Emmet 生成 HTML 的语法详解-转载
生成 HTML 文档初始结构 HTML 文档的初始结构,就是包括 doctype.html.head.body 以及 meta 等内容.你只需要输入一个 "!" 就可以生成一个 H ...
- sublime Emmet的用法及相关语法
http://www.haorooms.com/post/emmet_s 上一节,我们讲了 前端神器-sublime text3插件安装及使用,讲了Emmet插件. 本节来讲一下Emmet插件的用法及 ...
- Emmet使用-----HTML
Emmet使用-–HTML 这个插件很多地方都可以用,sublime,webstream等 Emmet官网文档:http://docs.emmet.io/ 语法: 1.后代:> 缩写:nav&g ...
- sublime text插件emmet的用法教程
转载自:http://blog.wpjam.com/m/emmet-grammar/ 使用 Emmet 生成 HTML 的语法详解 现在,打开你的 ST2 然后新建一个 HTML 文档,跟着文章,即时 ...
最新文章
- Python,OpenCV使用KNN来构建手写数字及字母识别OCR
- CPU对指令长度的判断
- python详细安装步骤-最新Python安装图文教程[很详细]
- SAP客户合作伙伴关系使用说明
- linux目录怎么自动生成,情景linux--如何快速生成大文件?
- 文件传输服务器多目录,node ftp 模块 如何把本地多个文件夹或者文件上传到服务器...
- Python_面向对象_递归
- 三年半Java后端面试经历
- java开发plc上位机软件开发_上位机开发之西门子PLC-S7通信实践
- hpux 11.11 连接HDS 存储,采用HDLM管理带来的麻烦,需重启。
- 【分享】时至今日,深度学习领域有哪些值得追踪的前沿研究?
- 3.4 RNN网络扩展:堆叠RNN、递归神经网络、图网络
- 金字塔原理——表达的逻辑
- Java基础篇---练习:类的设计
- 初等变换和阶梯矩阵【】
- 数学传奇1——群星闪耀时
- python词频统计_用Python实现一个词频统计(词云+图)
- mysql中长整型是longint_整型int和长整型long
- The Evils of Duplication
- RoboCup智能机器人足球教程(二)
热门文章
- pytest文档59-运行未提交git的用例(pytest-picked)
- 选型宝访谈:什么是OpenStack云平台的正确打开方式 ?
- Azure Kubernetes 服务 (AKS)
- 通过长期测试定位java服务内存泄漏问题
- 小程序篇(初学者日记)
- 股票行情|4月26日股票市场要闻资讯(附股)
- 三个月跳槽2次,我经历了什么?
- TFS + Git - 同步代码时遇到异常 an error was raised by libgit2.dll. ...
- Entrez ID 和 gene symbol 和 Ensembl ID转换
- 人生百岁几人得,珍惜在世每一天