Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to use Emmet grammar rules to achieve sketch in HTML". The content is detailed, the steps are clear, and the details are handled properly. I hope this "how to use Emmet grammar rules to achieve sketch in HTML" article can help you solve your doubts.

Emmet is a plug-in, as long as you can install his editor can be used, most editors can use this syntax rules, we usually develop Sublime Text, Eclipse, Notepad++, VS code, Atom, Dreamweaver and other editors can be used.

The installation method is the same as the usual plug-in installation. Search for this emmet plug-in installation. Each editor is installed in a different way. Please try it individually.

Let's start with the grammar. The initial structure of 1:html.

The structure in the following picture, lazy will be a direct one! = > Tab solution, which can quickly generate the basic structure, while preventing handwriting from forgetting a block of code and entering the wrong code.

2:id (#), class (.)

Id instruction: #; class instruction:.

Div#test

Div.test

3: child node (>), sibling node (+), parent node (^)

Child node instruction: >; sibling node instruction: +; parent node: ^

Div > ul > li > p

Div+ul+p

Div > ul > Li ^ div (here ^ is connected after li, so at the upper level of li, it becomes a brother relationship with ul, of course, the two ^ ^ are superiors)

4: repeat (*)

Repeat instruction: *

Div*5 (add a number after the * sign to indicate the number of duplicate elements)

5: group (())

Group instruction: ()

Div > (ul > li > a) + div > p

(the content inside the parentheses is a block of code, which has nothing to do with the inner nesting and outer hierarchy of the parentheses.)

Explanation: if you don't add parentheses here, guess that a+div so div is brotherly with an and will be included in li.

Li.test$*3 ($represents a single digit, followed by a * number that is incremented from 1 to a filled in number)

Note:

A $represents a single digit, $$is a double digit, and so on can form $(1), $(01), $(001).

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

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

7: text ({})

Text instruction: {}

Ul > li.test$*3 {Test $} ({fill in the contents, which can be used in combination with $})

Test 1 Test 2 Test 38: implicit tags

There is no instruction for this tag, but part of the tag can identify the parent tag by entering the instruction directly without using the input tag.

For example: .test

For example: ul > .test $* 3

For example: select > .test $* 5

The privacy tags are as follows:

Li: used in ul and ol

Tr: used in table, tbody, thead, and tfoot

Td: used in tr

Option: used in select and optgroup

After reading this, the article "how to use Emmet grammar rules to achieve sketching in HTML" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.