简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

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

WBOY
Freigeben： 2016-06-24 11:48:52
Original
1186 Leute haben es durchsucht

工具/原料

  • 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


    Verwandte Etiketten：
    说一个Sublime Text 2插件、emmet（原名：zen Coding)
    Quelle：php.cn
    Vorheriger Artikel：CSS 背景透明效果的实现_html/css_WEB-ITnose Nächster Artikel：CSS3之尖角标签_html/css_WEB-ITnose
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
    Aus 2024-04-29 11:01:01
    0
    2
    1807
    So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
    Aus 2024-04-23 00:22:19
    0
    10
    1952
    Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
    Aus 2024-04-19 15:37:47
    0
    1
    1658
    Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
    Aus 2024-04-18 23:52:34
    0
    1
    1559
    Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
    Aus 2024-04-16 10:10:18
    0
    0
    1590
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！