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

Let's talk about a Sublime Text 2 plug-in, emmet (original name: zen Coding)_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:48:52
Original
1184 people have browsed it

工具/原料

  • 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

            

                   

                            

      •                                                                                       gt;

         

      >3.College students

      4.Graduate students

      5.Ph.D. students

      After selecting all: Ctrl shift g input: ul>li*>a

    Related labels：
    说一个Sublime Text 2插件、emmet（原名：zen Coding)
    source：php.cn
    Previous article：Implementation of CSS background transparency effect_html/css_WEB-ITnose Next article：CSS3 sharp corner tag_html/css_WEB-ITnose
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Latest Issues
    function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
    From 2024-04-29 11:01:01
    0
    2
    1807
    How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
    From 2024-04-23 00:22:19
    0
    10
    1952
    The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
    From 2024-04-19 15:37:47
    0
    1
    1658
    There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
    From 2024-04-18 23:52:34
    0
    1
    1559
    Where is the courseware about CSS mind mapping? Courseware
    From 2024-04-16 10:10:18
    0
    0
    1590
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn：Public welfare online PHP training，Help PHP learners grow quickly！