简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  Sublime Text 플러그인 Emmet 사용법에 대한 자세한 설명

Sublime Text 플러그인 Emmet 사용법에 대한 자세한 설명

高洛峰
高洛峰원래의
2017-03-26 10:14:511787검색

요약:

설치 Sublime Text - 설치를 읽어보세요. sublime에 내장된 단축키를 사용하면 HTML 작성이 매우 빠릅니다.

다음은 일반적으로 사용되는 내용입니다. 자세한 내용은 emmet 공식 문서를 참조하세요.

태그 생성

1. 문서 구조를 빠르게 생성

  • ! 또는 html:5, HTML5 구조를 빠르게 생성 (Tab 키를 다시 눌러야 합니다) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
</body>
</html>

  • html:xt HTML4 전환 생성

  • html:4s HTML4 엄격한 유형

2. ID가

태그 #인 ID 이름을 생성합니다. 예: p#header

<p id="header"></p>

3. class 요소

태그 포함. 클래스 이름(예: p.title

<p class="title"></p>

) 4. 하위 요소 생성: >

: nav>ul>li 

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

5. 형제 요소 생성: +

예: p+p+p

<p></p>
<p></p>
<p></p>

6. 예: 

<p></p>
<p></p>
p^p7. 여러 요소를 반복적으로 생성합니다: * 예: 


<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
ul>li*58. 사용자 정의

속성을 ​​사용하여

을 생성합니다. [attr]예: 

<p value="1"></p>
p[value=1]9. 텍스트 콘텐츠 생성: {}

예: 

<a href="">Click me</a>
a{Click me}10 . 번호 추가: $

    1부터 시작: $

    • 추가 예: 

<p class="item1">01</p>
<p class="item2">02</p>
<p class="item3">03</p>
p.item${$$}*3
    역순: $ @-

    • 을 추가합니다(예: 

<p class="item3">03</p>
<p class="item2">02</p>
<p class="item1">01</p>
p.item$@-{$$@-}*3
    ). 일련 번호를 지정할 수 있습니다. @N

    • 사용: 

<p class="item4">04</p>
<p class="item5">05</p>
<p class="item6">06</p>
p.item$@4{$$@4}*311.그룹

: ()예: 

<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>
(ul>ol)*3어서종합사례

<table id="tab" value="1" class="a">
    <tr>
        <td>01<span></span></td>
        <td>02<span></span></td>
        <td>03<span></span></td>
    </tr>
    <tr>
        <td>01<span></span></td>
        <td>02<span></span></td>
        <td>03<span></span></td>
    </tr>
    <tr>
        <td>01<span></span></td>
        <td>02<span></span></td>
        <td>03<span></span></td>
    </tr>
</table>
table#tab[value=1].a>tr*3>(td{$$}>span)*3CSS 생성

CSS 스타일은 다양하고, 당연히 많은 약어가 있습니다. 일반적으로 사용되는 약어를 나열하고 추론해 보세요.

css 약어는 ov:h == ov-h == ovh == oh와 같은 퍼지 검색을 사용하여 일치됩니다.

快捷键

如果没作用请检查快捷键是否冲突

  • 快速生成包裹标签：Ctrl+Shift+G

只有文本没有结构时，如下

首页
简介
动态

选中文本按快捷键Ctrl+Shift+G，再弹出的：Enter Wrap Abbreviation（输入扩展缩写）中输入nav>ul>li.item$*>a就会生成

<nav>
    <ul>
        <li class="item1"><a href="">首页</a></li>
        <li class="item2"><a href="">简介</a></li>
        <li class="item3"><a href="">动态</a></li>
    </ul>
</nav>

如果原先的文本带编号，不想要则可以在上面的基础上加|t,nav>ul>li.item$*>a|t即可生成如上结果。

1首页
2简介
3动态

  • 自动添加/更新图片尺寸：ctrl+U

光标移到标签上的任意位置，按下快捷键ctrl+U即可。

<img src="img/x1.png" />
<img src="img/x1.png" width="100" height="200" />

  • 删除标签：shift+ctrl+;

  • 定位到上个编辑点：ctrl+alt+left

  • 定位到下个编辑点：ctrl+alt+right

  • 选中下一项：shift+ctrl+.

  • 加/减1：ctrl+up/ctrl+down

  • 加/减10：shift+alt+up/shift+alt+down

  • 展开缩写：ctrl+e（和tab键作用相同）

  • 重命名标签(rename_tag)：ctrl+shift+'

  • 更换标签(update_as_you_type)：ctrl+Shift+U

  • 匹配标签对：ctrl+alt+j

生成测试文本

输入lorem再按tab会随机生成一段英文,默认是生成30个单词，可以加上数字控制单词数量，如lorem5。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis incidunt, expedita voluptates ratione praesentium error a accusamus corporis deleniti. Cum, debitis id, in rem exercitationem at voluptatum illum minima corporis!
Lorem ipsum dolor sit amet.

위 내용은 Sublime Text 플러그인 Emmet 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML을 사용하여 위치 지정 코드 예제를 구현하는 방법다음 기사：HTML을 사용하여 위치 지정 코드 예제를 구현하는 방법

관련 기사

더보기