07emmet使用笔记

解决小问题

安装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="" />

基本上是转移的~

Emmet插件使用方法总结

生成兄弟,父

下面操作,是按下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;