HTML快速创建文档标签框架
emmet创建, pycharm自带
新建一个HTML文档，输入“!”或“html:5”，然后按Tab键：
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body></body>
</html>
基本语法：
1、生成后代元素：> 大于号表示后面要生成的内容是当前标签的后代
命令：nav>ul>li
每个命令输完后按下Tab键即可快速得到代码
<div><ul><li><span></span></li></ul>
</div>
2、生成兄弟元素：+ 加号表示后面的元素和前面的元素是兄弟元素
命令：div+p+bq 得到代码如下：
<div></div>
<p></p>
<blockquote></blockquote>
3、生成上级元素：^ 表示后面的元素与前面的元素的父元素是平级，即兄弟元素。一个^表示提升一个层级，两个提升两级
命令：div+div>p>span+em^bq 得到代码如下：
<div></div>
<div><p><span></span><em></em></p><blockquote></blockquote>
</div>
命令：div+div>p>span+em^^bq 得到代码如下：
<div></div>
<div><p><span></span><em></em></p>
</div>
<blockquote></blockquote>
4、生成类名： . Emmet 默认的标签为 div ，如果我们不给出标签名称的话，默认就生成 div 标签。Emmet会根据父标签进行判定。比如在<ul>中输入.item，就会生成<li class="item"></li>。
命令：.container 得到代码如下：
<div class="container"></div> 直接在body输入.container<div> div 下输入还是div<div class="item"></div>
</div><ul> 在ul标签下输入item<li class="item"></li>
</ul>
如果想生成多个类名可连续写
命令： .container.wrapper.more 得到代码如下：
containerwrappermore 直接写回不识别后面的内容 如下:
<div class="container"></div>wrappermore<div class="container wrapper"></div>more 正确
5、生成ID：#
命令：#container 得到代码如下： 与上方用法一样
<div id="container"></div><ul><li id="container"></li>
</ul>
6、生成分组：() 用括号进行分组，这样可以更加明确要生成的结构，特别是层次关系
命令：(.foo>h1)+(.bar>h2) 得到代码如下：分组是一次性能生成多个div class或id 标签
<div class="foo"><h1></h1>
</div>
<div class="bar"><h2></h2>
</div>
7、重复生成多份：* *号后面是想重复生成的份数
命令：ul>li*5 得到代码如下：
<ul><li></li><li></li><li></li><li></li><li></li>
</ul>
8、对生成内容依次编号：$ 就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个
命令：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>
只能这样单调的生成序号？对于强大的 Emmet 来说，肯定不会了，我们也可以在 $ 后面增加 @-来实现倒序排列：
命令：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>
同样，我们也可以使用 @N 指定开始的序号
命令：ul>li.item$@3*5 得到代码如下：
<ul> 其实是这样的, 从3开始, 累加5个数<li class="item3"></li><li class="item4"></li><li class="item5"></li><li class="item6"></li><li class="item7"></li>
</ul>
9、生成自定义属性：[attr] 中括号里面的内容是你想添加的属性
命令：td[rowspan=2 colspan=3 title]得到代码如下： td是可以换成任意标签, 需要注意的是, 中括号内容必须是标签内有的属性
<td rowspan="2" colspan="3" title=""></td>
div[id style]----> <div id="" style=""></div>
10、生成文本内容：{} 大括号里面是你想添加的文本内容
命令：a{Click me} 得到代码如下：
<a href="">click me</a>
还可以这么用 p>{Click }+a{here}+{ to continue} 得到代码如下：
<p>click<a href="">here</a>to continue</p>
注意： 在写命令的时候，你可能为了代码的可读性，使用一些空格什么的排版一下，这将会导致代码无法使用。但是{}[]中可存在空格
更多使用方法
输入inp
<input type="text" name="" id="">input:url url可选, 可以是很多值
如: search, hidden, text, email, url, password, datetime, date, month, week, time, ...
<input type="url" name="" id="">select
<select name="" id=""></select>option
<option value=""></option>textarea
<textarea name="" id="" cols="30" rows="10"></textarea>最后一个 .header>ul.nav>li*5>a[style=color:#fff]>span{name}
<div class="header"><ul class="nav"><li><a href="" style="color:#fff"><span>name</span></a></li><li><a href="" style="color:#fff"><span>name</span></a></li><li><a href="" style="color:#fff"><span>name</span></a></li><li><a href="" style="color:#fff"><span>name</span></a></li><li><a href="" style="color:#fff"><span>name</span></a></li></ul>
</div>
解释;
pass