HTMLスケッチのためのEmmet構文ルールの実装

フロントエンドの開発プロセスにおいて、最も時間を要する作業はHTMLとCSSのコードを書くことである。タグや属性、括弧などがたくさんあって、頭が痛くなる。ここでは、推奨されるEmmetの構文規則は、あなたが飛ぶように時間を書くことができ、大幅にコードを書くことを改善することができ、唯一のあなたが望む完全なHTML構造を生成するコードの行をノックする必要があり、以下は、使用する方法を紹介します。

Emmetは、インストールできるエディタであれば、ほとんどのエディタで使用できるプラグインで、構文ルールを使用することができます。 Sublime Text サブライムテキスト {エクリプス エクリプス エクリプス Notepad++ メモ帳 VS code コード Atom ,

Dreamweaver
and other editors can be used.
The installation method is the same as the usual installation of plug-ins, search for this emmet plug-in installation, each editor installation method is different, please try each
Let's start with an example.
How long would it take you to type out this normal HTML structure?


I only need
a few seconds
to write the following statement and press the keyboard
Tab
key to see the structure in the figure above
div#box>p.title+ul.list>li.child${I am the $th}*3^div#box2


Isn't it cool how quickly ~~ ah ~ ah ~, just one line of code generates a complex HTML structure, and the id, class, and content all correspond to the
Let's start explaining the syntax
1: Initial structure of html
The structure in the figure below, the lazy ones are directly a ! => Tab solution, so that you can quickly generate the basic structure, while preventing handwriting forget a block of code, enter the wrong code.
2: id(#),class(.)
id directive:# ; class directive:.
div#test
<div id="test"></div>

div.test
<div class="test"></div>

3: child node (>), sibling node (+), superordinate node (^)
child node directive:> ; sibling node directive:+ ; parent node:^
div>ul>li>p
<div>
   <ul>
     <li>
       <p></p>
     </li>
   </ul>
 </div>


div+ul+p
<div></div>
<ul></ul>
<p></p>


div>ul>li^div
 (where the
^
is attached to the
li
so the
li
is one level up from the
ul
(which is a sibling relationship, and of course the two ^^ are superiors)
<div>
   <ul>
     <li></li>
   </ul>
   <div></div>
 </div>


4: Repeat (*)
Repeat command:*
div*5(
Add a number after the * sign to indicate the number of duplicate elements
)
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>


5: Grouping (())
Grouping instruction: ()
div>(ul>li>a)+div>p


(the
The content inside the brackets is a block of code, indicating that it is independent of the hierarchy of nesting inside and outside the brackets
)
<div>
   <ul>
     <li><a href=""></a></li>
   </ul>
   <div>
     <p></p>
   </div>
 </div>


Explanation: Here, without the brackets, guessing that
a+div
so that the div is a sibling relationship with a, will be included in the li. Understand it haha
 <div>
   <ul>
     <li>
       <a href=""></a>
       <div>
         <p></p>
       </div>
     </li>
   <

6: attributes ([attr]) - id, class have how to have less attributes
attribute directive: []
a[href='##' name='xiaoA'] (
The form of the attribute key-value pair in parentheses, separated by spaces
)
<a href="####" name="xiaoA"></a>


###6: number ($)


Numbering command: $
ul>li.test$*3 (
$ represents a single digit, followed by * digits that increment from 1 to the number filled in
)
 <ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>


Note
A $$ represents a single digit, $$$ is two digits, and so on to form $$(1), $$$(01), $$$(001)
If you want to customize the increment from several, use: $@+number*number


For example: ul>li*3.test$@3
 <ul>
   <li class="test3"></li>
   <li class="test4"></li>
   <li class="test5"></li>
 </ul>


7: Text ({})
Text command: {}
ul>li.test$*3{test$} (
{fill in the content inside, can be used in combination with $ oh}
)
<ul>
  <li class="test1">test1</li>
  <li class="test2">test2</li>
  <li class="test3">test3</li>
</ul>


8: Implicit tags
This tag does not have a directive, but rather some of the tags can be recognized as parent tags by typing the directive without using the input tag.
For example.
.test
<div class="test"></div>


Example.
ul>.test$*3
 <ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>


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


etc...


The privacy tags are as follows.
li: used in ul and ol
tr: used in table, tbody, head and tfoot
td: used in tr
option: used in select and optgroup
And finally.
See it's useless, operate it a few times, and in a few minutes you'll be able to master these instructions and jack the code on the fly
This article about the implementation of the Emmet syntax rules for HTML sketching is here, for more information about HTML Emmet syntax, please search the previous articles of the Codedevlib or continue to browse the following related articles, I hope you will support the Codedevlib more in the future!

div#box>p.title+ul.list>li.child${I am the $th}*3^div#box2

<div class="test"></div>

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

li

ul

a+div

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

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

.test

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

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



Note


A $$ represents a single digit, $$$ is two digits, and so on to form $$(1), $$$(01), $$$(001)


If you want to customize the increment from several, use: $@+number*number

For example: ul>li*3.test$@3

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



7: Text ({})


Text command: {}


ul>li.test$*3{test$} (
{fill in the content inside, can be used in combination with $ oh}
)

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



8: Implicit tags


This tag does not have a directive, but rather some of the tags can be recognized as parent tags by typing the directive without using the input tag.


For example.
.test

<div class="test"></div>



Example.
ul>.test$*3

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



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



etc...

The privacy tags are as follows.



li: used in ul and ol


tr: used in table, tbody, head and tfoot


td: used in tr


option: used in select and optgroup


And finally.
See it's useless, operate it a few times, and in a few minutes you'll be able to master these instructions and jack the code on the fly


This article about the implementation of the Emmet syntax rules for HTML sketching is here, for more information about HTML Emmet syntax, please search the previous articles of the BinaryDevelop or continue to browse the following related articles, I hope you will support the BinaryDevelop more in the future!