文章目录
解决小问题
安装VScode并使用Miniconda环境:
参考:
视频-教你配置Python+Miniconda
文章-如何在vs code中配置miniconda
需要在插件市场安装3个插件,python,python for Vscode, python extension pack.
文件-首选项-设置-功能-终端,在setting.json中编辑,写入
"python.pythonPath": "D:/ProgramData/Miniconda3/envs/job_0802_web_vsc/python.exe",
正文参考:
Emmet插件使用方法总结
官方小抄: Emmet Documentation
Emmet的前身是大名鼎鼎的Zen coding.
VScode的emmet没反应
正常情况下,创建一个html的文件: 敲入!
,此时会有蓝色部分出现,表示命令生效,可以转换,然后按一下Enter就会出现h5的基本框架。
但是,它没有出现!原因和解决方案如下:
VScod配置
设置VScode根据窗口大小 自动换行:
Ctrl+,
-搜索editor.wordWrap
-on
小样例: div
下面操作,是按下Tab(如果不行,试试Enter)发生的:
-
创建一个html的文件: 敲入
!
,然后按一下tab就会出现h5的基本框架。 -
div
到<div></div>
-
div>div
到<div> <div></div> </div>
其中>
表示后面要生成的内容是当前标签的后代 -
div.outer
到<div class="outer"></div>
. 甚至,直接.outer
就可以(看下面自动生成类名) -
ul>li*2
会被转译成:
复杂化: 试试nav>ul>li*5
,更多参考最后一部分练习
>
表示后面要生成的内容是当前标签的后代
*
表示想重复生成的份数(更强大的看下面生成内容编号)
a:link
得到<a href="http://"></a>
类似的,
script:src
得到<script src=""></script>
link
得到<link rel="stylesheet" href="">
类似的,
img
得到<img src="" alt="" />
基本上是转移的~
生成兄弟,父
下面操作,是按下Enter发生的:
div+p+bq
,兄弟元素
+
表示后面的元素和前面的元素是兄弟元素
<div></div>
<p></p>
<blockquote></blockquote>
div+div>p>span+em^bq
,父元素
X^Y
,Y的等级与X的父元素一样
不知为什么,copy的按下Enter不能显示,手打的才可以
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
若要提升2级,即把Y提升到X的父元素的父元素一级,用^^
自定义类名,id
Emmet 默认的标签为 div ,如果我们不给出标签名称的话,默认就生成 div 标签。
但是,Emmet会根据父标签进行判定。
比如在<ul>中输入.item,就会生成<li class=“item”>。
ul>.item
,指定是li元素的类名
.
表示生成的是class='XXX’属性
<ul>
<li class="item"></li>
</ul>
- .box.outer.border,多个类名
<div class="box outer border"></div>
#name
自动生成id=name
#
表示生成的是id='XXX’属性
#name
,生成id
<div id="name"></div>
- 连一起用:
.item#name
<div class="item" id="name"></div>
直接明确生成的结构
()
用于分组,这样可以更加明确要生成的结构,特别是层次关系
(.foo>h1)+(.bar>h2)
,生成:
<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>
生成内容编号
$
表示对生成内容依次编号
只出现一个的话,就从1开始。
如果出现多个,就从0开始。
如果我想生成三位数的序号,那么要写三个$
ul>li.item$*3
,生成item1,…
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
- 高级使用
ul>li.item${item$}*3
<ul>
<li class="item1">item1</li>
<li class="item2">item2</li>
<li class="item3">item3</li>
</ul>
ul>li.item$$*3
,生成item01
<ul>
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>
</ul>
反向生成序号
这里先加入一个
@
标记后,再加入一个-
号
ul>li.item$@-*3
,生成
<ul>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
指定起始数,不从1开始
item@3*5
,表示从3开始,生成5个item;
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>
当然,这可以反着来,试一下ul>li.item$@-3*5
<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>
自定义属性,标签文本
自定义属性
[]
内放想要自定义的属性,可以先不给值
标签[attr=value] 中括号里面的内容是你想添加的属性
td[rowspan=2 colspan=3 title]
生成:
<td rowspan="2" colspan="3" title=""></td>
自定义文本
{}
内放想要添加的文本
a{这是个链接}
,生成
<a href="">这是个链接</a>
p>{Click }+a{here}+{ to continue}
生成
<p>Click <a href="">here</a> to continue</p>
练习
3个小样例
#content>.article>h1.ok[title=parpername][style=color:#000;]+h3.no[title=subname][style=color:#fff;]+p.words
.header>ul.nav>(li>a[href style=block]>span{name})*5
table>(th>td.col$*3)+(tb>(tr.row$$>td.col$)*3)+tf>td*3
注意事项
- css中
p
表示%
w100
转为width:100px;
w100p
转为width:100%;
e
表示em, r
表示 rem
命令:h100r 结果:height: 100rem;
复杂点:
命令:
h10p+m5e
结果:height: 10%;margin: 5em;