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 ...
随机推荐
- 超级账本fabric原理之gossip详解
Goosip协议 去中心化.容错和最终一致性的算法 信息达到同步的最优时间:log(N). 功能: 节点发现 数据广播 gossip中有三种基本的操作: push - A节点将数据(key,value ...
- HTTP 常见的状态码
- js三部曲---预编译
函数内:1,创建AO对象//Activation Object 2,找函数内形参和变量声明,将其作为AO对象的属性名,值为undefined. 3,实参赋到AO对象 形参名里 4,在函数体里找函数声明 ...
- VSTO中Word转换Range为Image的方法
VSTO中Word转换Range为Image的方法 前言 VSTO是一套用于创建自定义Office应用程序的Visual Studio工具包,通过Interop提供的增强Office对象,可以对Wor ...
- 微信公众平台设置URL和Token接收接口事件推送
最近做对接微信闪开发票-微信发票名片,里面有个接收用户提交抬头接口是微信推送事件到公众号后台,该事件将发送至开发者填写的URL(登录公众平台进入[开发者中心设置]). 开发者可通过事件推送完成数据统计 ...
- [python爬虫]Requests-BeautifulSoup-Re库方案--Requests库介绍
[根据北京理工大学嵩天老师“Python网络爬虫与信息提取”慕课课程编写 文章中部分图片来自老师PPT 慕课链接:https://www.icourse163.org/learn/BIT-10018 ...
- LayoutInflater.inflate()方法两个参数和三个参数
转载请标明出处:https://www.cnblogs.com/tangZH/p/7074853.html 很多人都用过LayoutInflater(布局填充器) 对于我来说通常使用下面两种:Lay ...
- RecycleView设置顶部分割线(记录一个坑)
大家都知道,想给RecycleView设置分割线可以重写RecyclerView.ItemDecoration 项目过程中,遇到一个需求:RecycleView顶部有一条灰色的间隔,我想到了给Recy ...
- ext图片预览功能实现,前端代码
效果图: extjs代码: // 模型 Ext.define('ParkingAttachment', {extend: "Ext.data.Model", idProperty: ...
- Git命令备忘
最近在用Git,查了点相关资料,逻辑依然不太明了,先整理一部分备忘,以后补充 一.本地Git与Github/码云的关联 1. 设置本地用户名,邮箱 git config --global user.n ...