07emmet使用笔记

电玩女神 2022-09-07 14:56 150阅读 0赞

### 文章目录 ###

*   *   *  解决小问题
         *   *  安装VScode并使用Miniconda环境:
             *  VScode的emmet没反应
             *  VScod配置
         *  小样例: div
     *  基本上是转移的~
     *   *  生成兄弟,父
         *   *  \`div+p+bq\`,兄弟元素
             *  \`div+div>p>span+em^bq\`,父元素
         *  自定义类名,id
         *   *  \`ul>.item\`,指定是li元素的类名
             *  \`\#name\`自动生成id=name
         *  直接明确生成的结构
         *  生成内容编号
         *   *  \`ul>li.item$\*3\`,生成item1,...
             *  反向生成序号
             *  指定起始数,不从1开始
         *  自定义属性,标签文本
         *   *  自定义属性
             *  自定义文本
         *  练习
         *   *  3个小样例
             *  注意事项

### 解决小问题 ###

#### 安装VScode并使用Miniconda环境: ####

参考:  
视频-[教你配置Python+Miniconda][Python_Miniconda]  
文章-[如何在vs code中配置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]  
[官方小抄: Emmet Documentation][Emmet Documentation]  
Emmet的前身是大名鼎鼎的Zen coding.

#### VScode的emmet没反应 ####

正常情况下,创建一个html的文件: 敲入`!`，此时会有蓝色部分出现,表示命令生效,可以转换,然后按一下Enter就会出现h5的基本框架。  
但是,它没有出现!原因和解决方案如下:  
![在这里插入图片描述][51dc2d0dc3634a39b0fbaea30f31353b.png]  
![在这里插入图片描述][b986ace5b35644b992e23853de08cc88.png]

#### 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`会被转译成:  
    ![在这里插入图片描述][f1ee8bcfbb284c1c812ed859a81252d2.png]  
    复杂化: 试试`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插件使用方法总结][Emmet]

### 生成兄弟,父 ###

**下面操作,是按下Enter发生的:**

#### `div+p+bq`,兄弟元素 ####

> `+`表示后面的元素和前面的元素是兄弟元素

#### `div+div>p>span+em^bq`,父元素 ####

> `X^Y`,Y的等级与X的父元素一样  
> 不知为什么,copy的按下Enter不能显示,手打的才可以

若要提升2级,即把Y提升到X的**父元素的父元素**一级,用`^^`

### 自定义类名,id ###

Emmet 默认的标签为 div ，如果我们不给出标签名称的话，默认就生成 div 标签。  
但是,Emmet会根据父标签进行判定。  
比如在<ul>中输入.item，就会生成<li class=“item”>。

#### `ul>.item`,指定是li元素的类名 ####

> `.` 表示生成的是class='XXX’属性

*  .box.outer.border,多个类名

#### `#name`自动生成id=name ####

> `#` 表示生成的是id='XXX’属性

`#name`,生成id

*  连一起用: `.item#name`

### 直接明确生成的结构 ###

> `()` 用于分组，这样可以更加明确要生成的结构，特别是层次关系

*  `(.foo>h1)+(.bar>h2)`,生成:

### 生成内容编号 ###

> `$`表示对生成内容依次编号  
> 只出现一个的话，就从1开始。  
> 如果出现多个，就从0开始。  
> 如果我想生成三位数的序号，那么要写三个$

#### `ul>li.item$*3`,生成item1,… ####

*  高级使用`ul>li.item${item$}*3`

*  `ul>li.item$$*3`,生成item01

#### 反向生成序号 ####

> 这里先加入一个`@`标记后,再加入一个`-`号

*  `ul>li.item$@-*3`,生成

#### 指定起始数,不从1开始 ####

`item@3*5`,表示从3开始,生成5个item;

*  `ul>li.item$@3*5`

当然,这可以反着来,试一下`ul>li.item$@-3*5`

### 自定义属性,标签文本 ###

#### 自定义属性 ####

> `[]`内放想要自定义的属性,可以先不给值  
> 标签\[attr=value\] 中括号里面的内容是你想添加的属性

*  `td[rowspan=2 colspan=3 title]`生成:

#### 自定义文本 ####

> `{}`内放想要添加的文本

*  `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`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70]
 *  `.header>ul.nav>(li>a[href style=block]>span{name})*5`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 1]
 *  `table>(th>td.col$*3)+(tb>(tr.row$$>td.col$)*3)+tf>td*3`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 2]

#### 注意事项 ####

*  css中  
    `p`表示%

> `w100`转为`width:100px;`  
> `w100p` 转为`width:100%;`

`e`表示em, `r`表示 rem

> 命令：h100r 结果：height: 100rem;

复杂点:

> 命令：`h10p+m5e` 结果：height: 10%;margin: 5em;

[Python_Miniconda]: https://www.bilibili.com/video/BV1Rh411h7HB
[vs code_miniconda]: https://blog.csdn.net/Snow_yuki/article/details/90635956
[Emmet]: https://www.cnblogs.com/leeke98/p/11208878.html
[Emmet Documentation]: https://docs.emmet.io/cheat-sheet/
[51dc2d0dc3634a39b0fbaea30f31353b.png]: /images/20220829/2acb83923ad249778bb2524d939a422a.png
[b986ace5b35644b992e23853de08cc88.png]: /images/20220829/c6b4a0c4857e424c82889d77455d1770.png
[f1ee8bcfbb284c1c812ed859a81252d2.png]: /images/20220829/029f36fdcb324153a4f9affdae9a259c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70]: /images/20220829/75d95150d3404115bd4d350e0a0c1470.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/35818e64e41646459e562fed52bd40d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/be0b9268d6e4499fa2ce9fb2e65cffdd.png