Emmet grammar rules

Emmet sketch of HTML syntax rules

Emmet- write HTML / CSS coming fly

In the process of front-end development, the most time-consuming job is to write HTML, CSS code. A bunch of tags, attributes, such as brackets, headache. It is recommended that a Emmet grammatical rules, so that when you write cool to fly, can greatly improve writing code, just knock one line of code you want to be able to generate the full HTML structure, the following will explain how to use.

Emmet is a plug-in, as long as the installation of his editor can be used, most editors can use the grammar rules, we usually develop Sublime Text, Eclipse, Notepad ++, VS code, Atom, Dreamweaver, etc. editors can use.

First to an example:

<div id="box">
    <p class="title"></p>
    <ul class="list">
        <li class="child1">我是第1个</li>
        <li class="child2">我是第2个</li>
        <li class="child3">我是第3个</li>
    </ul>
    <div id="box2"></div>
</div>

The general structure of HTML, how long you need to break out of it?

I just need a few seconds , write this statement, press the keyboard Tabkey or press Enter to see the structure of the image above

div#box>p.title+ul.list>li.child$*3{我是第$个}^div#box2

Is not so cool quickly ~ ah, only one line of code to generate a complex HTML structure, and the id, class, corresponding to the content

He began to explain grammar

1, html initial structure

The configuration of FIG, will direct a lazy! => Tab solution, so that the base structure can be quickly generated, while a forget block, while preventing the wrong code entered handwriting.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2、id（#）, class（.）

id指令:# ; class指令:.

div#test

<div id="test"></div>

div.test

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

3, the child node (>), sibling (+), upper 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 (here ^is connected to lithe back so the liupper level, and ulbecame a brotherhood, of course, two ^^ is on a higher level)

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

4. Repeat (*)

重复指令：*

div * (* 5 Adding a digital representation of the number of elements is repeated back number )

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

5, a packet (())

分组指令：()

div> (ul> li> a) + div> p (inside the braces is a block of code, and represents the hierarchy of nested inside and the outside of the bracket independent)

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

6, property ([attr]) - id, class has less how can attribute it

属性指令：[]

a [href = '###' name = 'xiaoA'] ( the square brackets form fill attribute value pairs, and separated by spaces )

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

7, No.

ul> li.test $ * 3 ($ A representative number, but on the back * Digital represents increments from 1 to the requested figures)

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

note:

$ A representative of a number, a $$ is double-digit, and so can form $ (1) $$ (01), $$$ (001).

If you want to customize the increments from a few words on the use of: $ @ + digital

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

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

8, the text ({})

文本指令：{}

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

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

9, implicit tag

This tag has no instruction, but may not use the input portion of the label tab, direct input instruction, to identify the parent tag.

E.g:.test

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

E.g:ul>.test$*3

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

E.g: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>

and many more…

Privacy tab has the following:

li: for ul and ol in
tr: a table, tbody, thead and the tfoot
td: tr for the
option: used to select and optgroup in

Original link: https: //blog.csdn.net/qq_33744228/article/details/80910377