软件系统

Emmet快速编写HTML代码

LensNews

Emmet快速编写HTML代码前面我们通过《超高速前端开发工具——Emmet》简单介绍了Emmet以及在编辑器中的安装,今天我们再来看用Emmet超高速的编写HTML代码。


缩写是Emmet工具的核心,这些特殊的表达式通过Emmet解析并转化为结构化的代码块,而语法用CSS选择器,HTML标签和一些Emmet特定的代码生成,所以对于任何一个前端开发人员都可以很容易地掌握和使用。

你可以使用标签名称为div、p等生成HTML标签,Emmet没有一组预定义可用的标记名称,您可以编写任何单词并把它转化为一个标签,例如:

  1. div → <div></div>, footer → <footer></footer>  

Emmet代码虽然没有特定的标签,但编写时还是有一定的规则与技巧,下面我们就看一看:

1、生成HTML文件的初始结构:

之前我们会用软件直接新建一个HTML文档,初始结构就生成了,但有些编辑器是不带这个功能的,手动输入是件痛苦的事,有了Emmet一切变得如此简单。生成HTML4(过渡)结构初始文档只需输入“html:4t”,HTML4(严格)结构初始文档只需输入“html:4s”,将生成标准的HTML4(严格)标准结构:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html lang="en">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
  5.     <title>Document</title>  
  6. </head>  
  7. <body>  
  8.        
  9. </body>  
  10. </html>  

2、而HTML5就更简单省事了,像HTML4的输入格式“html:5”,更狠的是HTML5只需输入“!”,就可以生成HTML5文档的初始结构:

  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6. </head>  
  7. <body>  
  8.        
  9. </body>  
  10. </html>  

3、父子关系:>,使用>操作符在内部相互嵌套的标签:

  1. div>ul>li  

将生成:

  1. <div>  
  2.     <ul>  
  3.         <li></li>  
  4.     </ul>  
  5. </div>  

4、兄弟关系:+,使用+操作符将标签处于同一个层级:

  1. div+p+footer  

将生成:

  1. <div></div>  
  2. <p></p>  
  3. <footer></footer>  

5、生成兄弟关系时,像ul dl这样的列表标签,使用+操作符将生成一个标准的列表结构:

  1. ul+  

将生成:

  1. <ul>  
  2.     <li></li>  
  3. </ul>  
  1. dl+  

将生成:

  1. <dl>  
  2.     <dt></dt>  
  3.     <dd></dd>  
  4. </dl>  

6、上级关系:^,使用^操作符使标签与前一标签的父级处于相同的级别:

  1. div+div>p>span+em^bq  

将生成:

  1. <div>      
  2.     <p><span></span><em></em></p>      
  3.     <blockquote></blockquote>      
  4. </div>  

7、使用两^操作符就与前一标签的爷爷级是相同级别,依此类推:

  1. div+div>p>span+em^^bq  

将生成:

  1. <div></div>  
  2. <div>  
  3.     <p><span></span><em></em></p>  
  4. </div>  
  5. <blockquote></blockquote>  

8、乘法:*,使用*操作符可以输出多个标签:

  1. div>ul>li*5  

将生成:

  1. <div>  
  2.     <ul>  
  3.         <li></li>  
  4.         <li></li>  
  5.         <li></li>  
  6.         <li></li>  
  7.         <li></li>  
  8.     </ul>  
  9. </div>  

9、分组:(),用()操作符进行分组,使编写的代码结构更加清晰、明了,一组标签就相当一个元素:

  1. div>(header>ul>li*2>a)+footer>p  

将生成:

  1. <div>  
  2.     <header>  
  3.         <ul>  
  4.             <li><a href=""></a></li>  
  5.             <li><a href=""></a></li>  
  6.         </ul>  
  7.     </header>  
  8.     <footer>  
  9.         <p></p>  
  10.     </footer>  
  11. </div>  

10、你可以使用多个(),并使用乘法*操作符:

  1. (div>dl>(dt+dd)*3)+footer>p  

将生成:

  1. <div>  
  2.     <dl>  
  3.         <dt></dt>  
  4.         <dd></dd>  
  5.         <dt></dt>  
  6.         <dd></dd>      
  7.         <dt></dt>  
  8.         <dd></dd>  
  9.     </dl>  
  10. </div>  
  11. <footer>  
  12.     <p></p>  
  13. </footer>  

11、CSS选择器,给标签指定id和class选择器,只需在标签的后面直接添加,但必需以.或#开头:

  1. div#header+div.page+div#footer.class1.class2.class3  

将生成:

  1. <div id="header"></div>  
  2. <div class="page"></div>  
  3. <div id="footer" class="class1 class2 class3"></div>  

Emmet默认的标签是div,所以我们在写带有CSS选择器的div标签时,可以省去div,你可以试试。

12、自定义属性:[](英文下的中括号),使用[]操作符给标签添加自定义属性:

  1. td[title="Hello world!" colspan=3]  

将生成:

  1. <td title="Hello world!" colspan="3"></td>  

13、可以把你喜欢的一些属性放在[]内,如果不指定属性值,代码将生成不带属性值的HTML默认标签:

  1. td[colspan title]  

将生成:

  1. <td colspan="" title=""></td>  

属性值必需使用单引号或双引号,不然就会出现你可能想到的效果。
14、项目编号:$,使用*可以重复的标签,$可以使标签生成有序列表,输出的值为数字:

  1. ul>li.item$*5  

将生成:

  1. <ul>  
  2.     <li class="item1"></li>  
  3.     <li class="item2"></li>  
  4.     <li class="item3"></li>  
  5.     <li class="item4"></li>  
  6.     <li class="item5"></li>  
  7. </ul>  

15、除了生成无序列表,其它的标签也是一样:

  1. h$[title=item$]{Header $}*3  

将生成:

  1. <h1 title="item1">Header 1</h1>  
  2. <h2 title="item2">Header 2</h2>  
  3. <h3 title="item3">Header 3</h3>  

16、你也可以使用多个$操作符用0(零)来分填充数字:

  1. ul>li.item$$$*5  

将生成:

  1. <ul>  
  2.     <li class="item001"></li>  
  3.     <li class="item002"></li>  
  4.     <li class="item003"></li>  
  5.     <li class="item004"></li>  
  6.     <li class="item005"></li>  
  7. </ul>  

更改列表的起始数字与顺序,看下面的代码就一目了然:

17、数字的倒序,只需在*前添加@-:

  1. ul>li.item$@-*5  

将生成:

  1. <ul>  
  2.     <li class="item5"></li>  
  3.     <li class="item4"></li>  
  4.     <li class="item3"></li>  
  5.     <li class="item2"></li>  
  6.     <li class="item1"></li>  
  7. </ul>  

18、起始数字,在*前添加@起始数字:

  1. ul>li.item$@3*5  

将生成:

  1. <ul>  
  2.     <li class="item3"></li>  
  3.     <li class="item4"></li>  
  4.     <li class="item5"></li>  
  5.     <li class="item6"></li>  
  6.     <li class="item7"></li>  
  7. </ul>  

而从起始数字为3的列表倒序,只需把上面的Emmet代码item后面的数字写成@-3*5。

19、文本:{},使用花括号来添加文本元素:

  1. a{Click me}  

将生成:

  1. <a href="">Click me</a>  

20、注意:当{}作为单独的一个操作符使用时,a{click}和a>{click}将生成相同的标签,但当使用了多个,或用了其它操作符时将会生成不同的标签:

  1. <!-- a{click}+b{here} -->  
  2. <a href="">click</a><b>here</b>  
  3.   
  4. <!-- a>{click}+b{here} -->  
  5. <a href="">click<b>here</b></a>  

21、当元素用+连接时,文本{}编写正确后,并不能改变标签的层级关系:

  1. p>{Click }+a{here}+{ to continue}  

将生成:

  1. <p>Click <a href="">here</a> to continue</p>  

对于一些特殊的标签类型,比如:a、img、link、input等带有属性值的标签,在编写Emmet插件时已经为我们编写好了基本的结构。

22、比如a标签,在编辑中输入a,即可解析成一个基本的a标签:

  1. <a href=""></a>  

23、a标签有几个属性值,在编写Emmet代码时可以添加这些值来覆盖默认的属性值:

  1. a[href="https://yfdxs.com" title="远方的雪山" class="logo"]{远方的雪山}  

将生成:

  1. <a href="https://yfdxs.com" title="远方的雪山" class="logo">远方的雪山</a>  

因为属性值是不可以缩写的,所以看起来编写带属性值是相似的。

24、在许多情况下,你可以跳过输入标签名称和Emmet代码,得到HTML代码,例如下面的例子:

  1. <div>  
  2.     .item   
  3. </div>  
  4.   
  5. <span>.item</span>  
  6.   
  7. <ul class="nav">  
  8.     .item   
  9. </ul>  

将生成:

  1. <div>  
  2.     <div class="item"></div>  
  3. </div>  
  4.   
  5. <span><span class="item"></span></span>  
  6.   
  7. <ul class="nav">  
  8.     <li class="item"></li>  
  9. </ul>  

25、从上面的例子中我们可以看到,插件会根据id或class所在的父级标签生成相应的标签,这种写法也是遵循HTML的编写规则,通过下面的代码你会更明白:

  1. .wrap>.content                           div.wrap>div.content   
  2. em>.info                                     em>span.info   
  3. ul>.item*3                                   ul>li.item*3   
  4. table>#row$*4>[colspan=2]       table>tr#row$*4>td[colspan=2]  

上面对应的四组代码最终生成的代码对应为:

  1. <div class="wrap">  
  2.     <div class="content"></div>  
  3. </div>  
  4.   
  5. <em><span class="info"></span></em>  
  6.   
  7. <ul>  
  8.     <li class="item"></li>  
  9.     <li class="item"></li>  
  10.     <li class="item"></li>  
  11. </ul>  
  12.   
  13. <table>  
  14.     <tr id="row1">  
  15.         <td colspan="2"></td>  
  16.     </tr>  
  17.     <tr id="row2">  
  18.         <td colspan="2"></td>  
  19.     </tr>  
  20.     <tr id="row3">  
  21.         <td colspan="2"></td>  
  22.     </tr>  
  23.     <tr id="row4">  
  24.         <td colspan="2"></td>  
  25.     </tr>  
  26. </table>  

我们应该了解到,CSS选择器在块级元素中默认的HTML标签为div,在内联级元素中为span,而对于HTML一些特殊的标签:ul li、table tr td,将会生成对应的内部标签。

这篇文章介绍了HTML的基本标签在Emmet下的写法,萨龙龙把它当做学习笔记,可以随时查看,如果对你有帮助就更好。

Emmet编写代码的格式最重要的就是不能有空格,如果有空格将不会完全解析和生成HTML代码。

Emmet最核心的就是缩写,而它也不属于一门语言,编写时也不需要有很强的可读性,最重要的就是能高速的生成HTML代码。只要你多练习,多看下官方的英文文档,很快你将掌握Emmet的编写方式,同时也将大大提高你的前端开发速度。

(0)

本文由 远方的雪山 作者:萨龙龙 发表,转载请注明来源!

LensNews

热评文章

发表评论

评论: 8 条评论,访客:2 条,博主:2 条 ,当前引用:4 条

  • eightfeet
    eightfeet 发布于:  回复

    真心好!

    • 萨龙龙
      萨龙龙 发布于:  回复

      呵呵,谢谢,当时写的时候自己也在学习当中,就当学习笔记了。

  • 熊海
    熊海 发布于:  回复

    我还是用Dw比较多,只用来嵌套Html。

    • 萨龙龙
      萨龙龙 发布于:  回复

      DW有它好用的一面,sublime text编写代码比DW方便、强大,安装Emmet后编写HTML和CSS是相当的快速,你可以试试。

当前外部引用:4 条

  • Emmet的高级功能与使用技巧 | 远方的雪山
  • 使用CSS3 @font-face模块打造自定义个性化WEB字体 | 远方的雪山
  • 前端开发工具Emmet的介绍 | 远方的雪山
  • Emmet快速编写CSS样式 | 远方的雪山