emmet语法2.docx
- 文档编号：29366073
- 上传时间：2023-07-22
- 格式：DOCX
- 页数：19
- 大小：26.01KB
emmet语法2.docx
《emmet语法2.docx》由会员分享，可在线阅读，更多相关《emmet语法2.docx（19页珍藏版）》请在冰豆网上搜索。
emmet语法2
介绍
Emmet（前身为ZenCoding）是一个能大幅度提高前端开发效率的一个工具:
基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。
虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：
你必须先定义你得代码片段，并且不能再运行时进行拓展。
Emmet把片段这个概念提高到了一个新的层次：
你可以设置CSS形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。
Emmet是很成熟的并且非常适用于编写HTML/XML和CSS代码的前端开发人员，但也可以用于编程语言。
使用示例：
在编辑器中输入缩写代码：
ul>li*5，然后按下拓展键（默认为tab），即可得到代码片段：
下载和安装
1.Emmet为大部分流行的编辑器都提供了安装插件，下面是它们的下载链接：
o SublimeText
o Eclipse/Aptana
o TextMate
o Coda
o Espresso
o Chocolat
o KomodoEdit
o Notepad++
o PSPad
o textarea
o CodeMirror
o Brackets
o NetBeans
o AdobeDreamweaver
2.在线编辑器的支持：
o JSFiddle
o JSBin
o CodePen
o ICEcoder
o Divshot
o Codio
3.第三方插件的支持
下面这些编辑器的插件都是由第三方开发者所提供的，所以可能并不支持所有Emmet的功能和特性。
o SynWrite
o WebStorm
o PhpStorm
o Vim
o HTML-Kit
o HippoEDIT
o CodeLobsterPHPEdition
o TinyMCE
因为我也是SublimeText的使用者，所以下面为大家介绍一下sublimetext中Emmet的安装方法：
步骤一：
首先你需要为sublimetext安装PackageControl组件：
1. 按Ctrl+`调出sublimetext的console
2. 粘贴以下代码到底部命令行并回车：
importurllib2,os;pf='PackageControl.sublime-package';ipp=sublime.installedpackagespath（）;os.makedirs（ipp）ifnotos.path.exists（ipp）elseNone;open（os.path.join（ipp,pf）,'wb'）.write（urllib2.urlopen（'','%20'））.read（））
3. 重启SublimeText
4. 在Perferences->packagesettings中看到packagecontrol，则表示安装成功
步骤二：
使用PackageControl安装Emmet插件：
1. 按Ctrl+Shift+P命令板
2. 输入install然后选择installPackage，然后输入emmet找到EmmetCssSnippets，点击就可以自动完成安装。
使用方法
emmet的使用方法也非常简单，以sublimetext为例，直接在编辑器中输入HTML或CSS的代码的缩写，然后按tab键就可以拓展为完整的代码片段。
（如果与已有的快捷键有冲突的话，可以自行在编辑器中将拓展键设为其他快捷键）
语法:
后代：
>
缩写：
nav>ul>li
兄弟：
+
缩写：
div+p+bq
上级：
^
缩写：
div+div>p>span+em^bq
缩写：
div+div>p>span+em^^bq
分组：
（）
缩写：
div>（header>ul>li*2>a）+footer>p
缩写：
（div>dl>（dt+dd）*3）+footer>p
乘法：
*
缩写：
ul>li*5
自增符号：
$
缩写：
ul>li.item$*5
缩写：
h$[title=item$]{Header$}*3
缩写：
ul>li.item$$$*5
缩写：
ul>li.item$@-*5
缩写：
ul>li.item$@3*5
ID和类属性
缩写：
#header
缩写：
.title
缩写：
form#search.wide
缩写：
p.class1.class2.class3
自定义属性
缩写：
p[title="Helloworld"]
缩写：
td[rowspan=2colspan=3title]
缩写：
[a='value1'b="value2"]
文本：
{}
缩写：
a{Clickme}
缩写：
p>{Click}+a{here}+{tocontinue}
Click
隐式标签
缩写：
.class
缩写：
em>.class
缩写：
ul>.class
缩写：
table>.row>.col
HTML
所有未知的缩写都会转换成标签，例如，foo→
缩写：
!
doctypehtml>