emmet快捷输入
将图片编译成data:URL模式(Encode/Decode Image to data:URL)
将光标放在img或background-image标签的图片上,按ctrl+shift+b快捷键利用base64编码把图片数据翻译成标准ASCII字符
更新图片大小
很多时候在编写HTML代码中的img标题与CSS样式中的background-image时,需要知道图片的宽度与高度,总是在电脑中找到图片查看其尺寸,浪费时间又很不爽。而Emmet为我们提供这一功能,只需将光标移动到img或background-image标签上,按下ctrl+shift+u,Emmet会自动读取图片的尺寸并添加。
跳转到文本编辑点
这个功能适合在标记之间、空属性和空的文章标签中进行上下跳转,比如title、a、li、href、src等等需要输入内容的标题中。上一个,下一个编辑点快捷键分别为ctrl+alt+left、ctrl+alt+right。
转到匹配的标签
在开始标签与闭合标签中跳转,快捷键:ctrl+t。
选择匹配标签
选择开始标签到闭合标签中的代码,在鼠标光标处按快捷键ctrl+d,将会选择光标所在标签范围内的所有内容,多次运行将扩大选择。
缩小快捷键:crtl+shift+d,多次运行将缩小选择范围。
分解与添加标签
光标在标签上时,按ctrl+j,可以将标签:
<div></div>
转换为
<div/>
标签,反之亦然。当div中有内容时,使用这一功能一样会转换成上一标签,其中的内容也将删除,需要注意。
文本转换HTML
比如以下文本
1首页
2公司简介
3公司动态
4关于我们
5联系我们
1、选中文本,shift+ctrl+g
2、弹出:Enter Wrap Abbreviation(输入扩展缩写)
3、输入nav>ul.nav>li.nav-item$*>a|t,|t就是删除文本标记
4、将生成
<nav>
<ulclass="nav">
<liclass="nav-item1"><ahref="">首页</a></li>
<liclass="nav-item2"><ahref="">公司简介</a></li>
<liclass="nav-item3"><ahref="">公司动态</a></li>
<liclass="nav-item4"><ahref="">关于我们</a></li>
<liclass="nav-item5"><ahref="">联系我们</a></li>
</ul>
</nav>
文本输出位置
$#为文本输出位置
在Enter Wrap Abbreviation中输入:ul>li[title=$#]*>{$#}+img[alt=$#]
生成:
<ul>
<lititle="首页">首页<imgsrc=""alt="首页"></li>
<lititle="公司简介">公司简介<imgsrc=""alt="公司简介"></li>
<lititle="公司动态">公司动态<imgsrc=""alt="公司动态"></li>
<lititle="关于我们">关于我们<imgsrc=""alt="关于我们"></li>
<lititle="联系我们">联系我们<imgsrc=""alt="联系我们"></li>
</ul>
扩展缩写(Wrap with Abbreviation)
shift+ctrl+g
弹出:Enter Wrap Abbreviation(输入扩展缩写)
在其中输入:
.wrapper>h1{Title}+.content
Emmet Abbreviation(展开)
#page>(#header>ul>li*4)+#footer + Tab
<div id="page">
<div id="header">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="footer"></div>
</div>
生成测试文本
lorem*2 + Tab
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis eos
consequuntur perspiciatis. Corporis illo laudantium voluptate beatae
accusantium et, laboriosam voluptas. Suscipit explicabo praesentium
tenetur placeat, dolorum natus expedita nostrum?Repellat nemo
minus, est fugit voluptatibus fuga molestiae quo similique fugiat
architecto necessitatibus, neque ex minima aliquam nobis veritatis
quisquam voluptatem nihil officiis nisi odit! Porro molestiae amet
similique recusandae!
lorem8 + Tab
Lorem ipsum dolor sit amet consectetur adipisicing elit.
h2>lorem4
<h2>Lorem ipsum dolor sit.</h2>