Emmet使用详解

其他 2019-09-25 22:54:32 阅读次数: 0

一、Emmet的安装与介绍（HTML/CSS代码自动补全）

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具，能够实现 HTML、 CSS 的快速编写。

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
< nav >
     < ul >
         < li ></ li >
     </ ul >
</ nav >

2，兄弟：+

缩写： div+p+bq
1
2
3
< div ></ div >
< p ></ p >
< blockquote ></ blockquote >

3，上级：^

（1）缩写： div+div>p>span+em^bq
1
2
3
4
5
< div ></ div >
< div >
     < p >< span ></ span >< em ></ em ></ p >
     < blockquote ></ blockquote >
</ div >

（2）缩写： div+div>p>span+em^^bq
1
2
3
4
5
< div ></ div >
< div >
     < p >< span ></ span >< em ></ em ></ p >
</ div >
< blockquote ></ blockquote >

4，分组：()

（1）缩写： div>(header>ul>li*2>a)+footer>p
1
2
3
4
5
6
7
8
9
10
11
< div >
     < header >
         < ul >
             < li >< a href = "" ></ a ></ li >
             < li >< a href = "" ></ a ></ li >
         </ ul >
     </ header >
     < footer >
         < p ></ p >
     </ footer >
</ div >

（2）缩写： (div>dl>(dt+dd)*3)+footer>p
1
2
3
4
5
6
7
8
9
10
11
12
13
< div >
     < dl >
         < dt ></ dt >
         < dd ></ dd >
         < dt ></ dt >
         < dd ></ dd >
         < dt ></ dt >
         < dd ></ dd >
     </ dl >
</ div >
< footer >
     < p ></ p >
</ footer >

5，乘法：*

缩写： ul>li*5
1
2
3
4
5
6
7
< ul >
     < li ></ li >
     < li ></ li >
     < li ></ li >
     < li ></ li >
     < li ></ li >
</ ul >

6，自增符号：$

（1）缩写： ul>li.item$*5
1
2
3
4
5
6
7
< ul >
     < li class = "item1" ></ li >
     < li class = "item2" ></ li >
     < li class = "item3" ></ li >
     < li class = "item4" ></ li >
     < li class = "item5" ></ li >
</ ul >

（2）缩写： h$[title=item$]{Header $}*3
1
2
3
< h1 title = "item1" >Header 1</ h1 >
< h2 title = "item2" >Header 2</ h2 >
< h3 title = "item3" >Header 3</ h3 >

（3）缩写： ul>li.item$$$*5
1
2
3
4
5
6
7
< ul >
     < li class = "item001" ></ li >
     < li class = "item002" ></ li >
     < li class = "item003" ></ li >
     < li class = "item004" ></ li >
     < li class = "item005" ></ li >
</ ul >

（4）缩写： ul>li.item$@-*5
1
2
3
4
5
6
7
< ul >
     < li class = "item5" ></ li >
     < li class = "item4" ></ li >
     < li class = "item3" ></ li >
     < li class = "item2" ></ li >
     < li class = "item1" ></ li >
</ ul >

（5）缩写： ul>li.item$@3*5
1
2
3
4
5
6
7
< ul >
     < li class = "item3" ></ li >
     < li class = "item4" ></ li >
     < li class = "item5" ></ li >
     < li class = "item6" ></ li >
     < li class = "item7" ></ li >
</ ul >


7，ID和类属性

（1）缩写： #header
1
< div id = "header" ></ div >

（2）缩写： .title
1
< div class = "title" ></ div >

（3）缩写： form#search.wide
1
< form id = "search" class = "wide" ></ form >

（4）缩写： p.class1.class2.class3
1
< p class = "class1 class2 class3" ></ p >

8，自定义属性

（1）缩写： p[title="Hello world"]
1
< p title = "Hello world" ></ p >

（2）缩写： td[rowspan=2 colspan=3 title]
1
< td rowspan = "2" colspan = "3" title = "" ></ td >

（3）缩写： [a='value1' b="value2"]
1
< div a = "value1" b = "value2" ></ div >


9，文本：{}

（1）缩写： a{Click me}
1
< a href = "" >Click me</ a >

（2）缩写： p>{Click }+a{here}+{ to continue}
1
< p >Click < a href = "" >here</ a > to continue</ p >

10，隐式标签

（1）缩写： .class
1
< div class = "class" ></ div >

（2）缩写： em>.class
1
< em >< span class = "class" ></ span ></ em >
（3）缩写： ul>.class
1
2
3
< ul >
     < li class = "class" ></ li >
</ ul >

（4）缩写： table>.row>.col
1
2
3
4
5
< table >
     < tr class = "row" >
         < td class = "col" ></ td >
     </ tr >
</ table >

三、HTML标签语法

1，所有未知的缩写都会转换成标签

缩写： hangge
1
< hangge ></ hangge >

2，基本html标签

（1）缩写： !
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
< html lang = "en" >
< head >
   < meta charset = "UTF-8" >
   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
   < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >
   < title >Document</ title >
</ head >
< body >
   
</ body >
</ html >

（2）缩写： a
1
< a href = "" ></ a >

（3）缩写： a:link
1
< a href = "http://" ></ a >

（4）缩写： a:mail
1
< a href = "mailto:" ></ a >

（5）缩写： abbr
1
< abbr title = "" ></ abbr >

（6）缩写： acronym
1
< acronym title = "" ></ acronym >

（7）缩写： base
1
< base href = "" />

（8）缩写： basefont
1
< basefont />

（9）缩写： br
1
< br />

（10）缩写： frame
1
< frame />

（11）缩写： hr
1
< hr />

（12）缩写： bdo
1
< bdo dir = "" ></ bdo >

（13）缩写： bdo:r
1
< bdo dir = "rtl" ></ bdo >

（14）缩写： bdo:l
1
< bdo dir = "ltr" ></ bdo >

（15）缩写： col
1
< col />

（16）缩写： link
1
< link rel = "stylesheet" href = "" />

（17）缩写： link:css
1
< link rel = "stylesheet" href = "style.css" />

（18）缩写： link:print
1
< link rel = "stylesheet" href = "print.css" media = "print" />

（19）缩写： link:favicon
1
< link rel = "shortcut icon" type = "image/x-icon" href = "favicon.ico" />

（20）缩写： link:touch
1
< link rel = "apple-touch-icon" href = "favicon.png" />

（21）缩写： link:rss
1
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "rss.xml" />

（22）缩写： link:atom
1
< link rel = "alternate" type = "application/atom+xml" title = "Atom" href = "atom.xml" />

（23）缩写： meta
1
< meta />

（24）缩写： meta:utf
1
< meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" />

（25）缩写： meta:win
1
< meta http-equiv = "Content-Type" content = "text/html;charset=windows-1251" />

（26）缩写： meta:vp
1
< meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

（27）缩写： meta:compat
1
< meta http-equiv = "X-UA-Compatible" content = "IE=7" />

（28）缩写： style
1
< style ></ style >

（29）缩写： script
1
< script ></ script >

（30）缩写： script:src
1
< script src = "" ></ script >

（31）缩写： img
1
< img src = "" alt = "" />

（32）缩写： iframe
1
< iframe src = "" frameborder = "0" ></ iframe >

（33）缩写： embed
1
< embed src = "" type = "" />

（34）缩写： object
1
< object data = "" type = "" ></ object >

（35）缩写： param
1
< param name = "" value = "" />

（36）缩写： map
1
< map name = "" ></ map >

（37）缩写： area
1
< area shape = "" coords = "" href = "" alt = "" />

（38）缩写： area:d
1
< area shape = "default" href = "" alt = "" />

（39）缩写： area:c
1
< area shape = "circle" coords = "" href = "" alt = "" />

（40）缩写： area:r
1
< area shape = "rect" coords = "" href = "" alt = "" />

（41）缩写： area:p
1
< area shape = "poly" coords = "" href = "" alt = "" />

（42）缩写： form
1
< form action = "" ></ form >

（43）缩写： form:get
1
< form action = "" method = "get" ></ form >

（44）缩写： form:post
1
< form action = "" method = "post" ></ form >

（45）缩写： label
1
< label for = "" ></ label >

（46）缩写： input
1
< input type = "text" />

（47）缩写： inp
1
< input type = "text" name = "" id = "" />

（48）缩写： input:hidden 
别名： input[type=hidden name]
1
< input type = "hidden" name = "" />

（49）缩写： input:h 
别名： input:hidden
1
< input type = "hidden" name = "" />

（50）缩写： input:text, input:t 
别名： inp
1
< input type = "text" name = "" id = "" />

（50）缩写： input:search 
别名： inp[type=search]
1
< input type = "search" name = "" id = "" />

（51）缩写： input:email 
别名： inp[type=email]
1
< input type = "email" name = "" id = "" />

（52）缩写： input:url 
别名： inp[type=url]
1
< input type = "url" name = "" id = "" />

（53）缩写： input:password 
别名： inp[type=password]
1
< input type = "password" name = "" id = "" />

（54）缩写： input:p 
别名： input:password
1
< input type = "password" name = "" id = "" />

（55）缩写： input:datetime 
别名： inp[type=datetime]
1
< input type = "datetime" name = "" id = "" />

（56）缩写： input:date 
别名： inp[type=date]
1
< input type = "date" name = "" id = "" />

（57）缩写： input:datetime-local 
别名： inp[type=datetime-local]
1
< input type = "datetime-local" name = "" id = "" />

（58）缩写： input:month 
别名： inp[type=month]
1
< input type = "month" name = "" id = "" />

（59）缩写： input:week 
别名： inp[type=week]
1
< input type = "week" name = "" id = "" />

（60）缩写： input:time 
别名： inp[type=time]
1
< input type = "time" name = "" id = "" />

（61）缩写： input:number 
别名： inp[type=number]
1
< input type = "number" name = "" id = "" />

（62）缩写： input:color 
别名： inp[type=color]
1
< input type = "color" name = "" id = "" />

（63）缩写： input:checkbox 
别名： inp[type=checkbox]
1
< input type = "checkbox" name = "" id = "" />

（64）缩写： input:c 
别名： input:checkbox
1
< input type = "checkbox" name = "" id = "" />

（65）缩写： input:radio 
别名： inp[type=radio]
1
< input type = "radio" name = "" id = "" />

（66）缩写： input:r 
别名： input:radio
1
< input type = "radio" name = "" id = "" />

（67）缩写： input:range 
别名： inp[type=range]
1
< input type = "range" name = "" id = "" />

（68）缩写： input:file 
别名： inp[type=file]
1
< input type = "file" name = "" id = "" />

（69）缩写： input:f 
别名： input:file
1
< input type = "file" name = "" id = "" />

（70）缩写： input:submit
1
< input type = "submit" value = "" />

（71）缩写： input:s 
别名： input:submit
1
< input type = "submit" value = "" />

（72）缩写： input:image
1
< input type = "image" src = "" alt = "" />

（73）缩写： input:i 
别名： input:image
1
< input type = "image" src = "" alt = "" />

（74）缩写： input:button
1
< input type = "button" value = "" />

（75）缩写： input:b 
别名： input:button
1
< input type = "button" value = "" />

（76）缩写： isindex
1
< isindex />

（77）缩写： input:reset 
别名： input:button[type=reset]
1
< input type = "reset" value = "" />

（78）缩写： select
1
< select name = "" id = "" ></ select >

（79）缩写： option
1
< option value = "" ></ option >

（80）缩写： textarea
1
< textarea name = "" id = "" cols = "30" rows = "10" ></ textarea >

（81）缩写： menu:context 
别名： menu[type=context]>
1
< menu type = "context" ></ menu >

（82）缩写： menu:c 
别名： menu:context
1
< menu type = "context" ></ menu >

（83）缩写： menu:toolbar 
别名： menu[type=toolbar]>
1
< menu type = "toolbar" ></ menu >

（84）缩写： menu:t 
别名： menu:toolbar
1
< menu type = "toolbar" ></ menu >

（85）缩写： video
1
< video src = "" ></ video >

（86）缩写： audio
1
< audio src = "" ></ audio >

（87）缩写： html:xml
1
< html xmlns = "http://www.w3.org/1999/xhtml" ></ html >

（88）缩写： keygen
1
< keygen />

（89）缩写： command
1
< command />

（90）缩写： bq 
别名： blockquote
1
< blockquote ></ blockquote >

（91）缩写： acr 
别名： acronym
1
< acronym title = "" ></ acronym >

（92）缩写： fig 
别名： figure
1
< figure ></ figure >

（93）缩写： figc 
别名： figcaption
1
< figcaption ></ figcaption >

（94）缩写： ifr 
别名： iframe
1
< iframe src = "" frameborder = "0" ></ iframe >

（95）缩写： emb 
别名： embed
1
< embed src = "" type = "" />

（96）缩写： obj 
别名： object
1
< object data = "" type = "" ></ object >

（97）缩写： src 
别名： source
1
< source ></ source >

（98）缩写： cap 
别名： caption
1
< caption ></ caption >

（99）缩写： colg 
别名： colgroup
1
< colgroup ></ colgroup >

（100）缩写： fst, fset 
别名： fieldset
1
< fieldset ></ fieldset >

（101）缩写： btn 
别名： button
1
< button ></ button >

（102）缩写： btn:b 
别名：button[type=button]
1
< button type = "button" ></ button >

（103）缩写： btn:r 
别名：button[type=reset]
1
< button type = "reset" ></ button >

（104）缩写： btn:s 
别名：button[type=submit]
1
< button type = "submit" ></ button >

猜你喜欢

转载自www.cnblogs.com/bubu99/p/11588093.html
今日推荐
周排行
深度学习------Lingvo框架下的加速通道GPipe
webjars管理静态资源
C专家编程_2.2
mysql 源码安装
json文件操作
123231432
注解的实现
Spring MVC 控制器
《人月神话》读后感二
C#使用HttpWebRequest和HttpWebResponse上传文件示例
每日归档
更多
2024-09-08(0)
2024-09-07(0)
2024-09-06(0)
2024-09-05(0)
2024-09-04(0)
2024-09-03(0)
2024-09-02(0)
2024-09-01(0)
2024-08-31(0)
2024-08-30(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022