Emmet syntax

Emmet： It's actually an editor plug-in .dreamweaver Bring this plug-in

First step ： newly build

 

  Choose a save path

ctrl+s

  Realization effect

  Delete the code framework and use ---emmet Grammar is common

html:5

  Realization effect

  Then you can change the title document （title）

After that body It can be used internally emmet Syntax creation html The grammatical framework of （ All need buttons TAB Key generation ）

div label identification class

div.container

 

  Realization effect

 # identification id attribute

div#container

Realization effect

 

  Context ;

>: Represents a subclass selector

.： Means directly with class Class occurrence And no label is specified. The default is div label

ul: label

list： attribute

div. ul There is no label specified in it. The default is li label

（ think ul  and li Is a pair of default combinations ）

.wrap>ul.list>.sites

 

 

  Context ;

>: Represents a subclass selector

.： Means directly with class Class occurrence

ul: label

list： attribute

+: It means brother label

.:div label

.wrap>ul.list+.sites

Realization effect  

 ^: Represents the parent element , And represents the superior element

In this case site Of div Labels and wrap Of div At the same level

.wrap>ul.list^.sites

Realization effect  

  Express div div ht p Juxtaposition

> Represents the parent container

h1 Indicates the first level title

p label

.outer>.inner>h1+p

Realization effect ： 

 div.wrap  ->p

                        ->a

                ->p( Represents the parent element a A higher level of )

	.wrap>p>a^p

 div.wrap

        ->p

                ->em

                        ->a

        ->p(a The parent of the parent )

.wrap>p>em>a^^p

---

---

(.one>h1)+(.two>h1)

html Of （） Representation grouping

grouping ： It is to regard it as a whole

+： It means juxtaposition

(div:one

        ->h1) To represent a whole

div:two

        ->h1

 

(section>.wrap>h1>p>a)+(section>.wrap>p+p)

section

        ->:div.wrap

                ->h1

                        ->p

                                ->a

section

        ->div.wrap

                ->p

                ->p

      

 

---

  Insert the attribute of the text inside the label

Use {} To insert

h1{This is heading1}+p{lorem}

  Add the class （class） Properties of ; If the label has multiple class Properties can be used

No label specified ： by div

.one.two.three

 *: It means multiplicity

ul label

        ->li label

        Juxtaposition 3 individual

ul>li*3

(section>.wrap)*3

 section

        ->div:wrap

 section

        ->div:wrap

 section

        ->div:wrap

 

  Automatic counting ：

$ Symbolic representation

$$:01 02 03

ul>li.item${item$$}*3

 ul

        ->li: attribute item1( The first one means 1 For after 2)  written words item01

 ul

        ->li: attribute item2 item02

 ul

        ->li: attribute item3 item03