编写html快速的工具,四、Emmet：快速编写HTML,CSS代码的有力工具

介绍

Emmet是一个插件，在IDE中安装该插件后即可使用该功能。

HTML代码写起来虽简单，但是重复代码很多，Emmet能够存在一种HTML代码简写法(比较类似CSS的选择器写法)，比如

div.c1>ul>li*4

(按下tab)将生成如下HTML代码，是不是非常方便：

支持Emmet插件的编辑器

基本用法

E: 生成

E#N: 生成

E.N: 生成

E{value}: 生成value

E+N: 生成

E>N: 生成

B>E^N: 生成. >表示下级，^表示上级

E[attr1="foo1" attr2="foo2"]: 生成

E*n:生成n个

E$*n: 自动编号，生成..., \$表示一位数字，如果\$\$表示01开始编号，\$\$\$表示001开始编号

E$@m*n: 从m开始自动编号。

E$@-*n: 倒序自动编号，生成...

(E): 分组

html:5或！ : 生成html5骨架代码，如下：

html:xt:生成html4 traditional 骨架代码。

html:4s : 生成html4 strict 骨架代码。

例子

这个例子可以自己试试看最后的结果是什么。

html:5>div.container>(nav.navbar.navbar-inverse>div.navbar-header>a.navbar-brand{Crazy Fast}+ul.nav.navbar-nav>li*2>a.menu-\${Menu Item \$})+(div.jumbotron.text-center>h1{Crazy Fast HTML}+p+a#go-button.btn.btn-danger{Learn More})+(div.row.text-center>(div.col-sm-4>div.info-box>span.glyphicon.glyphicon-fire+h2{Lions}+p)+(div.col-sm-8>div.info-box>span.glyphicon.glyphicon-send+h2{Emmmet}+p))

Document

Crazy Fast

• Menu Item 1
• Menu Item 2

Crazy Fast HTML

Learn More

Lions

Emmmet

参考文献

[4] Emmet全部符号介绍：http://docs.emmet.io/cheat-sheet/

快速编写HTML,CSS代码的有力工具Emmet插件

Emmet 是一个编辑器插件,它以一种简写的语法规则可用于快速编写html或css文档内容,它支持多种编辑器. 从官网:http://emmet.io/ 可下载各个编辑器的插件.notepad++ 插 ...

转:Emmet：快速编写HTML,CSS代码的有力工具

http://www.cnblogs.com/xiazdong/p/3562179.html  试着用用

Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧

Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧--summer-rain博客园 xiayuhao 东风夜放花千树. 博 ...

Sublime Text、webstorm等编译器快速编写HTML/CSS代码的技巧

Sublime Text.webstorm等编译器,如果你从事Web前端开发的话,对这几款软件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演 ...

Zen Coding 快速编写HTML/CSS代码的实现

在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...

Emmet快速编写代码

Emmet快速编写代码 ★div →

★CSS选择器 ​ 给标签指定id选择器 di ...

Emmet快速编写CSS样式

基本的CSS样式编写时,很多样式只需输入首字母即可得到不带属性值的CSS样式,像上面说到的margin. 1.而对于一些带有特定的属性值的CSS样式,只需输入CSS标签与属性值的首字母就可以,比如: ...

Emmet 快速编写html代码

简介 快速编写HTML代码 语法简单,语法类似css选择器,30分钟内你就可以搞定它.开发商为sublime.atom.brackets.hbuilder.webstrom等编辑器或IDE提供对应的插 ...

随机推荐

SQL Server 执行计划利用统计信息对数据行的预估原理以及SQL Server 2014中预估策略的改变

前提  本文仅讨论SQL Server查询时, 对于非复合统计信息,也即每个字段的统计信息只包含当前列的数据分布的情况下, 在用多个字段进行组合查询的时候,如何根据统计信息去预估行数的. 利用不同字段 ...

LeetCode 397. Integer Replacement

397. Integer Replacement QuestionEditorial Solution My Submissions   Total Accepted: 5878 Total Subm ...

OpenCv，EmguCv及.net之间的互动(The Interaction of OpenCv, EmguCv AND .net)

http://www.cnblogs.com/xrwang/archive/2010/01/26/TheInteractionOfOpenCv-EmguCvANDDotNet.html 前言 在.ne ...

Checklist For Choosing The Right Database Engine

http://sqlite.org/whentouse.html Appropriate Uses For SQLite SQLite is not directly comparable to cl ...

JavaScript的条件语句

JavaScript的条件语句 1.JavaScript的条件语句包括以下几个 (1)if - 只有当指定条件为true时,使用该语句来执行代码: (2)if...else - 当指定条件为true时 ...

深入理解自定义ListView

深入理解自定义ListView ListView原理 他是一个系统的原生控件,用列表的形式来显示内容.如果内容过过有1000条左右,我们可以通过手势的上下滑动来查看数据.ListView也不是爆出OO ...

ARE 212 - Problem Set 5

ARE 212 - Problem Set 5Due May 1stPart I: Theory (Optional)1. Show that the parameter estimates for ...

spring mvc自定义注解--访问时验证

作用:在访问controller的方法时,判断用户是否是登陆状态. step1:定义注解 import java.lang.annotation.ElementType; import java.la ...

SQLAlchemy通过models创建数据库表

原地址:http://blog.csdn.net/jmilk/article/details/53184903 定义数据模型 models SQLAlchemy 允许我们根据数据库的表结构来创建数据模 ...

unity3d-Visual Studio Tools for Unity快捷键

1.首先 当安装for unity 后,打开vs2013(我使用的是vs2013),右键可以看到for unity 提供了两个快捷键 2.其次 (Ctrl+Shift+M) 3.最后(Ctrl+Shi ...