알 수 없는 Emmet 문법 규칙

이 글에서는 HTML 단축형 Emmet의 문법 규칙을 자세히 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Emmet—HTML/CSS 작성이 너무 빠릅니다

프론트 엔드 개발 과정에서 가장 시간이 많이 걸리는 작업은 HTML 및 CSS 코드 작성입니다. 태그, 속성, 괄호 등이 너무 많아서 골치 아픈 일입니다. 다음은 코드 작성을 크게 향상시킬 수 있는 Emmet 문법 규칙입니다. 다음은 원하는 완전한 HTML 구조를 생성하기 위해 코드 한 줄만 입력하면 됩니다. 그것을 사용하십시오.

Emmet은 이를 설치할 수 있는 모든 편집기에서 사용할 수 있는 플러그인입니다. 대부분의 편집자는 이 문법 규칙을 사용할 수 있습니다. 우리는 일반적으로 Sublime Text, Eclipse, Notepad++, VS code, Atom, Dreamweaver 등과 같은 편집기를 개발합니다. 모든 기기를 사용할 수 있습니다.

설치 방법은 일반적인 플러그인 설치와 동일합니다. 설치하려면 이 emmet 플러그인을 검색하세요. 편집기마다 설치 방법이 다릅니다.

1: html 초기 구조

아래 그림의 구조는 게으른 사람들이 그냥 사용할 것입니다! => 기본 구조를 빠르게 생성하고, 손으로 작성할 때 특정 코드 블록을 잊어버리거나 잘못된 코드를 입력하는 것을 방지할 수 있는 탭 솔루션입니다.

2: id(#), 클래스(.)

id 명령: #; 클래스 명령: .

• p#test

<p id="test"></p>

• p.test

<p class="test"></p>

3: sub 노드(>), 형제 노드(+), 상위 노드(^)

하위 노드 명령:>; 형제 노드 명령:+; 상위 노드:^

• p>ul>li>p

<p>
   <ul>
     <li>
       <p></p>
     </li>
   </ul>
 </p>

• p+ul+p

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

• p>ul>li^p (여기서 ^는 li 다음에 연결되어 있어서 li보다 한 단계 위이고, ul과 형제가 됐어요, 당연히 둘이죠^^ 상위 수준) Superior)

<p>
   <ul>
     <li></li>
   </ul>
   <p></p>
 </p>

4: 반복(*)

Repeat 명령: *

• p*5 (반복되는 요소 수를 나타내려면 * 뒤에 숫자를 추가하세요)

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

5: 그룹 (() )

그룹 지침: ()

• p>(ul>li>a)+p>p
  (괄호 안의 내용은 코드 블록이므로 수행할 작업이 없음을 의미) 괄호 안팎의 중첩 수준을 사용하세요)

<p>
   <ul>
     <li><a href=""></a></li>
   </ul>
   <p>
     <p></p>
   </p>
 </p>

설명: 여기에 괄호가 없으면 a+p라고 추측하세요. 따라서 p는 a의 형제이고 li에 포함됩니다. 알겠습니다 ㅎㅎ

 <p>
   <ul>
     <li>
       <a href=""></a>
       <p>
         <p></p>
       </p>
     </li>
   </ul

6: 속성([attr]) - id, class, 어떻게 속성을 생략할 수 있나요?

속성 명령: []

• a[href='###' name ='xiaoA '] (속성 키-값 쌍을 대괄호로 채우고 공백으로 구분)

<a href="###" name="xiaoA"></a>

###6: Number ($)
Numbering 명령: $

• ul>li.test$ * 3($는 한 자리를 나타내고 그 뒤의 * 숫자는 1에서 채워진 숫자까지의 증가분을 나타냅니다.)

 <ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>

참고:

• A $는 한 자리를 나타내고 $$는 두 자리를 나타냅니다. $(1),$$(01),$$$(001)
• 시작 번호를 맞춤 설정하려면 $@+number*number
  를 사용하세요. 예: ul>li*3.test $ @3

 <ul>
   <li class="test3"></li>
   <li class="test4"></li>
   <li class="test5"></li>
 </ul>

7: 텍스트 ({})

텍스트 명령: {}

• ul>li.test$*3{Test$} ({내용을 입력하세요. $Oh와 결합 가능) })

<ul>
  <li class="test1">测试1</li>
  <li class="test2">测试2</li>
  <li class="test3">测试3</li>
</ul>

8: 암시적 태그

이 태그에는 명령어가 없지만 일부 태그는 입력 태그를 사용하지 않고 명령어를 직접 입력하여 상위 태그를 식별할 수 있습니다.

예: .test

<p class="test"></p>

예: ul>.test$*3

 <ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>

예: select>.test$*5

<select name="" id="">
  <option class="test1"></option>
  <option class="test2"></option>
  <option class="test3"></option>
  <option class="test4"></option>
  <option class="test5"></option>
</select>

잠깐...
개인정보 보호 태그는 다음과 같습니다.

• li: ul 및 ol에서 사용
• tr: table, tbody, thead 및 tfoot에서 사용
• td: tr에서 사용
• option: select 및 optgroup에서 사용

권장 학습: html 비디오 자습서

위 내용은 알 수 없는 Emmet 문법 규칙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!