美文网首页
emmet快捷输入

emmet快捷输入

作者: 海豚先生的博客 | 来源:发表于2020-06-15 17:12 被阅读0次

    将图片编译成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>
    

    相关文章

      网友评论

          本文标题:emmet快捷输入

          本文链接:https://www.haomeiwen.com/subject/atdhxktx.html