Sublime Text 플러그인 Emmet 사용법에 대한 자세한 설명-HTML 튜토리얼-php.cn

요약:

태그 생성

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

2. ID가

class 요소 " >3. class 요소

) 4. 하위 요소 생성: >

5. 형제 요소 생성: +

예:

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

예: " >: ()예:

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

快捷键

生成测试文本

집

웹 프론트엔드

HTML 튜토리얼

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

高洛峰

Mar 26, 2017 am 10:14 AM

sublime

요약:

설치 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 . 번호 추가: $

<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

<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와 같은 퍼지 검색을 사용하여 일치됩니다.

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

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

<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>

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

<a href="http%20://www.php.cn/wiki/919.html" target="_blank">float<li>: 왼쪽;</li></a>

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>;

<a href="http://www%20.php.cn/wiki/927.html" target="_blank">디스플레이<li>: 테이블;</li></a>

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

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

본 웹사이트의 성명

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7563

Cakephp 튜토리얼

1385

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

HTML을 열려면 무엇을 사용해야 합니까? Apr 21, 2024 am 11:33 AM

HTML 파일을 열려면 Google Chrome 또는 Mozilla Firefox와 같은 브라우저를 사용해야 합니다. 브라우저를 사용하여 HTML 파일을 열려면 다음 단계를 따르십시오. 1. 브라우저를 엽니다. 2. HTML 파일을 브라우저 창으로 끌어다 놓거나 파일 메뉴를 클릭하고 열기를 선택합니다.

Python 프로그래밍에 적합한 소프트웨어는 무엇입니까? Apr 20, 2024 pm 08:11 PM

초보자에게는 IDLE, Jupyter Notebook을 권장하고, 중/고급 학생에게는 PyCharm, Visual Studio Code, Sublime Text를 권장합니다. Cloud IDE인 Google Colab과 Binder는 대화형 Python 환경을 제공합니다. 다른 권장 사항으로는 Anaconda Navigator, Spyder 및 Wing IDE가 있습니다. 선택 기준에는 기술 수준, 프로젝트 규모 및 개인 선호도가 포함됩니다.

HTML로 로컬 파일을 여는 방법 Apr 22, 2024 am 09:39 AM

HTML을 사용하여 다음과 같이 로컬 파일을 열 수 있습니다. .html 파일을 만들고 jQuery 라이브러리를 가져옵니다. 사용자가 파일을 선택할 수 있는 입력 필드를 만듭니다. 파일 선택 이벤트를 수신하고 FileReader() 객체를 사용하여 파일 내용을 읽습니다. 읽은 파일 내용을 웹 페이지에 표시합니다.

복사한 코드를 Python에서 사용하는 방법 Apr 20, 2024 pm 06:26 PM

Python에서 복사한 코드를 사용하는 단계는 다음과 같습니다. 코드를 복사하여 텍스트 편집기에 붙여넣습니다. Python 파일을 만듭니다. 명령줄에서 코드를 실행합니다. 코드의 용도와 작동 방식을 이해합니다. 필요에 따라 코드를 수정하고 다시 실행하세요.

파이썬에서 py 파일을 만드는 방법 May 05, 2024 pm 07:57 PM

Python에서 .py 파일을 만드는 단계: 텍스트 편집기(예: 메모장, TextMate 또는 Sublime Text)를 엽니다. 새 파일을 만들고 들여쓰기와 구문에 주의하면서 Python 코드를 입력합니다. 파일을 저장할 때 .py 확장명(예: my_script.py)을 사용하세요.

HTML을 열려면 무엇을 사용할 수 있나요? Apr 21, 2024 am 11:36 AM

HTML 파일은 브라우저(예: Chrome, Firefox, Edge, Safari, Opera)를 사용하여 열 수 있습니다. HTML 파일(.html 또는 .htm 확장자)을 찾아 "열기"를 선택합니다. ; 브라우저를 사용하려는 파일을 선택하십시오.

HTML 빈 문서 만들기 및 열기 Apr 09, 2024 pm 12:06 PM

HTML 문서 만들기: 텍스트 편집기를 사용하여 HTML 구조를 입력하고 .html 파일로 저장합니다. HTML 문서 열기: 파일을 두 번 클릭하거나 브라우저에서 파일 > 열기 옵션을 사용합니다. 실제 사례: 새 HTML 파일을 만들고 제목, 스타일시트, 콘텐츠를 추가하고 .html 파일로 저장합니다.

사용하기 쉬운 HTML 편집기 소프트웨어는 무엇입니까? Apr 17, 2024 am 04:54 AM

요약하자면 다음 HTML 편집기는 높은 평가를 받고 있습니다. Visual Studio Code: 크로스 플랫폼, 풍부한 기능, 무료 오픈 소스. Sublime Text: 고성능, 고도로 사용자 정의 가능한 유료 소프트웨어입니다. Atom: 크로스 플랫폼, 확장 가능, 오픈 소스, 무료. 브래킷: 프런트엔드 개발 전용, 직관적인 인터페이스, 오픈 소스 및 무료. Notepad++: 가볍고 빠르며 강력한 오픈 소스이며 무료입니다. HTML 편집기를 선택할 때는 플랫폼 호환성, 기능, 확장성, 가격, 사용자 친화성과 같은 요소를 고려하세요.

See all articles

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

요약:

태그 생성

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

2. ID가

3. class 요소

) 4. 하위 요소 생성: >

5. 형제 요소 생성: +

6. 예:

<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
로그인 후 복사
`ul>li*5`8. 사용자 정의

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

예:

: ()예:

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

快捷键

生成测试文本

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제

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

요약:

태그 생성

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

2. ID가

3. class 요소

) 4. 하위 요소 생성: >

5. 형제 요소 생성: +

6. 예:

<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>로그인 후 복사 ul>li*58. 사용자 정의

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

예:

: ()예:

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

快捷键

生成测试文本

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제

<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
로그인 후 복사
`ul>li*5`8. 사용자 정의