`

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

阅读更多

日期:2013-1-17  来源:GBin1.com

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

还记得Emmet(即Zen coding)吗?最棒的书写HTML代码的利器之一,能够帮助你快速书写HTML代码的工具。在今天这篇文章中,我们将要分享7个超酷的Emmet书写HTML的技巧,希望大家喜欢!

1. 跳过Div

第一个小技巧就是跳过div,Emment非常清楚你需要输入什么内容,你只需要输入class或者是id,Emmet会自动帮助你生成正确的div。如下:

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

大家可以看到,不管你是否添加了div,Emmet都会自动生成需要div元素。

含糊标签名称

这个技巧属于implicit tag names特性,你不需要指定div或者li,Emmet会自动帮助你生成,如下:

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

2. 带有DOM导航的链式缩写

如果你使用Emmet来扩展简单的class名称生成div的话。这个方式可以帮助你省去大量的时间。你只需要记住如下语法:

  • > 子节点:在DOM树下一层添加创建一个元素
  • + 同级别:在DOM树同一层添加创建一个元素
  • ^ 向上层:向上一层添加创建创建一个元素。

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

.........

如果你想更深入的了解相关功能,请访问Emmet的站点获取最新的文档。如果碰巧你也有一些使用技巧,请访问我们的标签社区与我们分享!

来源:分享7个超实用的Emmet(zen coding)HTML代码使用技巧

分享到:
评论

相关推荐

    Emmet (Zen Coding) 适用Dreamweaver各版本

    Emmet (Zen Coding) 百度可以搜索到想要的 安装操作步骤 方便书写DIV+CSS

    zencoding使用手册

    这是zencoding的使用手册,如果你感兴趣的话可以下来看看 英文的哦 亲~

    notepad++ zencoding插件notepad++ zencoding插件notepad++ zencoding插件

    notepad++ 密码是1 zencoding插件

    sublime text 2 zen coding 插件

    sublime text 2 zen coding插件 zen coding for sublime text 2

    Zen Coding.vim

    Zen Coding: 一种快速编写HTML/CSS代码的方法 输入 div#i$-test.class$$$*5 …然后调用”展开缩写”行为 会被转换成为: <div id="i1-test" class="class111"></div> <div id="i2-test" class="class222"></div> ...

    zencoding-vim

    vim的zenCoding插件,能显著提高前端开发效率。

    zen coding DW插件

    zen coding DW插件可以更方便快捷的编写你的网站代码了。

    zencoding for Komodo

    一种快速编写HTML/CSS代码的方法  使用仿CSS选择器的语法来快速开发HTML和CSS html+css 代码快速编写... Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。

    dreamweaver的几个实用插件 zen coding,html5扩展,jquery插件

    Zen.Coding-Dreamweaver.v0.6 zen.coding html代码编写利器自动生成html jQuery_api_for_dw4 dreamweaver cs4的jquery插件 DW5插件-jQuery_api_for_dwcs5 dreamweaver cs5的jquery插件 AdobeDreamweaver-11.0-All-...

    ZenCoding菜单与快捷键设置

    Zencoding是网络开发人员的得力助手,这里奉上Zencoding的菜单与快捷键一览表,还有解决快捷键冲突的办法。

    zen coding--免费下载

    Sublime Text 2插件包zen coding--免费下载zen coding Sublime Text 2插件包

    dreamweaver cs6 zen coding插件

    dreamweaver cs6 zen coding插件,快速书写html

    zen coding插件下载

    zen coding插件方便简洁,输入代码关键字即可实现完整排版。极为方便

    zencoding中文参考手册

    zencoding相比做前端的同学都知道,可是神器,这个参考手册是pdf版,包括所有使用方法,做的也很漂亮,喜欢的同学可以拿去。

    Zen Coding v.0.6.mxp

    Zen Coding v.0.6.mxp cs5 dw代码神器

    zen coding

    一种快速编写HTML/CSS代码的方法 使用仿CSS选择器的语法来快速开发HTML和CSS html+css 代码快速编写 ——由Sergey Chikuyonok开发。 Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上...

    ZenCoding.zip

    zenCoding从其它地主转载而来。集成的ZenCoding压缩包

    最全Myeclipse2014/Eclipse Emmet(原zen coding)插件

    最新最全Myeclipse2014/Eclipse Emmet(原zen coding)插件 Myeclipse2014、10可以使用,2015自带,其他版本请自行测试。8.5肯定不行。 该插件使开发者可以像写CSS一样编写html标签,Tab后自动补全代码,极快的提高...

    为Notepad++安装 Zen Coding 插件

    Notepad++ 是一款无比轻巧便捷的代码编辑工具。它无可挑剔的启动速度,优秀的语法高亮,干净整齐的代码缩进,便捷的括号...而 Zen Coding 的横空出世,总算终结了这种纠结,让我们得以以一种无比帅气的方式书写代码。

    zencoding for EditPlus

    提高HTML编写的效率,让HTML的编写更快捷,editplus html代码书写必备工具

Global site tag (gtag.js) - Google Analytics