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

요약:

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

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

태그 생성

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

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

nbsp;html>


    <meta>
    <title>Document</title>

• html:xt HTML4 전환 생성

• html:4s HTML4 엄격한 유형

2. ID가

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

<p></p>

3. class 요소

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

<p></p>

) 4. 하위 요소 생성: >

: nav>ul>li

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

5. 형제 요소 생성: +

예: p+p+p

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

6. 예:

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

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

    
•     
•     
•     
•     

ul>li*58. 사용자 정의

속성을 ​​사용하여

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

<p></p>

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

예:

<a>Click me</a>

a{Click me}10 . 번호 추가: $

1부터 시작: $
추가 예:

<p>01</p>
<p>02</p>
<p>03</p>

p.item${$$}*3

역순: $ @-
을 추가합니다(예:

<p>03</p>
<p>02</p>
<p>01</p>

p.item$@-{$$@-}*3

). 일련 번호를 지정할 수 있습니다. @N
사용:

<p>04</p>
<p>05</p>
<p>06</p>

p.item$@4{$$@4}*311.그룹

: ()예:

    

    

    

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

                                                                                                              

01	02	03
01	02	03
01	02	03

table#tab[value=1].a>tr*3>(td{$$}>span)*3CSS 생성

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

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

w10 <a href="http://www.php.cn/wiki/835.html" target="_blank">너비<li>: 10px; </li></a> w10p

w10e <a href="http://www.php.cn/wiki/835.html" target="_blank">width</a>: 10px; w10x width: 10%;width: 10em;width: 10xe;

h10 <a href="http://www.php.cn/wiki/836%20.html" target="_blank">높이<li>: 10px;</li></a>

<a href="http://www.php.cn/wiki/836.html" target="_blank">height</a>: 10px;

<a href="http://www.php.cn%20/wiki/902.html" target="_blank">위치<li>: 상대;</li></a> poa

<a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>: relative;position: absolute;

fll <a href="http%20://www.php.cn/wiki/919.html" target="_blank">float<li>: 왼쪽;</li></a> fr float: <a href="http://www.php%20.cn/wiki/905.html" target="_blank">오른쪽<p style="text-align: left;">;</p></a><a href="http://www.php.cn/wiki/919.html" target="_blank">float</a>: left;float: <a href="http://www.php.cn/wiki/905.html" target="_blank">right</a>;dt <a href="http://www%20.php.cn/wiki/927.html" target="_blank">디스플레이<li>: 테이블;</li></a> db

dib <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: table;display: block;display: inline-block;

ovy overflow-y
• : 숨김;

  <a href="http://www.php.cn/wiki/926.html" target="_blank">overflow-y</a>: hidden;

cb <a href="http://www.php.cn/wiki/917.html" target="_blank">삭제<li>: 둘 다;</li></a>

<a href="http://www.php.cn/wiki/917.html" target="_blank">clear</a>: both;

mt <a href="http://www.php.cn/wiki/933.html" target="_blank">여백-상단<li>: ;</li></a> mb <a href="http://www.php.cn/wiki/935.html" target="_blank">여백-하단<p style="text-align: left;">: ;</p></a><a href="http://www.php.cn/wiki/933.html" target="_blank">margin-top</a>: ;

• pt <a href="http://www.php.cn/wiki/949.html" target="_blank">padding-top</a>: ; pb <a href="http://www.php.cn/wiki/951.html" target="_blank">padding-bottom</a>: ;

• tac <a href="http://www.php.cn/wiki/870.html" target="_blank">text-align</a>: center;

• lh <a href="http://www.php.cn/wiki/864.html" target="_blank">line-height</a>:;

• tsn <a href="http://www.php.cn/wiki/861.html" target="_blank">text-shadow</a>: none;

• tja <a href="http://www.php.cn/wiki/881.html" target="_blank">text-justify</a>: auto;

• c color: #000; cr color: rgb(0, 0, 0); cra color: rgba(0, 0, 0, .5);

• op opacity: ;

• cnt content: '';

• ol <a href="http://www.php.cn/wiki/938.html" target="_blank">outline</a>: ;

• bd+ border: 1px solid #000; bdb+ border-bottom: 1px solid #000;

• bd2px#333s border: 2px #333 solid;

快捷键

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

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

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

首页
简介
动态

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

<nav>
    <ul>
        <li><a>首页</a></li>
        <li><a>简介</a></li>
        <li><a>动态</a></li>
    </ul>
</nav>

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

1首页
2简介
3动态

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

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

<img  src="/static/imghwm/default1.png" data-src="img/x1.png" class="lazy" alt="Sublime Text 플러그인 Emmet 사용법에 대한 자세한 설명" >
<img  src="/static/imghwm/default1.png" data-src="img/x1.png" class="lazy" alt="Sublime Text 플러그인 Emmet 사용법에 대한 자세한 설명" >

• 删除标签：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 중국어 웹사이트의 기타 관련 기사를 참조하세요!