整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
1.基本html结构
2.生成div加类名的快捷键
3.带类名的div
4.带id的div
5.属性【】
6.后代>
7.兄弟+
8.上级^
9.乘法*
10.文本{}
注意：这里输入“！”+回车键前，需要清空原来生成的基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html><div class="list">
<div class="item_1"></div>
<div class="item_2"></div>
<div class="item_3"></div>
<div class="item_4"></div>
<div class="item_5"></div>
<div class="item_6"></div>
</div><div class="wrapper"></div><div id="wrapper"></div><span title="test"></span><span title="test"></span><div></div>
<p></p>
<span></span><div><span></span></div>
<i></i><ul>
<li></li>
<li></li>
</ul><div><span>这是文本</span></div>ublime text 文本编辑软件，软件小巧简洁，运行速度快是一款非常受人欢迎的代码编辑工具。
使用Sublime text，尤其是安装了强大的插件——emmet后，将拥有更加强大的代码自动补全功能。
如何快速生成html网页结构：只需一个!+Tab键，就生成一个HTML页面。
Sublime Text快速构造HTML页面
具体方法如下：
1. 安装sublime
2. 打开sublime text 3，按CTRL + `或者在菜单中选择View > Show Console，可打开控制台——也就是下面的一条输入框。
3. 在输入框中复制粘贴下以下代码：
import urllib.request,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
然后回车。这时可以看到鼠标变成了旋转的彩色圆圈，稍等片刻，一些代码出现在了控制台的上面。重启sublime text 3。
安装emmet插件
4. 在sublime text 3中按下快捷键CTRL + SHIFT + P
或者在菜单中选择Tools > Command Palette…
5. 在弹出的输入框的自动提示中选择Package Control: Install Package。
6. 输入Emmet并点击。此时emmet开始安装啦。等待几分钟，待最下面一行显示几行line，几个column时，emmet就算装好了。再次重启sublime text 3。
SCode中有一些快捷编辑HTML的方法，能大大提高工作效率，在这里分享给大家，权当抛砖引玉，欢迎有更多的朋友分享更多的技术知识。
1.输入html:5，然后按tab键或回车（Enter）键，效果如下：
注：输入感叹号"!"，然后按Tab键或者回车（Enter）键也可以生成html骨架。
2.输入link:css引入css样式文件，link:favicon引入网站logo，输入script:src引入js
3.输入标签名自动补齐
直接输入标签名后回车
4.使用"#“输入id，”.“输入class，”[]"输入属性
<!-- 输入div#main回车 -->
<div id="main"></div>
<!-- 输入div.content回车 -->
<div class="content"></div>
<!-- 输入div#main.content回车 -->
<div id="main" class="content"></div>
<!-- img[src=1.jpg][alt=pic1] -->
<img src="1.jpg" alt="pic1">5.使用">“输入嵌套标签，”+" 输入并列的兄弟标签，"^"上级元素
<!-- 输入div#parent>div#child回车 -->
<div id="parent">
<div id="child"></div>
</div><!-- 输入div#bro1+div#bro2回车 -->
<div id="bro1"></div>
<div id="bro2"></div><!-- 输入div#sup>div#child+div#bro^div#sub回车 -->
<div id="sup">
<div id="child"></div>
<div id="bro"></div>
</div>
<div id="sub"></div>6.使用{}输入标签中的文本
<!-- div#main{input sth here} -->
<div id="main">input sth here</div>7.使用"()"对标签分组及使用"*"生成多个相同的标签
<!-- (div#list1>ul>li*2)+(div#list2>ul>li*3) -->
<div id="list1">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div id="list2">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>8.使用自增符号$
<!-- $ 自增符号 -->
<!-- ul>li*3>img[src=./imgs/$.jpg][alt=img$] -->
<ul>
<li><img src="./imgs/1.jpg" alt="img1"></li>
<li><img src="./imgs/2.jpg" alt="img2"></li>
<li><img src="./imgs/3.jpg" alt="img3"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$$.jpg][alt=img$$] -->
<ul>
<li><img src="./imgs/01.jpg" alt="img01"></li>
<li><img src="./imgs/02.jpg" alt="img02"></li>
<li><img src="./imgs/03.jpg" alt="img 03"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$$$.jpg][alt=img$$$] -->
<ul>
<li><img src="./imgs/001.jpg" alt="img001"></li>
<li><img src="./imgs/002.jpg" alt="img002"></li>
<li><img src="./imgs/003.jpg" alt="img003"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$$@4.jpg][alt=img$$@4] -->
<ul>
<li><img src="./imgs/04.jpg" alt="img04"></li>
<li><img src="./imgs/05.jpg" alt="img05"></li>
<li><img src="./imgs/06.jpg" alt="img06"></li>
</ul>依此类推……
以上这些快捷操作是因为VS Code自带有Emmet插件。
Emmet插件非常强大，还有很多用法，大家还知道哪些呢，期待大家的分享。
*请认真填写需求信息，我们会在24小时内与您取得联系。
