atom自动补全html代码,Atom - Emmet插件的使用详解(HTML/CSS代码自动补全)
一、Emmet的安装与介绍
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具,能够实现 HTML、CSS 的快速编写。
官网地址:http://emmet.io/
官方文档:http://docs.emmet.io/cheat-sheet/
Atom的emmet介绍页面:https://atom.io/packages/emmet
1,使用Emmet的好处
通常大多数的文本编辑器都会允许我们存储和重用一些代码块,我们称之为“片段”。虽然片段能很好地推动我们的生产力,但大多数的实现都有这样一个缺点:我们必须先定义代码片段,并且不能再运行时进行拓展。
而 Emmet 把片段这个概念提高到了一个新的层次:我们可以设置 CSS 形式的能够动态被解析的表达式,然后根据输入的缩写来得到相应的内容。Emmet 很成熟的并且非常适用于编写 HTML/XML 和 CSS 代码的前端开发人员,但也可以用于编程语言。
2,安装Emmet
Emmet 为大部分流行的编辑器都提供了安装插件,本文演示如何在 Atom 中使用 Emmet 插件。
(1)点击 Atom 的“Preferences”菜单选项(Windows 下是“Settings”菜单选项)
(2)进入到 Install 页面。
(3)搜索“Emmet”包,点击 Install 按钮即可安装。
3,简单的使用样例
(1)我们在编辑器中输入如下代码:
1
ul>li*6
(2)接着按下 tab 键,之前的缩写代码就会自动扩展为完整的 html 代码片断。
二、基本语法
1,后代:>
缩写:nav>ul>li
1
2
3
4
5
2,兄弟:+
缩写:div+p+bq
1
2
3
3,上级:^
(1)缩写:div+div>p>span+em^bq
1
2
3
4
5
(2)缩写:div+div>p>span+em^^bq
1
2
3
4
5
4,分组:()
(1)缩写:div>(header>ul>li*2>a)+footer>p
1
2
3
4
5
6
7
8
9
10
11
(2)缩写:(div>dl>(dt+dd)*3)+footer>p
1
2
3
4
5
6
7
8
9
10
11
12
13
5,乘法:*
缩写:ul>li*5
1
2
3
4
5
6
7
6,自增符号:$
(1)缩写:ul>li.item$*5
1
2
3
4
5
6
7
(2)缩写:h$[title=item$]{Header $}*3
1
2
3
Header 1
Header 2
Header 3
(3)缩写:ul>li.item$$$*5
1
2
3
4
5
6
7
(4)缩写:ul>li.item$@-*5
1
2
3
4
5
6
7
(5)缩写:ul>li.item$@3*5
1
2
3
4
5
6
7
7,ID和类属性
(1)缩写:#header
1
(2)缩写:.title
1
(3)缩写:form#search.wide
1
(4)缩写:p.class1.class2.class3
1
8,自定义属性
(1)缩写:p[title="Hello world"]
1
(2)缩写:td[rowspan=2 colspan=3 title]
1
(3)缩写:[a='value1' b="value2"]
1
9,文本:{}
(1)缩写:a{Click me}
1
Click me
(2)缩写:p>{Click }+a{here}+{ to continue}
1
Click here to continue
10,隐式标签
(1)缩写:.class
1
(2)缩写:em>.class
1
(3)缩写:ul>.class
1
2
3
(4)缩写:table>.row>.col
1
2
3
4
5
三、HTML标签语法
1,所有未知的缩写都会转换成标签
缩写:hangge
1
2,基本html标签
(1)缩写:!
1
2
3
4
5
6
7
8
9
10
11
12
Document
(2)缩写:a
1
(3)缩写:a:link
1
(4)缩写:a:mail
1
(5)缩写:abbr
1
(6)缩写:acronym
1
(7)缩写:base
1
(8)缩写:basefont
1
(9)缩写:br
1
(10)缩写:frame
1
(11)缩写:hr
1
(12)缩写:bdo
1
(13)缩写:bdo:r
1
(14)缩写:bdo:l
1
(15)缩写:col
1
(16)缩写:link
1
(17)缩写:link:css
1
(18)缩写:link:print
1
(19)缩写:link:favicon
1
(20)缩写:link:touch
1
(21)缩写:link:rss
1
(22)缩写:link:atom
1
(23)缩写:meta
1
(24)缩写:meta:utf
1
(25)缩写:meta:win
1
(26)缩写:meta:vp
1
(27)缩写:meta:compat
1
(28)缩写:style
1
(29)缩写:script
1
(30)缩写:script:src
1
(31)缩写:img
1
(32)缩写:iframe
1
(33)缩写:embed
1
(34)缩写:object
1
(35)缩写:param
1
(36)缩写:map
1
(37)缩写:area
1
(38)缩写:area:d
1
(39)缩写:area:c
1
(40)缩写:area:r
1
(41)缩写:area:p
1
(42)缩写:form
1
(43)缩写:form:get
1
(44)缩写:form:post
1
(45)缩写:label
1
(46)缩写:input
1
(47)缩写:inp
1
(48)缩写:input:hidden 别名:input[type=hidden name]
1
(49)缩写:input:h 别名:input:hidden
1
(50)缩写:input:text, input:t 别名:inp
1
(50)缩写:input:search 别名:inp[type=search]
1
(51)缩写:input:email 别名:inp[type=email]
1
(52)缩写:input:url 别名:inp[type=url]
1
(53)缩写:input:password 别名:inp[type=password]
1
(54)缩写:input:p 别名:input:password
1
(55)缩写:input:datetime 别名:inp[type=datetime]
1
(56)缩写:input:date 别名:inp[type=date]
1
(57)缩写:input:datetime-local 别名:inp[type=datetime-local]
1
(58)缩写:input:month 别名:inp[type=month]
1
(59)缩写:input:week 别名:inp[type=week]
1
(60)缩写:input:time 别名:inp[type=time]
1
(61)缩写:input:number 别名:inp[type=number]
1
(62)缩写:input:color 别名:inp[type=color]
1
(63)缩写:input:checkbox 别名:inp[type=checkbox]
1
(64)缩写:input:c 别名:input:checkbox
1
(65)缩写:input:radio 别名:inp[type=radio]
1
(66)缩写:input:r 别名:input:radio
1
(67)缩写:input:range 别名:inp[type=range]
1
(68)缩写:input:file 别名:inp[type=file]
1
(69)缩写:input:f 别名:input:file
1
(70)缩写:input:submit
1
(71)缩写:input:s 别名:input:submit
1
(72)缩写:input:image
1
(73)缩写:input:i 别名:input:image
1
(74)缩写:input:button
1
(75)缩写:input:b 别名:input:button
1
(76)缩写:isindex
1
(77)缩写:input:reset 别名:input:button[type=reset]
1
(78)缩写:select
1
(79)缩写:option
1
(80)缩写:textarea
1
(81)缩写:menu:context 别名:menu[type=context]>
1
(82)缩写:menu:c 别名:menu:context
1
(83)缩写:menu:toolbar 别名:menu[type=toolbar]>
1
(84)缩写:menu:t 别名:menu:toolbar
1
(85)缩写:video
1
(86)缩写:audio
1
(87)缩写:html:xml
1
(88)缩写:keygen
1
(89)缩写:command
1
(90)缩写:bq 别名:blockquote
1
(91)缩写:acr 别名:acronym
1
(92)缩写:fig 别名:figure
1
(93)缩写:figc 别名:figcaption
1
(94)缩写:ifr 别名:iframe
1
(95)缩写:emb 别名:embed
1
(96)缩写:obj 别名:object
1
(97)缩写:src 别名:source
1
(98)缩写:cap 别名:caption
1
(99)缩写:colg 别名:colgroup
1
(100)缩写:fst, fset 别名:fieldset
1
(101)缩写:btn 别名:button
1
(102)缩写:btn:b 别名:button[type=button]
1
(103)缩写:btn:r 别名:button[type=reset]
1
(104)缩写:btn:s 别名:button[type=submit]
1
四、CSS语法
更多的语法缩写(比如 CSS、XSL),可以查看官方的API文档:http://docs.emmet.io/cheat-sheet/
atom自动补全html代码,Atom - Emmet插件的使用详解(HTML/CSS代码自动补全)相关推荐
- 希尔排序基础java代码_java 算法之希尔排序详解及实现代码
摘要:这篇Java开发技术栏目下的"java 算法之希尔排序详解及实现代码",介绍的技术点是"希尔排序详解.实现代码.希尔排序.Java.实现.代码",希望对大 ...
- android message 代码,Android Handler移除Message详解及实例代码
Android Handler移除Message详解 问题: 1.removeMessage(what)函数是否只能移除对应what值的Message? 2.对于Delayed发送的Message,能 ...
- Java 初始化 代码块_Java中初始化块详解及实例代码
Java中初始化块详解 在Java中,有两种初始化块:静态初始化块和非静态初始化块. 静态初始化块:使用static定义,当类装载到系统时执行一次.若在静态初始化块中想初始化变量,那仅能初始化类变量, ...
- for根据ID去重_汽车ECU参数标定之配置Overlay RAM实现Qorivva MPC57xx系列MCU参数在线标定和代码重映射原理和方法详解...
内容提要 引言 1. MPC5744P的Overlay RAM工作原理介绍 2 MPC5744P的Flash Overlay配置详解 2.1 平台Flash标定区域描述字寄存器配置字0--PFLASH ...
- python随机数程序源码_Python 实现随机数详解及实例代码
Python3实现随机数 random是用于生成随机数的,我们可以利用它随机生成数字或者选择字符串. random.seed(x)改变随机数生成器的种子seed. 一般不必特别去设定seed,Pyth ...
- java super实例_java Super 用法详解及实例代码
java Super 用法详解及实例代码 发布于 2021-1-8| 复制链接 摘记: java Super 用法详解 1)有人写了个很好的初始化属性的构造函数,而你仅仅想要在其中添加另一些自己新建 ...
- Java 线程池详解及实例代码
转载自 Java 线程池详解及实例代码 这篇文章主要介绍了Java 线程池的相关资料,并符实例代码,帮助大家学习参考,需要的朋友可以参考下 线程池的技术背景 在面向对象编程中,创建和销毁对象是很费时 ...
- android Json解析详解(详细代码)
android Json解析详解(详细代码) JSON的定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了当 ...
- 深入原生冰山安全体系,详解华为云安全服务如何构筑全栈安全
摘要:如果把云安全比作"冰山",不仅要关注冰山上的"安全服务和特性",还要关注冰山下各种基础安全建设. 本文分享自华为云社区<深入原生冰山安全体系,详解华 ...
最新文章
- Leangoo Talk第一期——Scrum与OKR融合实践
- 面试必问的16个经典问题的回答思路
- GitLab安装后修改IP/域名
- 全球及中国梦幻体育软件和平台行业十四五规模展望及应用价值分析报告2021-2027年
- 采购订单收货后不能修改价格的增强
- 2012三年大专计算机试题医学,计算机原理2012年4月真题(02384)
- PowerDesigner反向工程 mysql
- java validate 框架_如何使用validator框架来validatebean
- 漫画微信小程序源码 全开源 商业版
- 高等数学复习之空间解析几何
- 利用Gazebo搭建赛道,控制小车完成比赛(大学生智能车大赛室外光电组赛道仿真模拟)
- Linux桌面版横评:九、Mandriva Linux 2007 Spring One
- ASP.NET 实现快递单的打印及套打
- 打印驱动的安装和卸载
- 《杀死一只知更鸟》读后感
- 台湾华夏堂古代玉器收藏家~件件珍贵难得一见
- 天才少年George Hotz在自家车库亲手打造了一台无人自驾驶汽车!
- 如何解决GitHub仓库README文件插入图片无法显示的问题
- 什么是数字化存在?数字化转型要先从数字化存在开始
- 嵌入式为什么要引入操作系统
热门文章
- Java EE 6与Spring Framework:技术决策过程
- java中月日年这种怎么转换成年月日_最“热乎”的Java社招面试经历分享(共40个面试题)...
- MySQL的存储引擎InnoDB,B+Tree数据结构索引的实现原理图(聚簇索引/聚集索引)
- MacOS 的软件包管理工具 HomeBrew 详解
- linux 丢包多少正常_Linux 问题故障定位,看看这篇
- python打包成exe_【Python基础】一篇文件教你py文件打包成exe
- html怎么填充颜色渐变,CSS实现不规则图形,填充渐变色
- 【OpenGL从入门到精通(一)】Windows搭建OpenGL的渲染环境,并初始化一个OPenGL窗口
- 【流媒体FLV封装协议】
- 初学者宝典:C语言入门基础知识大全(下)