emmet | 易学教程

【翻译】Emmet (ZenCoding) 缩写语法

阅读更多关于【翻译】Emmet (ZenCoding) 缩写语法

缩写语法 Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性。元素可以使用元素名（如 div 或者 p）来生成 HTML 标签。Emmet 没有预定义的有效元素名的集合，可以把任何单词当作标签来生成和使用： div → <div></div> , foo → <foo></foo> 等。嵌套运算符嵌套运算符用于以缩写的方式安排元素在生成文档树中的位置：将其放在内部或成为相邻的元素。子: > 可以使用 > 运算符指定嵌套元素在另一个元素内部： div>ul>li 生成的结果为： <div> <ul> <li></li> </ul> </div> 兄弟: + 使用 + 运算符将相邻的其它元素处理为同级： div+p+bq 生成的结果为： <div></div> <p></p> <blockquote></blockquote> 上升: ^ 使用 > 运算符将会降低所有后续所有元素在生成树中的级别，每一级的兄弟元素也被解析成相同深度的元素： div+div>p>span+em 将生成： <div></div> <div> <p><span></span><em></em></p> </div> 使用 ^ 运算符，能够提升元素在生成树中的一个级别，并同时影响其后的元素： div+div>p>span+em^bq 将生成： <div></div>

Emmet 语法

阅读更多关于 Emmet 语法

Emmet 是高效、快速编写 HTML 和 CSS 代码的一种插件，如果还不了解，请戳[Emmet — the essential toolkit for web-developers](http://docs.emmet.io/),再根据你使用的编辑器（sublime 或 vim 等）下载对应的 Emmet 插件，让你的代码快步如飞吧。下面我记录下常用的 Emmet 语法和快捷键。代码区里的均指在编辑器里输入的字符，然后按 “Tab” 键便会生成代码。例如输入`!` 然后按 “tab” 会得到如下所示的HTML文档初始机构，再也不用一个字母一个字母敲了，是不是很简单呢？ ## HTML 编写 1. 生成HTML文档初始机构 - `html:5` 或者 `!` 生成 HTML5 结构 1 2 3 4 5 6 7 8 9 <!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title >Document</ title > </ head > < body > </ body > </ html > - `html:xt` 生成 HTML4 过渡型 1 2 3 4 5 6 7 8 9 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

实用的sublime插件集合 – sublime推荐必备插件

阅读更多关于实用的sublime插件集合 – sublime推荐必备插件

Package Control 功能：安装包管理简介：sublime插件控制台，提供添加、删除、禁用、查找插件等功能使用： https://sublime.wbond.net/installation 安装方法： CTRL+` ，出现控制台粘贴以下代码至控制台 ST2： 1 import urllib2 , os ; pf = 'Package Control.sublime-package' ; ipp = sublime . installed_packages_path ( ) ; os . makedirs ( ipp ) if not os . path . exists ( ipp ) else None ; urllib2 . install_opener ( urllib2 . build_opener ( urllib2 . ProxyHandler ( ) ) ) ; open ( os . path . join ( ipp , pf ) , 'wb' ) . write ( urllib2 . urlopen ( 'http://sublime.wbond.net/' + pf . replace ( ' ' , '%20' ) ) . read ( ) ) ; print ( 'Please restart Sublime Text to

Sublime Text 3常用插件—Emmet

阅读更多关于 Sublime Text 3常用插件—Emmet

原文链接： http://www.cnblogs.com/easy-blue/p/6617852.html 摘要：安装请看上一篇 Sublime Text—安装，和 sublime自带快捷键一起用，写html简直快的飞起。下面整理的是常用的，完整的可看 emmet官方文档。生成标签 1.快速生成文档结构 ! 或 html:5 ，快速生成 HTML5 结构(都需要再按tab键) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> html:xt 生成 HTML4 过渡型 html:4s 生成 HTML4 严格型 2.生成带 id 的元素标签 # ID名，如： div#header <div id="header"></div> 3.生成带 class 的元素标签 . 类名，如： div.title <div class="title"></div> 4.生成后代元素：> 如： nav>ul>li <nav> <ul> <li></li> </ul> </nav> 5.生成兄弟元素：+ 如： div+p+div <div></div> <p></p> <div></div> 6

使用VsCode自带的Emmet语法

阅读更多关于使用VsCode自带的Emmet语法

新建html文件，保存之后，输入“ ！ ”，按Tap(或Enter）键，自动生成HTML结构标签只要直接输入标签名（不要输入<>），按Tap(或Enter）键自动生成完整的标签输入标签和id:标签名#id名输入“ span#sp ",Tap(或Enter）键， => <span id="sp"></span> 输入标签和class值:标签名.class 名输入" span.Sp ",Tap(或Enter）键 => <span class="Sp"></span> 【其中】：元素绑定多个类名:标签名.class名1.class名2。。。输入" span.Sp1.Sp2 ",Tap键（或Enter）键 => <span class="Sp1 Sp2"></span> 输入标签和标签中的值:标签名｛标签内容｝输入“ span{test} ",Tap(或Enter）键， => <span>test</span> 同时输入多个同级标签:标签名+标签名+标签名。。。输入" li+li+li " , Tap(或Enter）键， => <li></li> <li></li> <li></li> 同时输入父级标签和子标签:父级标签名>子级标签名。。。输入“ table>ul>li+li ",Tap(或Enter）键， => <table> <ul> <li></li> <li><

Gvim+Emmet.vim 那些事。

阅读更多关于 Gvim+Emmet.vim 那些事。

转自:http://www.jianshu.com/p/67fa1e2114c5 背景 HTML和CSS的写法相对固定，而且重复的工作特别多，特别是尖括号实在是很烦。使用Emmet至少能帮你节省一半的前期开发工作量，所以花点时间学习Emmet是很值得的。Emmet不是编程语言，而只是编辑器的插件，也可以自定义规则。安装 Emmet支持多种编辑器，参见列表。由于我使用vim，这里只介绍vim的插件。下载地址： https://github.com/mattn/emmet-vim 安装方法：上面的页面介绍的很清楚配置Emmet 只在html和css文件中起作用 let g:user_emmet_install_global = 0 autocmd FileType html,css EmmetInstal 修改Emmet的触发键 let g:user_emmet_leader_key='<C-Z>' 教程： http://docs.emmet.io/ http://docs.emmet.io/cheat-sheet/ https://github.com/mattn/emmet-vim http://www.zfanw.com/blog/zencoding-vim-tutorial-chinese.html 教程里已经介绍的很清楚，我主要罗列常用写法。用法快捷键注：

HTML/CSS 速写神器 Emmet语法

阅读更多关于 HTML/CSS 速写神器 Emmet语法

Emmet 是高效、快速编写 HTML 和 CSS 代码的一种插件，如果还不了解，请戳 Emmet — the essential toolkit for web-developers ,再根据你使用的编辑器（Sublime 或 vim 等）下载对应的 Emmet 插件,Visual Code直接支持Emmet语法。 1.准备工作编辑器使用Visual Code,下载地址访问 https://code.visualstudio.com/ ，新建一个HTML文件，并保存。 2.生成 HTML 文档初始结构 HTML 文档的初始结构，就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个 “!” 就可以生成一个 HTML5 的标准文档初始结构，你没有看错，输入一个感叹号（当然是英文符号），然后按 “Tab” 键便会生成代码，就会发现生成了下面的结构： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> 这就是一个 HTML5 的标准结构，也是默认的 HTML 结构。如果你想生成 HTML4 的过渡型结构，那么输入指令 html:xt,然后按 “Tab” 键,

Emmet插件详解

阅读更多关于 Emmet插件详解

http://www.ithao123.cn/content-10512551.html （webstorm的css编写插件）Emmet：HTML/CSS代码快速编写神器 [摘要：Emmet的前身是默默无闻的Zen coding，若是您处置Web前端开辟的话，对该插件肯定没有会目生。它应用仿CSS挑选器的语法去天生代码，大大进步了HTML/CSS代码编写的速率，比方上面的演] Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示： html:5 或!：用于HTML5文档类型 html:xt：用于XHTML过渡文档类型 html:4s：用于HTML4严格文档类型 2. 轻松添加类、id、文本和属性连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo： Html代码 < p class= "bar" id= "foo" > </ p > 下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#]，就可以自动生成如下代码： Html代码 < h1 >foo </ h1 > < a href= "#" > </ a > 4. 分组你可以通过嵌套和括号来快速生成一些代码块，比如输入(.foo>h1

Emmet使用方法

阅读更多关于 Emmet使用方法

本文摘自： http://www.iteye.com/news/27580 Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示： Zen coding下的编码演示去年年底，该插件已经改名为Emmet。但Emmet不只改名，还带来了一些新特性。本文就来直观地演示给你。一、快速编写HTML代码 1. 初始化 HTML文档需要包含一些固定的标签，比如<html>、<head>、<body>等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键： html:5 或!：用于HTML5文档类型 html:xt：用于XHTML过渡文档类型 html:4s：用于HTML4严格文档类型 2. 轻松添加类、id、文本和属性连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo：连续输入类和id，比如p.bar#foo，会自动生成： Html代码 < p class= "bar" id= "foo" > </ p > 下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#]，就可以自动生成如下代码： Html代码 < h1 >foo </ h1 > < a href

Sublime Text 3插件之Emmet：HTML/CSS代码快速编写神器

阅读更多关于 Sublime Text 3插件之Emmet：HTML/CSS代码快速编写神器

一、快速编写HTML代码 1. 初始化 HTML文档需要包含一些固定的标签，比如<html>、<head>、<body>等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键： html:5 或!：用于HTML5文档类型 html:xt：用于XHTML过渡文档类型 html:4s：用于HTML4严格文档类型 2. 轻松添加类、id、文本和属性连续输入元素名称和ID，Emmet会自动为你补全，比如p.bar#foo，会自动生成： <p class="bar" id="foo"></p> 下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#]，就可以自动生成如下代码： <h1>foo</h1> <a href="#"></a> 3. 嵌套现在你只需要1行代码就可以实现标签的嵌套。 >：子元素符号，表示嵌套的元素 +：同级标签符号 ^：可以使该符号前的标签提升一行 4. 分组你可以通过嵌套和括号来快速生成一些代码块，比如输入(.foo>h1)+(.bar>h2)，会自动生成如下代码： <div class="foo"> <h1></h1> </div> <div class="bar"> <h2></h2> </div> 5. 隐式标签声明一个带类的标签，只需输入div.item，就会生成<div

订阅 emmet