简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

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

WBOY
풀어 주다： 2016-06-24 11:48:52
원래의
1137명이 탐색했습니다.

工具/原料

  • 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()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
    에서 2024-04-29 11:01:01
    0
    2
    1347
    Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
    에서 2024-04-23 00:22:19
    0
    9
    1439
    자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
    에서 2024-04-19 15:37:47
    0
    1
    1267
    상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
    에서 2024-04-18 23:52:34
    0
    1
    1169
    CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
    에서 2024-04-16 10:10:18
    0
    0
    1247
    관련 주제
    더>
    인기 추천
    인기 튜토리얼
    더>
    관련 튜토리얼
    인기 추천
    최신 강좌
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿
    회사 소개 부인 성명 Sitemap
    PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！