快速编写HTML,CSS代码的有力工具Emmet插件
Emmet 是一个编辑器插件，它以一种简写的语法规则可用于快速编写html或css文档内容，它支持多种编辑器。
从官网：http://emmet.io/ 可下载各个编辑器的插件。
notepad++ 插件下载地址为：https://github.com/emmetio/npp#readme
也可以从Notepad++ “插件”->“插件管理器”菜单中安装Emmet插件，如果是手动下载安装包方式安装还需要安装Python插件。
安装好插件后可以在“设置”-》“快捷键管理”菜单中修改快捷键配置为Tab键，这样只需要在编辑器中输入Emmet代码然后按Tab键就可以生成对应的html代码了。
Emmet支持的简写规则，类似于CSS选择器。（大写的E代表一个HTML标签）：
E: 生成<E></E>
E#N: 生成<E id="N"></E>
E.N: 生成<E class="N"></E>
E{value}: 生成<E>value</E>
E+N: 生成<E></E><N></N>
E>N: 生成<E><N></N><E>
B>E^N: 生成<B><E></E></B><N></N>. >表示下级，^表示上级
E[attr1="foo1" attr2="foo2"]: 生成<E attr1="foo1" attr2="foo2"></E>
E*n:生成n个<E></E>
E$*n: 自动编号，生成<E1></E1><E2></E2>...<EN></EN>, $表示一位数字，如果$$表示01开始编号，$$$表示001开始编号
E$@m*n: 从m开始自动编号。
E$@-*n: 倒序自动编号，生成<EN></EN>...<E1></E1>
(E): 分组
请看下面的例子。
p
p#main.item
a[href=http://wikipedia.org]{维基百科}
div>p
div+p
p>span^div
对应的HTML代码为：
<p></p>
<p id="main" class="item"></p>
<a href="http://wikipedia.org">维基百科</a>
<div>
<p></p>
</div>
<div></div>
<p></p>
<p><span></span></p>
<div></div>
html:5或！ : 生成html5骨架代码，如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> </body>
</html>
html:xt :生成html4 traditional 骨架代码。
html:4s : 生成html4 strict 骨架代码。
[1] 不错的Emmet教程：http://www.tedlife.com/qian_duan_dai_ma_li_qi_emmet.html
[2] Emmet的高级功能：http://salonglong.com/emmet-advanced.html
[3] Emmet全部符号介绍：http://docs.emmet.io/cheat-sheet/
快速编写HTML,CSS代码的有力工具Emmet插件的更多相关文章
- 四、Emmet：快速编写HTML,CSS代码的有力工具
介绍 Emmet是一个插件,在IDE中安装该插件后即可使用该功能. HTML代码写起来虽简单,但是重复代码很多,Emmet能够存在一种HTML代码简写法(比较类似CSS的选择器写法),比如 div.c ...
- 转:Emmet：快速编写HTML,CSS代码的有力工具
http://www.cnblogs.com/xiazdong/p/3562179.html 试着用用
- Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧
<!DOCTYPE html> Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧--summer-rain博客园 xiayuhao 东风夜放花千树. 博 ...
- Zen Coding 快速编写HTML/CSS代码的实现
在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...
- Sublime Text、webstorm等编译器快速编写HTML/CSS代码的技巧
Sublime Text.webstorm等编译器,如果你从事Web前端开发的话,对这几款软件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演 ...
- Sublime Text 2/3 安装Emmet(Zencoding)以及常见使用，一种快速编写HTML/CSS代码的方法
原文链接http://blog.csdn.net/shirley254/article/details/52336744
- 编写优秀 CSS 代码的 8 个策略
编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一.然而,我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性. 我认为这主要是因为许多开发人员对组织CSS / H ...
- 编写优秀CSS代码的8个策略
编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一.然而,我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性. 我认为这主要是因为许多开发人员对组织CSS / H ...
- 20个编写现代 CSS 代码的建议
明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...
随机推荐
- Python开发【第一篇】Python基础之字符串格式化
字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[PEP-310 ...
- [terry笔记]更改oracle用户名
更改oracle的用户名 之前有个需求,整理一个schema的表.索引等规划到一个表空间里,利用expdp/impdp然后remap就完成了,但是整理好的用户名remap变更了,应用又不想修改其连接信 ...
- web开发中，前端javascript代码的组织结构
网页包含三个层次: 结构(HTML) 表现(CSS) 行为(javascript) web标准中,三者要分离,网页源代码由三部分组成:.html文件..css文件和.js文件.就是说html文件中不应 ...
- Win8.1想要卸载openSUSE出现问题（2014.8.15已解决）
用DiskGenius激活C盘后果然好用了!随便用EasyBCD恢复一下就好了 下面再说说安装openSUSE这半周多的问题: 1.如果是NVIDIA和Intel双显卡就不要安装NVIDIA的显卡驱动 ...
- GROUPING SETS、CUBE、ROLLUP
其实还是写一个Demo 比较好 USE tempdb IF OBJECT_ID( 'dbo.T1' , 'U' )IS NOT NULL BEGIN DROP TABLE dbo.T1; END; G ...
- NOJ1018-深度遍历二叉树
题目要求很简单,前中后序遍历一棵二叉树.坑爹的是这道题的输入数据和测试数据压根不一样,找了好久原因,去讨论区看见有别人发的测试样例,修改了一下就AC了 测试样例是这个:DEH##FJ##G#CK### ...
- MongoDB牛刀小试
MongoDB基本操作 1.MongoDB的启动 首先创建一个目录作为MongoDB的工作目录: 进入MongoDB的bin目录: 执行mongod命令,使用参数--dbpath指定MongoDB的工 ...
- Android的快速开发框架afinal
afinal 是一个android的 orm 和 ioc 框架.而且封装了android中的httpClient,使其更加简单易用. afinal是android应用开发的终极框架. FinalDB使 ...
- C++ 学习笔记（一）
只是记录自己学习C++ 笔记实例来自<c++ primer> 1.static: static 局部对象确保不迟于在程序执行流程第一次经过该对象的定义语句时进行初始化.这种对象一旦被创建, ...
- Swing做的非阻塞式仿飞秋聊天程序
采用Swing 布局 NIO非阻塞式仿飞秋聊天程序, 切换皮肤颜色什么的小功能以后慢慢做 启动主程序. 当用户打开主程序后自动获取局域网段IP可以在 设置 --> IP网段过滤, 拥有 JMF ...