sublime中emmet插件使用
emmet(原名zen coding):是文本编辑器的一款辅助输入HTML和CSS代码的插件。现在可支持以下的文本编辑器:
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
CodeMirror2/3
Brackets
在上面列表点击你目前使用的编辑器,就可以获得对应的插件文件,安装之后就可以使用 Emmet 的相关功能了。由于 Sublime text 2 是目前最好最强大的前端开发代码编辑器,所以本文就以 Sublime text 2文档编辑器中使用为例,讲解基础语法。
1,初始化文档
当我们开始编写一个html文档时,有些固定的标签是可以快速生成的。在sublime text2中新建文件,另存为html格式。输入:
!或者html:5 , 然后tab键或者Ctrl+e 快速加载HTML5文档。他类型的文档:
html:5 或!:用于HTML5文档类型
html:xt:用于XHTML过渡文档类型
html:4s:用于HTML4严格文档类型
2,单个DOM元素
在html文档中输入以下格式,然后按下tab键可以快速补全新建的元素,并赋值相应的属性:
2.1,div#myDiv 按Tab键
<div id="myDiv"></div>
2.2,“.”号表示class 名
div.myDiv
<div class="myDiv"></div>
2.3,“#”号表示Id
div#testId.testName
<div id="testId" class="testName"></div>
2.4,大括号{}内添加的是内容
div{thisismydiv}
<div>thisismydiv</div>
2.5,方括号[]可赋值属性。
scrip[src=”/local/my/.js”]
<script src="/local/my/.js"></script>
3,DOM元素嵌套
emmet的补全功能很强大,一行代码就可以实现DOM元素的嵌套,我们首先熟悉下元素关系符号:
:子元素符号,表示嵌套的元素
+:同级标签符号
^:可以使该符号后的标签提升一级
下面给出了例子, 输入以下格式,然后按下Tab键,快速产生嵌套元素:
3.1,div>span
<div><span></span></div>
3.2,div#parDiv>div.childnode
然后Tab
<div id="parDiv"><div class="childnode"></div></div>
3.3,div+div+div
<div></div>
<div></div>
<div></div>
3.4,div^p
<div></div>
<p></p>
3.5,span>div^div#sss
<span><div></div>
</span>
<div id="sss"></div>
注意与: span>div+div#sss 的区别:
<span><div></div><div id="sss"></div>
</span>
4,嵌套结合括号
嵌套加上使用括号(),可快速生产一些代码块:
div#block1>span)+(div#block2>ul>li)+(.block3>h1) 接着按下Tab键
div id="block1"><span></span></div>
<div id="block2"><ul><li></li></ul>
</div>
<div class="block3"><h1></h1>
</div>
注意:以上id为block3的标签还使用了隐式标签。输入“.item”即可生成
<div class="item"></div>
现在,emmet还会根据上下文判断隐式标签给出div还是其他,如:
ul>.myitem
<ul><li class="myitem"></li>
</ul>
这里有素有隐式标签名称:
li:用于ul和ol中
tr:用于table、tbody、thead和tfoot中
td:用于tr中
option:用于select和optgroup中
5,定义多个元素
这个是个很有用的功能。使用*定义多个元素,下面在例子中学习,同样的,输入公式后按Tab键,就不一一标注了:
5.1, ul>li*3
<ul><li></li><li></li><li></li>
</ul>
5.2,结合属性使用:div#outer>div#childDiv*3
<div id="outer"><div id="childDiv"></div><div id="childDiv"></div><div id="childDiv"></div>
</div>
5.3 使用$来依次编号各元素:div>ul>li.item$*5
<div><ul><li class="item1"></li><li class="item2"></li><li class="item3"></li><li class="item4"></li><li class="item5"></li></ul>
</div>
5.4 使用”$@-“符号号,来反向编号:div>ul>li.item$@-*5
<div><ul><li class="item5"></li><li class="item4"></li><li class="item3"></li><li class="item2"></li><li class="item1"></li></ul>
</div>
5.5 使用“$@数字”从指定的数字开始编号,例如“$@3”从3开始标号:
div>ul>li#itme$@3*6
<div><ul><li id="itme3"></li><li id="itme4"></li><li id="itme5"></li><li id="itme6"></li><li id="itme7"></li><li id="itme8"></li></ul>
</div>
记住以上公式,能够大大提高写代码的效率。
sublime中emmet插件使用相关推荐
- Sublime text3 emmet插件安装
Emmet插件作为Sublime text3 的热门插件,首先解决如何添加安装才是使用的基础 在添加Emmet插件的时候,我也遇到了若干问题,只能卸载Sublime text3再安装,终于安装成功,现 ...
- sublime安装emmet插件和一些常用插件和常用快捷键
Preferences >Package Settings > Package Control > Settings - User 添加代码 "debug": t ...
- 【精品】Intellij中Emmet插件的使用技巧
Emmet简述 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML 代码 ...
- sublime text3安装插件 emmet
转载自:http://9iphp.com/web/html/1260.html Sublime Text常用插件总结及Package Control安装方法 2015/01/09 | HTML/ ...
- Sublime的Package Control 及 Emmet插件的安装,Tab键快速html和css代码
问题: Sublime 按 tab键 能补全单个元素标签,但无法同时补全多个元素标签 点下面链接: http://www.miaoqiyuan.cn/products/proxy.php/https: ...
- Sublime Emmet 插件安装教程 Tab 快捷键无法使用问题解决
在 Sublime 界面下键盘输入Ctrl+Shift+P,在跳出的输入框中输入Package Control: Install Package,接下来可能要等待一段时间,然后在跳出的输入框中输入 E ...
- sublime Emmet插件使用方法总结
Emmet(前身是Zen Coding),它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发, ...
- sublime text3安装emmet插件
sublime text3安装emmet插件 很多人输入html:5然后按住Tab键并没有生成完整结构,这是因为没有安装emmet插件 sublime text3安装包(来自官网) 链接:https: ...
- html5 emmet插件,安装sublime及插件emmet
要使用快捷键生成HTML5标准的HTML结构,在下载安装完sublime之后还要安装emmet插件.使用package console安装emmet插件,理论上应该有两种方式(参考官网https:// ...
最新文章
- Docker学习(6)——registry私有仓库工作原理(续)
- 这种「基友」给我来一打!
- 配置防盗链、 访问控制Directory 、访问控制FilesMatch
- css3的动画特效--元素旋转(transition,animation)
- 工作176:表单重置
- 信息学奥赛一本通(1249:Lake Counting)
- nikon n150在电脑中不显示里面的图片的解决方法
- SD从零开始29-30
- java 计划任务_Java实现定时任务的几种方案
- [解决]RESTEASY003215: could not find writer for content-type text/html type: java.lang.String
- 重置winsock目录解决不能上网的问题
- Rhino(犀牛) 7.22安装教程附带安装包
- Linux: 查看网络流量
- VS2008SP1的MFC测试-Ribbon风格(DJ尐舞图形画板2008)
- vuepress-theme-reco的安装与使用
- 数据分析利器之hive优化十大原则
- android从九宫格全屏预览,仿微信朋友圈展示图片的九宫格图片展示控件,支持点击图片全屏预览大图...
- .py文件转.pyc文件
- Windows服务器IIS搭建网站
- ==和===的区别、NAN