sublime Text3下Emmet使用技巧

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_39956624/article/details/84109401

转自:http://blog.csdn.net/laokdidiao/article/details/51429404

1.Package Control安装

第一种方法是在控制台中复制粘贴代码按回车,https://sublime.wbond.NET/installation

第二种办法下载pc文件,百度一下很多方案,这里不详说了

2.Emmet安装

1、按Ctrl+Shift+P命令板

2、输入PCIC,回车进入Package Control:install

3、输入Emmet和Emmet Css

4、安装完毕以后,C+E就可以快速生成代码了

3.Emmet语法

全套语法:https://docs.emmet.io/cheat-sheet/

emmet的语法:

3.1 输入“!”或“html:5”,然后按Tab键:
在这里插入图片描述
html:5 或!:用于HTML5文档类型

html:xt:用于XHTML过渡文档类型

html:4s:用于HTML4严格文档类型

3.2 轻松添加类、id、文本和属性

p#foo 补充ID

p.foo 补充类

h1{foo}和a[href=#] 补充为<h1>foo</h1> <a href="#"></a>

3.3 嵌套

>:子元素符号,表示嵌套的元素

+:同级标签符号

^:可以使该符号前的标签提升一行
效果如下图所示:
在这里插入图片描述

3.4 定义多个元素

ul>li*3
在这里插入图片描述

4.Sublime text3快速生成html代码时,tab键失效问题

emmet插件安装好了之后,发现Tab失效,但是Ctrl+E可以正常快速生成代码,百度了一下,解决办法如下:
1.鼠标左键点击状态栏右侧文本状态
在这里插入图片描述
2.在弹出的列表框中选中html,将代码状态切换成html代码即可。
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_39956624/article/details/84109401