简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

说一个Sublime Text 2插件、emmet（原名：zen Coding)_html/css_WEB-ITnose

WBOY
发布： 2016-06-24 11:48:52
原创
1139 人浏览过

工具/原料

  • sublime Text 2

  • 安装emmet插件

    • 方法/步骤

    1. 生成html文档初始结构：

      !

            

            

      Document

      html:5

            

            

      Document

       

      html:xs

            

            

      Document

       

      html:4s

            

            

      Document

    2. 生成带有id,class的标签：

      Emmet默认标签是div

      #id

          

      p#id

           

      h1#id

          

      span#id

          

       

      .class

          

      p.class

          

      h1.class

         

      span.class

          

      输入多个class 添加两个.class1.class2

      .class1.class2

         

    3. 语法：

      语法：

      >：生成后辈

      div>span>p>h1

            

                   

                          

                   

            

       

      +：生成同辈

      div+span+p+h1

       

      ^：生产叔辈

      div>span>p^h1

            

                   

            

            

       

      *：生成重复多分

      ul>li*3

              

      •       

      •       

       

      （）：生成分组

      ul>(li.li_1*3)+(li.li_2*3)

              

      •       

      •       

      •      

              

      •       

      •       

       

      [attr]:生成属性

      a[href=index.html title=index]

      input[type=button]

      input[type=submit name=submit]

       

      $：生成编号 $的个数就是数字的个数 @指定开始的数字 @?倒序

      ul>li.li_$*3

              

      •       

      •       

      ul>li.li_$@0*3，

              

      •       

      •       

       

      ul>li.li_$@-*3

              

      •       

      •       

       

      {}:生成内容

      p{$}*3

      1

      2

      3

       

      a[href=index.html]{click}+a[href=test.html]{mouseover}

      click

      mouseover

      高级：

      Lorem*:  生成测试文本，*表示0-无限个 默认30个单词

      p>lorem2

      Lorem ipsum.

      p>lorem4

      Lorem ipsum dolor sit.

      p>lorem6

      Lorem ipsum dolor sit amet, consectetur.

      p>lorem

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, delectus nostrum pariatur accusamus necessitatibus maiores ut natus id sit ab vel assumenda ratione harum quas adipisci eveniet temporibus praesentium ducimus!

       

      套接作用

              

      •       

      •       

      全选后，ctrl+shirt+g,输入div.demo1>h1{test1}+div.test2

            

      test1

            

                   

                            

      •                     

      •                     

      •              

            

       

      文本转换成html标签          

      1.小学生

      2.中学生

      3.大学生

      4.研究生

      5.博士生

      全选后：Ctrl+shift+g 输入:ul>li*>a

      去除所有序号     

      ul>li*>a|t


    相关标签：
    说一个Sublime Text 2插件、emmet（原名：zen Coding)
    来源：php.cn
    上一篇：CSS 背景透明效果的实现_html/css_WEB-ITnose 下一篇：CSS3之尖角标签_html/css_WEB-ITnose
    本站声明
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    作者最新文章
    最新问题
    function_exists()无法判定自定义函数 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
    来自于 2024-04-29 11:01:01
    0
    2
    1348
    google 浏览器 手机版显示的怎么实现 老师您好，google 浏览器怎么变成手机版样式的？
    来自于 2024-04-23 00:22:19
    0
    9
    1440
    子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
    来自于 2024-04-19 15:37:47
    0
    1
    1268
    父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');                  ...
    来自于 2024-04-18 23:52:34
    0
    1
    1170
    关于CSS思维导图的课件在哪？ 课件
    来自于 2024-04-16 10:10:18
    0
    0
    1248
    相关专题
    更多>
    热门推荐
    热门教程
    更多>
    相关教程
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责声明 Sitemap
    PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！