简体中文(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
原創
1185 人瀏覽過

工具/原料

  • 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
    1807
    google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
    來自於 2024-04-23 00:22:19
    0
    10
    1952
    子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
    來自於 2024-04-19 15:37:47
    0
    1
    1658
    父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
    來自於 2024-04-18 23:52:34
    0
    1
    1559
    關於CSS心智圖的課件在哪？ 課件
    來自於 2024-04-16 10:10:18
    0
    0
    1590
    相關專題
    更多>
    熱門推薦
    熱門教學
    更多>
    相關教學
    熱門推薦
    最新課程
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！