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” 键, 即可生成如下结构:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body> </body>
</html>
Emmet 会自动把 doctype 给你补全了,怎么样,这样的功能会不会让你动心?简单总结一下常用的 HTML 结构指令:
- html:5 或者 ! 生成 HTML5 结构
- html:xt 生成 HTML4 过渡型
- html:4s 生成 HTML4 严格型
3.任意一个 html 标签输入都会生成完整的闭合标签
例如输入 p 按 tab 则 生成:<p></p>
4.生成带有 id 、class 的 HTML 标签
例如输入 div#header.section 则生成
<div id="header" class="section"></div>
5.生成后代:>
例如输入p>span 则生成
<p><span></span></p>
6.生成兄弟标签:+
例如输入p+div 则生成
<p></p><div></div>
7.生成上级标签: ^
例如输入ul>li>a^div 则生成
<ul>
<li><a href=""></a></li>
<div></div>
</ul>
也可以使用多个 ^,例如输入ul>li>a^^div 则生成
<ul>
<li><a href=""></a></li>
</ul>
<div></div>
8.重复生成多个标签 *
例如输入ul>li*5 则生成
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
9.生成分组的标签: ()
例如输入ul>(li>a)*5 则生成
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
注意和ul>li>a*5 生成是不一样的
<ul>
<li>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</li>
</ul>
10.生成自定义属性:[]
例如输入img[http://www.cnblogs.com/images/logo_small.gif][alt=www.cnblogs.com] 则生成
<img src="http://www.cnblogs.com/images/logo_small.gif" alt="www.cnblogs.com" />
11.生成递增的属性标签等: $
例如输入ul>li.item$*5 则生成
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
12.生成多位递增的呢:$$$
例如输入ul>li.item$$$*5 则生成
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
想生成几位输入几个$
13.要生成递减的呢:@-
例如输入ul>li.item$@-*5 则生成
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
14.想要从某个特定的顺序开始呢:@N
例如输入ul>li.item$@10*5 则生成
<ul>
<li class="item10"></li>
<li class="item11"></li>
<li class="item12"></li>
<li class="item13"></li>
<li class="item14"></li>
</ul>
15.逆序生成到某个数:@-
例如输入ul>li.item$@-10*5 则生成
<ul>
<li class="item14"></li>
<li class="item13"></li>
<li class="item12"></li>
<li class="item11"></li>
<li class="item10"></li>
</ul>
16.生成文本内容:{}
例如输入p{我是文字内容} 则生成
<p>我是文字内容</p>
17.缺省元素:
声明一个带class的div 可以不用输入div;.header+.footer 则生成:
<div class="header"></div>
<div class="footer"></div>
Emmet 还会根据父标签进行判定例如输入ul>.item*3 则生成:
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
下面是所有的隐式标签名称:
- li:用于 ul 和 ol 中
- tr:用于 table、tbody、thead 和 tfoot 中
- td:用于 tr 中
- option:用于 select 和 optgroup 中
HTML/CSS 速写神器 Emmet语法的更多相关文章
- 前端学习笔记之HTML/CSS 速写神器 Emmet
HTML/CSS 速写神器:Emmet 在前端开发的过程中,一个最繁琐的工作就是写 HTML.CSS 代码.数量繁多的标签.属性.尖括号.标签闭合等,让前端们甚是苦恼.于是,我向大家推荐 Emmet, ...
- 转载:HTML/CSS 速写神器:Emmet
转载在http://bubkoo.com/2014/01/04/emmet-a-toolkit-for-improving-html-css-workflow/ 在前端开发的过程中,一个最繁琐的工作就 ...
- Emmet语法规则
HTML速写之Emmet语法规则 Emmet-写HTML/CSS快到飞起 在前端开发的过程中,最费时间的工作就是写 HTML.CSS 代码.一堆的标签.属性.括号等,头疼.这里推荐一个Emmet语法规 ...
- Emmet语法预览
Emmet 是一个能提高前端开发效率的编辑器插件,支持 Sublime,Atom,TextMate,Nodepad++ 等主流编辑器.Emmet 定义了一些缩写,当我们输入缩写代码后,按展开键(默认是 ...
- Emmet语法大全手册
这是基于官方手册整理制作的,因为那个手册网页打开很慢,所以就整理在这里了.以备不时之需. Syntax Child: > nav>ul>li <nav> <ul ...
- Emmet 语法探析
Emmet 语法探析 Emmet(Zen Coding)是一个能大幅度提高前端开发效率的一个工具. 大多数编辑器都支持Snippet,即存储和重用一些代码块.但是前提是:你必须先定义 这些代码块. E ...
- 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语法操作说明
自从安装了IE8.0正式版本!木头 就对基本的几个 CSS HACK的做一下归纳!希望对网页前端布局DIV+CSS的实施者有所帮助! 本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象 ...
- atom中vue高亮支持emmet语法
vue高亮插件: language-vue 支持emmet语法: 文件>用户键盘映射>keymap.cson添加: 'atom-text-editor[data-grammar~=&quo ...
- emmet语法列表
emmet语法 来源:https://docs.emmet.io/cheat-sheet/ Child: > nav>ul>li <nav> <ul> &l ...
随机推荐
- 痞子衡嵌入式:PCM编码与Waveform音频文件(.wav)格式详解
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是PCM编码及Waveform音频文件格式. 嵌入式里有时候也会和音频打交道,比如最近特别火的智能音箱产品,离不开前端的音频信号采集.降噪 ...
- 【Angular专题】 (3)装饰器decorator,一块语法糖
目录 一. Decorator装饰器 二. Typescript中的装饰器 2.1 类装饰器 2.2 方法装饰器 2.3 访问器装饰器 2.4 属性装饰器 2.5 参数装饰器 三. 用ES5代码模拟装 ...
- C#/VB.NET 给Word文档添加/撤销书签
在现代办公环境中,阅读或者编辑较长篇幅的Word文档时,想要在文档中某一处或者几处留下标记,方便日后查找.修改时,需要在相对应的文档位置插入书签.那对于开发者而言,在C#或者VB.NET语言环境中,如 ...
- 使用String. localeCompare比较字符串
javascript提供stringA.localeCompare(stringB)方法,来判断一个字符串stringB是否排在stringA的前面. 返回值: 如果引用字符存在于比较字符之前则 ...
- 【面向对象设计原则】之单一职责原则(SRP)
单一职责原则是面向对象原则五大原则中最简单,也是最重要的一个原则, 他的字面定义如下: 单一职责原则(Single Responsibility Principle, SRP): 一个类只负责一个功能 ...
- 二、IPC机制
1.Android IPC简介 IPC是Inter-Process Communication的缩写,含义为进程间通信或者跨进程通信,是指两个进程之间进行数据交换的过程. ANR:Applicatio ...
- android Q build 变化
一 概述 android Q build变化整体上越来越严格,语法上之前能够使用的Q上将不能使用. 二 主要变化 2.1 'USER' 弃用 ‘USER’后面的值会被设置成‘nobody',andr ...
- mysql使用索引的注意事项
使用索引的注意事项 使用索引时,有以下一些技巧和注意事项: 1.索引不会包含有NULL值的列 只要列中包含有NULL值都将不会被包含在索引中,复合索引中只要有一列含有NULL值,那么这一列对于此复合索 ...
- c/c++ 继承与多态 由子类向父类的转换规则
问题1:子类B可以有3种方式(public, protected, private)继承父类A,用哪种方式继承,用户代码才能把子类B的对象转换成父类A的对象呢? 只用当子类B以public方式继承父类 ...
- LeetCode算法题-Diameter of Binary Tree(Java实现)
这是悦乐书的第257次更新,第270篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第124题(顺位题号是543).给定二叉树,您需要计算树的直径长度. 二叉树的直径是树中 ...