Install the quick code writing plug-in emmet and html syntax

1. Emmet installation method:

Step 1: First you need to install the Package Control component for sublime text:

Press Ctrl + `to call out the console of sublime text

Paste the following code into the bottom command line and press Enter:

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installedpackagespath();os.makedirs(ipp) if not os.path.exists(ipp) else None;open( os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/' + pf.replace(' ',' ')).read())

Restart Sublime Text

If you see package control in Perferences->package settings, it means the installation is successful

Step 2: Use Package Control to install the Emmet plug-in:

If it has been installed before, you need to remove the package first, search the entire folder for emmet in the sublime root directory, and delete everything you can find.

Press Ctrl + Shift + P command pad

Enter install and then select install Package, then enter emmet to find emmet, click to automatically complete the installation.

Usage method: Adjust the completion shortcut key

Change the default button (The latest version no longer requires setting here):
In settings–package setting–emmet–key binding-user add the following:

[
{
"keys": ["tab"],
"args": {"action": "expand_abbreviation"},
"command": "run_emmet_action",
"context": [{"key": "emmet_action_enabled.expand_abbreviation"}]
}
]

Usage: Enter the abbreviation of HTML or CSS code directly in the editor, and then press the tab key to expand it into a complete code snippet.

Installation problem please wait a bit while pyV8 binary error: This is no longer required in the latest version pyv8 package

General solution:https://www.jianshu.com/p/6768a4046bd9Common solution:The latest version is like this. The official github website of emmet for sublime has accepted this problem. and solved it, but it still failed to install using package control. I just installed it twice and it worked. Uninstalled emmet and PyV8 repeatedly. The reason was a problem with pyV8.

2. HTML syntax:

Descendants:>

Abbreviation: nav>ul>li

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

Brother: +

Abbreviation: div + p + bq

<div></div>
<p></p>
<blockquote></blockquote>

Superior: ^

Abbreviation: div + div>p>span + em^bq

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

Abbreviation: div + div>p>span + em^^bq
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

Group: ()

Abbreviation: div>(header>ul>li*2>a) + footer>p

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>
Abbreviation: (div>dl>(dt + dd)*3) + footer>p

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

Multiplication: *

Abbreviation: ul>li*5

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

Auto-increment symbol: $

Abbreviation: ul>li.item$*5

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>
Abbreviation: h$[title=item$]{Header $}*3

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
Abbreviation: ul>li.item$$$*5

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>
Abbreviation: ul>li.item$@-*5

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>
Abbreviation: ul>li.item$@3*5

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

ID and class attributes

Abbreviation: #header

<div id="header"></div>
Abbreviation: .title

<div class="title"></div>
Abbreviation: form#search.wide

<form id="search" class="wide"></form>
Abbreviation: p.class1.class2.class3

<p class="class1 class2 class3"></p>

Custom attribute

Abbreviation: p[title="Hello world"]

<p title="Hello world"></p>
Abbreviation: td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>
Abbreviation: [a='value1' b="value2"]

<div a="value1" b="value2"></div>

Text: {}

Abbreviation: a{Click me}

<a href="">Click me</a>
Abbreviation: p>{Click} + a{here} + { to continue}

<p>Click <a href="">here</a> to continue</p>

Implicit tag

Abbreviation: .class

<div class="class"></div>
Abbreviation: em>.class

<em><span class="class"></span></em>
Abbreviation: ul>.class

<ul>
    <li class="class"></li>
</ul>
Abbreviation: table>.row>.col

<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

HTML

All unknown abbreviations are converted to tags, for example, foo →

Abbreviation: !

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>
Abbreviation: a

<a href=""></a>
Abbreviation: a:link

<a href="http://"></a>
Abbreviation: a:mail

<a href="mailto:"></a>
Abbreviation: abbr

<abbr title=""></abbr>
Abbreviation: acronym

<acronym title=""></acronym>
Abbreviation: base

<base href="" />
Abbreviation: basefont

<basefont />
Abbreviation: br

<br />
Abbreviation: frame

<frame />
Abbreviation: hr

<hr />
Abbreviation: bdo

<bdo dir=""></bdo>
Abbreviation: bdo:r

<bdo dir="rtl"></bdo>
Abbreviation: bdo:l

<bdo dir="ltr"></bdo>
Abbreviation: col

<col />
Abbreviation: link

<link rel="stylesheet" href="" />
Abbreviation: link:css

<link rel="stylesheet" href="style.css" />
Abbreviation: link:print

<link rel="stylesheet" href="print.css" media="print" />
Abbreviation: link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Abbreviation: link:touch

<link rel="apple-touch-icon" href="favicon.png" />
Abbreviation: link:rss

<link rel="alternate" type="application/rss + xml" title="RSS" href="rss.xml" />
Abbreviation: link:atom

<link rel="alternate" type="application/atom + xml" title="Atom" href="atom.xml" />
Abbreviation: meta

<meta />
Abbreviation: meta:utf

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
Abbreviation: meta:win

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
Abbreviation: meta:vp

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
Abbreviation: meta:compat

<meta http-equiv="X-UA-Compatible" content="IE=7" />
Abbreviation: style

<style></style>
Abbreviation: script

<script></script>
Abbreviation: script:src

<script src=""></script>
Abbreviation: img

<img src="" alt="" />
Abbreviation: iframe

<iframe src="" frameborder="0"></iframe>
Abbreviation: embed

<embed src="" type="" />
Abbreviation: object

<object data="" type=""></object>
Abbreviation: param

<param name="" value="" />
Abbreviation: map

<map name=""></map>
Abbreviation: area

<area shape="" coords="" href="" alt="" />
Abbreviation: area:d

<area shape="default" href="" alt="" />
Abbreviation: area:c

<area shape="circle" coords="" href="" alt="" />
Abbreviation: area:r

<area shape="rect" coords="" href="" alt="" />
Abbreviation: area:p

<area shape="poly" coords="" href="" alt="" />
Abbreviation: form

<form action=""></form>
Abbreviation: form:get

<form action="" method="get"></form>
Abbreviation: form:post

<form action="" method="post"></form>
Abbreviation: label

<label for=""></label>
Abbreviation: input

<input type="text" />
Abbreviation: inp

<input type="text" name="" id="" />
Abbreviation: input:hidden

Alias: input[type=hidden name]

<input type="hidden" name="" />
Abbreviation: input:h

Alias: input:hidden

<input type="hidden" name="" />
Abbreviations: input:text, input:t

Alias: inp

<input type="text" name="" id="" />
Abbreviation: input:search

Alias: inp[type=search]

<input type="search" name="" id="" />
Abbreviation: input:email

Alias: inp[type=email]

<input type="email" name="" id="" />
Abbreviation: input:url

Alias: inp[type=url]

<input type="url" name="" id="" />
Abbreviation: input:password

Alias: inp[type=password]

<input type="password" name="" id="" />
Abbreviation: input:p

Alias: input:password

<input type="password" name="" id="" />
Abbreviation: input:datetime

Alias: inp[type=datetime]

<input type="datetime" name="" id="" />
Abbreviation: input:date

Alias: inp[type=date]

<input type="date" name="" id="" />
Abbreviation: input:datetime-local

Alias: inp[type=datetime-local]

<input type="datetime-local" name="" id="" />
Abbreviation: input:month

Alias: inp[type=month]

<input type="month" name="" id="" />
Abbreviation: input:week

Alias: inp[type=week]

<input type="week" name="" id="" />
Abbreviation: input:time

Alias: inp[type=time]

<input type="time" name="" id="" />
Abbreviation: input:number

Alias: inp[type=number]

<input type="number" name="" id="" />
Abbreviation: input:color

Alias: inp[type=color]

<input type="color" name="" id="" />
Abbreviation: input:checkbox

Alias: inp[type=checkbox]

<input type="checkbox" name="" id="" />
Abbreviation: input:c

Alias: input:checkbox

<input type="checkbox" name="" id="" />
Abbreviation: input:radio

Alias: inp[type=radio]

<input type="radio" name="" id="" />
Abbreviation: input:r

Alias: input:radio

<input type="radio" name="" id="" />
Abbreviation: input:range

Alias: inp[type=range]

<input type="range" name="" id="" />
Abbreviation: input:file

Alias: inp[type=file]

<input type="file" name="" id="" />
Abbreviation: input:f

Alias: input:file

<input type="file" name="" id="" />
Abbreviation: input:submit

<input type="submit" value="" />
Abbreviation: input:s

Alias: input:submit

<input type="submit" value="" />
Abbreviation: input:image

<input type="image" src="" alt="" />
Abbreviation: input:i

Alias: input:image

<input type="image" src="" alt="" />
Abbreviation: input:button

<input type="button" value="" />
Abbreviation: input:b

Alias: input:button

<input type="button" value="" />
Abbreviation: isindex

<isindex />
Abbreviation: input:reset

Alias: input:button[type=reset]

<input type="reset" value="" />
Abbreviation: select

<select name="" id=""></select>
Abbreviation: option

<option value=""></option>
Abbreviation: textarea

<textarea name="" id="" cols="30" rows="10"></textarea>
Abbreviation: menu:context

Alias: menu[type=context]>

<menu type="context"></menu>
Abbreviation: menu:c

Alias: menu:context

<menu type="context"></menu>
Abbreviation: menu:toolbar

Alias: menu[type=toolbar]>

<menu type="toolbar"></menu>
Abbreviation: menu:t

Alias: menu:toolbar

<menu type="toolbar"></menu>
Abbreviation: video

<video src=""></video>
Abbreviation: audio

<audio src=""></audio>
Abbreviation: html:xml

<html xmlns="http://www.w3.org/1999/xhtml"></html>
Abbreviation: keygen

<keygen />
Abbreviation: command

<command />
Abbreviation: bq

Alias: blockquote

<blockquote></blockquote>
Abbreviation: acr

Alias:acronym

<acronym title=""></acronym>
Abbreviation: fig

Alias: figure

<figure></figure>
Abbreviation: figc

Alias: figcaption

<figcaption></figcaption>
Abbreviation: ifr

Alias: iframe

<iframe src="" frameborder="0"></iframe>
Abbreviation: emb

Alias: embed

<embed src="" type="" />
Abbreviation: obj

Alias: object

<object data="" type=""></object>
Abbreviation: src

Alias: source

<source></source>
Abbreviation: cap

Alias: caption

<caption></caption>
Abbreviation: colg

Alias: colgroup

<colgroup></colgroup>
Abbreviations: fst, fset

Alias: fieldset

<fieldset></fieldset>
Abbreviation: btn

Alias: button

<button></button>
Abbreviation: btn:b

Alias: button[type=button]

<button type="button"></button>
Abbreviation: btn:r

Alias: button[type=reset]

<button type="reset"></button>
Abbreviation: btn:s

Alias: button[type=submit]

<button type="submit"></button>