快速编写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相邻时,只有二者中的较 ...
随机推荐
- 8.css边框
其实,与其将css盒模型称为是一个盒子,我更愿意将其称为卡片,或者是图画.因为相对于盒子的三维特效,网页的元素更像是二维的图画.而我们之间对元素尺寸之类的调整,更像是对画布的调整. 但是,就像我可以为 ...
- SRF之页面
页面呈现采用Razor模板 1.母模板说明 _Main.cshtml:基础母模板 _ListLayout.cshtml:列表页面 _EditDialog.cshtml:编辑对话框 _EditLay ...
- 数组（Array），二维数组，三维数组
数组(Array):相同类型数据的集合就叫做数组. (一)定义数组的方法: A) type[] 变量名 = new type[数组中元素的个数] 例如: int[] a = new int[10] ; ...
- AppCan移动平台，开发者是这样用的……
随着生活节奏的加快,每天各种压力山大,难免产生心理问题.然而穷的都要吃土了,又不想面对陌生人,怎么办? 近日,AppCan开发者樊星阳“一夜爆红”,引起猎云网的持续关注.起因是这样的,樊星阳利用App ...
- Windows Phone中使用Native Code
前言 Windows Phone 8 SDK中一个非常有用的特性,就是可以通过Windows Phone Runtime Component (WinPRT)使用C++代码来处理运算量大的任 ...
- 微软云平台媒体服务实践系列 2- 使用动态封装为iOS, Android , Windows 等多平台提供视频点播（VoD）方案
文章微软云平台媒体服务实践系列 1- 使用静态封装为iOS, Android 设备实现点播(VoD)方案 介绍了如何针对少数iOS, Android 客户端的场景,出于节约成本的目的使用媒体服务的静 ...
- mac media server
近日在mac osx基于开源组件nginx-rtmp-module架设了一台默认的media server,以下是过程笔记 下载https://github.com/arut/nginx-rtmp-m ...
- Qt中的事件
1. 引自---http://blog.sina.com.cn/s/blog_6e80f1390100pro4.html 信号和事件的区别就在与,事件比信号更加底层,而且如果一个信号对应多个槽的话,信 ...
- 4.FPGA芯片管脚解释
用户I/O:不用解释了. 配置管脚: MSEL[1:0] 用于选择配置模式,比如AS.PS等. DATA0 FPGA串行数据输入,连接到配置器件的串行数据输出管脚. DCLK FPGA串行时钟输出 ...
- homework-05 大家一起玩游戏~
046 195 1.接口设计 客户端 用户登录后,启动一个线程来进行游戏,等待服务器信息及发送新数据 服务器 开始时,主程序一直等待用户登录,有新用户登录就开一个线程去为其服务 等到用户都登录完成 ...