post score 0 times, average 0.0

I once saw an academic who entered a strange code on PHP-Storm. When he pressed the Tab key, something magic happened.

If HTML is also a programming language, it is privately thought that Html will be the most popular programming language we have come into contact with.Someone may not know what HTML (Hypertext Markup Language) is, but when he first opened the web browser to browse the web in his life, he and the HTML began to humble.... But when he didn't know it was very colorful. Behind the web page is the silent support of the HTML language; HTML+JS+CSS is the front-end three languages.If we compare web pages to humans, HTML gives people skeletons, CSS unknowns give flesh and blood, even clothes and clothing, and JS gives him the soul of sports. This article starts with HTML. The basic knowledge of HTML is beyond the scope of this article. You know, Google.Here, I mainly talk about how to quickly build up the skeleton of HTML. Thinking of HTML as a skeleton is not my whim. I'm just telling myself to write HTML pages with a sense of framework.It goes without saying that my previous HTML code was patchwork.Wherever it is wrong, efficiency is low.Positive arrow + tag name + reverb arrow This repeated code, it feels tired to write more.So is there any quick way for us to focus on the architecture of HTML instead of the complicated html language itself?

Use Emmet Tab

Emmet's predecessor was the famous Zen coding. If you are engaged in web front-end development, the plug-in must not be unfamiliar.It uses the syntax of the imitation CSS selector to generate code, greatly speeding up the writing of HTML/CSS code

Emmet's grammatical guests are still just getting started. Here is a few examples to give you a few, more professional introduction and tutorials, to recommend the following article: http://www.iteye.com/news/27580 I will not copy and paste it here.

  • ** Enter "!" or "html:5" and press Tab: **

Emmet gracefully builds the Html skeleton * ** Input element name and ID continuously, for example, input p.foo: ** There are some more complex usages for you to study on your own. We don't go into details here, because my role is to get started and get everyone's interest.

** To witness miracles, suggest that you try it yourself! !**

An example: implementation list

The effect that I want to achieve is as follows: In accordance with the awareness of building a skeleton, we have to figure out what the structure of this list looks like: ** The outermost one unordered list, this unordered list each list item nested an ordered list , This ordered list has two list items, each list item contains an unordered list**

Emmet syntax is as follows:

 

Tab about:

Emmet gracefully builds the Html skeleton

Then fill in the text

 

Effect preview

>

  • Javascript
    1. Chapter One
      • Const
      • Let
    2. Chapter two
      • Function
      • Object
  • Java
    1. Chapter One
      • Class
      • Package
    2. Chapter two
      • Private
      • Public

Reference article: * http://www.iteye.com/news/27580 * http://www.powerxing.com/emmet-syntax-cheatsheet/

  
 

This article has been printed on copyright and is protected by copyright laws. It must not be reproduced without permission.If you need to reprint, please contact the author or visit the copyright to obtain the authorization. If you feel that this article is useful to you, you can click the "Sponsoring Author" below to call the author!

Reprinted Note Source: Baiyuan's Blog>>http://wangbaiyuan.cn/en/emmet-elegantly-set-up-html-skeleton-2.html

Post comment

Style

No Comment

登录

Forget password?

您也可以使用第三方帐号快捷登录

切换登录

注册

TW