Learn the front-end template engine jade (1)_html/css_WEB-ITnose

1. Why should you learn jade?

1. Usually when most front-end development workers first enter front-end development, they simply write html pages and then throw them to the back-end development. Developed to embed templates.
2. For the increasingly large front-end pages, still using the old string splicing method to embed HTML content is no longer suitable for the current development trend.
3. Without further ado, let’s get straight to the point.

1. jade is based on the development environment of nodejs, so we must first install nodejs. The installation method of nodejs is actually quite complicated, so please go to Baidu or Google yourself. To save trouble, you can directly go to the official website of nodejs to download nodejs. Just install the installation package directly.
2. The second step is to install the npm package management tool. In the node environment, it is impossible to work without grunt installed.
3. Start installing the jade plug-in. The following is the installation command.

1. First we create a folder called jade, and then create a jade file called jade.jade.

　2. We write jade-scale template code in the jade file, which is actually easy to understand.

　3. The above code is estimated to be understandable by everyone. It is to create a regular front-end html file, but the specification is the jade specification, and then we can enter the cmd command line tool cd to The current folder, and then violently compile the current jade file, you will see that a compressed html file will be generated in the same directory.

4. If it is compressed, you can uncompress it by adding -P. If it is troublesome to enter the command line every time you change the template, we can add jade - P -w jade.jade Add a -w to turn on the monitoring mode. Every time you change the template, the html file will be automatically compiled.

　5. Let’s take a look at the generated html file now. Has a normal html dom tree been generated?

1. As you can see from the picture, child elements must be indented.
2. Labels and text must have blank lines.