萨龙网络
登录
首页-WordPress文章-HTML5/CSS3-正文

Emmet快速编写HTML代码

萨龙龙萨龙龙
HTML5/CSS3
11年前
0
0
1.72W
Emmet快速编写HTML代码前面我们通过《前端开发利器Emmet的介绍 》简单介绍了Emmet以及在编辑器中的安装,今天我们再来看用Emmet超高速的编写HTML代码。 [related_posts tagid="31"] 缩写是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. <htmllang="en">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>
2、而HTML5就更简单省事了,像HTML4的输入格式“html:5”,更狠的是HTML5只需输入“!”,就可以生成HTML5文档的初始结构:
  1. <!doctype html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. </body>
  9. </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><ahref=""></a></li>
  5. <li><ahref=""></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. <divid="header"></div>
  2. <divclass="page"></div>
  3. <divid="footer"class="class1 class2 class3"></div>
Emmet默认的标签是div,所以我们在写带有CSS选择器的div标签时,可以省去div,你可以试试。 12、自定义属性:[](英文下的中括号),使用[]操作符给标签添加自定义属性:
  1. td[title="Hello world!"colspan=3]
将生成:
  1. <tdtitle="Hello world!"colspan="3"></td>
13、可以把你喜欢的一些属性放在[]内,如果不指定属性值,代码将生成不带属性值的HTML默认标签:
  1. td[colspan title]
将生成:
  1. <tdcolspan=""title=""></td>
属性值必需使用单引号或双引号,不然就会出现你可能想到的效果。 14、项目编号:$,使用*可以重复的标签,$可以使标签生成有序列表,输出的值为数字:
  1. ul>li.item$*5
将生成:
  1. <ul>
  2. <liclass="item1"></li>
  3. <liclass="item2"></li>
  4. <liclass="item3"></li>
  5. <liclass="item4"></li>
  6. <liclass="item5"></li>
  7. </ul>
15、除了生成无序列表,其它的标签也是一样:
  1. h$[title=item$]{Header $}*3
将生成:
  1. <h1title="item1">Header 1</h1>
  2. <h2title="item2">Header 2</h2>
  3. <h3title="item3">Header 3</h3>
16、你也可以使用多个$操作符用0(零)来分填充数字:
  1. ul>li.item$$$*5
将生成:
  1. <ul>
  2. <liclass="item001"></li>
  3. <liclass="item002"></li>
  4. <liclass="item003"></li>
  5. <liclass="item004"></li>
  6. <liclass="item005"></li>
  7. </ul>
更改列表的起始数字与顺序,看下面的代码就一目了然: 17、数字的倒序,只需在*前添加@-:
  1. ul>li.item$@-*5
将生成:
  1. <ul>
  2. <liclass="item5"></li>
  3. <liclass="item4"></li>
  4. <liclass="item3"></li>
  5. <liclass="item2"></li>
  6. <liclass="item1"></li>
  7. </ul>
18、起始数字,在*前添加@起始数字:
  1. ul>li.item$@3*5
将生成:
  1. <ul>
  2. <liclass="item3"></li>
  3. <liclass="item4"></li>
  4. <liclass="item5"></li>
  5. <liclass="item6"></li>
  6. <liclass="item7"></li>
  7. </ul>
而从起始数字为3的列表倒序,只需把上面的Emmet代码item后面的数字写成@-3*5。 19、文本:{},使用花括号来添加文本元素:
  1. a{Click me}
将生成:
  1. <ahref="">Click me</a>
20、注意:当{}作为单独的一个操作符使用时,a{click}和a>{click}将生成相同的标签,但当使用了多个,或用了其它操作符时将会生成不同的标签:
  1. <!-- a{click}+b{here} -->
  2. <ahref="">click</a><b>here</b>
  3. <!-- a>{click}+b{here} -->
  4. <ahref="">click<b>here</b></a>
21、当元素用+连接时,文本{}编写正确后,并不能改变标签的层级关系:
  1. p>{Click }+a{here}+{ to continue}
将生成:
  1. <p>Click <ahref="">here</a> to continue</p>
对于一些特殊的标签类型,比如:a、img、link、input等带有属性值的标签,在编写Emmet插件时已经为我们编写好了基本的结构。 22、比如a标签,在编辑中输入a,即可解析成一个基本的a标签:
  1. <ahref=""></a>
23、a标签有几个属性值,在编写Emmet代码时可以添加这些值来覆盖默认的属性值:
  1. a[href="https://yfdxs.com"title="远方的雪山"class="logo"]{远方的雪山}
将生成:
  1. <ahref="https://yfdxs.com"title="远方的雪山"class="logo">远方的雪山</a>
因为属性值是不可以缩写的,所以看起来编写带属性值是相似的。 24、在许多情况下,你可以跳过输入标签名称和Emmet代码,得到HTML代码,例如下面的例子:
  1. <div>
  2. .item
  3. </div>
  4. <span>.item</span>
  5. <ulclass="nav">
  6. .item
  7. </ul>
将生成:
  1. <div>
  2. <divclass="item"></div>
  3. </div>
  4. <span><spanclass="item"></span></span>
  5. <ulclass="nav">
  6. <liclass="item"></li>
  7. </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. <divclass="wrap">
  2. <divclass="content"></div>
  3. </div>
  4. <em><spanclass="info"></span></em>
  5. <ul>
  6. <liclass="item"></li>
  7. <liclass="item"></li>
  8. <liclass="item"></li>
  9. </ul>
  10. <table>
  11. <trid="row1">
  12. <tdcolspan="2"></td>
  13. </tr>
  14. <trid="row2">
  15. <tdcolspan="2"></td>
  16. </tr>
  17. <trid="row3">
  18. <tdcolspan="2"></td>
  19. </tr>
  20. <trid="row4">
  21. <tdcolspan="2"></td>
  22. </tr>
  23. </table>
我们应该了解到,CSS选择器在块级元素中默认的HTML标签为div,在内联级元素中为span,而对于HTML一些特殊的标签:ul li、table tr td,将会生成对应的内部标签。 这篇文章介绍了HTML的基本标签在Emmet下的写法,萨龙龙把它当做学习笔记,可以随时查看,如果对你有帮助就更好。 Emmet编写代码的格式最重要的就是不能有空格,如果有空格将不会完全解析和生成HTML代码。 [successbox]Emmet最核心的就是缩写,而它也不属于一门语言,编写时也不需要有很强的可读性,最重要的就是能高速的生成HTML代码。只要你多练习,多看下官方的英文文档,很快你将掌握Emmet的编写方式,同时也将大大提高你的前端开发速度。[/successbox]
标签:
本文原创,作者:萨龙龙,其版权均为萨龙网络所有。
如需转载,请注明出处:https://salongweb.com/emmet-html.html
萨龙龙

萨龙龙

侠客
一个平平常常的人,热爱生活、旅行和摄影,骑行去过西藏,一直计划再去。14年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1342.10M345.33W3.40W
分享:
1
CSS3带阴影的3D旋转作品展示
CSS3带阴影的3D旋转作品展示上一篇
自定义联系表单,并使用HTML5/CSS3客户端验证下一篇
自定义联系表单,并使用HTML5/CSS3客户端验证
相关文章
总数:8

使用CSS3 @font-face打造个性化web字体

个性化的web字体,如萨龙网络的标题、页脚小工具标题、宣传语等都用的是个性化的web字体,在CSS3之前,web设计师们都只能使用电脑中安装好的…
萨龙龙萨龙龙
HTML5/CSS3
11年前
0
0
2.25W
5

前端开发利器Emmet的介绍

曾经也为写HTML/CSS代码而烦恼过,不愿再写下去,感觉很烦琐,写那么多的尖括号,用的标签都是在重复写,而且绝大多数标题都需要闭合标签,再多几…
萨龙龙萨龙龙
HTML5/CSS3
11年前
0
0
1.33W
3

CSS3 模拟弹窗效果

这篇文章我们来创建一个很酷的CSS3模拟弹窗效果,也许你看到过很多类似的弹窗效果,但都是通过jQuery来实现。 通过CSS3模拟弹窗效果…
萨龙龙萨龙龙
HTML5/CSS3
11年前
0
0
1.61W
0

Emmet快速编写CSS样式

Emmet缩写可以快速地生成HTML代码的结构化标签,在我们编写HTML代码时节省了很多时间,提高了工作效率,让前端开发人员也不会感觉太繁琐,今…
萨龙龙萨龙龙
HTML5/CSS3
11年前
0
0
1.65W
2

WordPress自定义域与HTML5简洁的音乐播放器

Sixianqiu主题,一个简洁、多形式(标准、图像、相册、音乐、视频、引用与链接),专门为四弦秋发表诗集的Wordpress博客主题。对于音乐…
萨龙龙萨龙龙
HTML5/CSS3
9年前
0
0
1.35W
0

CSS3带阴影的3D旋转作品展示

CSS3有太多实用、创新的网页交互效果,而今天跟大家介绍一个让人激动的3D图像旋转效果,使网页更加的生动、漂亮。 国外在HTML5/CSS…
萨龙龙萨龙龙
HTML5/CSS3
11年前
0
0
1.50W
3

自定义联系表单,并使用HTML5/CSS3客户端验证

作为一个企业站点,客户可以通过电话、QQ等通讯方式很方便的联系到企业,但联系表单是一个必要的功能。 萨龙网络建站一般都使用wordpres…
萨龙龙萨龙龙
HTML5/CSS3
11年前
0
0
2.23W
2

Emmet的高级功能与使用技巧

[infobox]前端开发工具Emmet的介绍,Emmet快速编写HTML代码和Emmet快速编写CSS样式分别介绍了Emmet的用途,编写HT…
萨龙龙萨龙龙
HTML5/CSS3
11年前
0
0
2.56W
2
评论表单游客 您好,欢迎参与讨论。
请输入昵称
请输入邮箱
请输入网址
0 / 100
评论列表
总数:0
萨龙网络
暂无评论,第一个评论下?