第一课作业0917

1 安装vscode,并将推荐插件安装与配置好

1.1 下载

推荐在官方网站下载: https://code.visualstudio.com

1.2 常用插件安装

在左侧扩展工具栏（快捷键：Ctrl+Shift+X）搜索相应的插件名称，在加载出来的页面点击安装即可。
插件安装截图

插件的使用，软件的颜色主题取决于个人的使用习惯，哪种方式使用起来舒服，就用哪一种。总而言之，适合自己的最重要。

2 实例演示emmet语法

emmet语法支持快速编写代码，能够有效提高效率。

2.1 快速生成html5文档

输入!,按回车或者Tab即可快速生成。

2.2 id属性的快速生成 `#`

输入：div#box

输出：<div id="box"></div>

如果省略标签，则生成默认标签<div>

2.3 class属性的快速生成 `.`

输入：div.active

输出：<div class="active"></div>

如果省略标签，则生成默认标签<div>

2.4 id、class属性可以同时快速生成

输入：div#box.active

输出：<div id="box" class="active"></div>

2.5 文本的快速生成 `{}`

输入：p{hello world}

输出：<p>hello world</p>

2.6 子元素的快速生成 `>`

输入：div>p>a

输出：

<div>
    <p><a href=""></a></p>
</div>

2.7 兄弟元素的快速生成 `+`

输入：div+p+a

输出：

<div></div>
<p></p>
<a href=""></a>

2.8 父级元素的快速生成 `^`

输入：div>p^a

输出：

<div>
    <p></p>
</div>
<a href=""></a>

父级元素快速生成的用法较为少用。

2.9 重复元素的快速生成 `*n`

输入：ul>li*3>a{item}

输出：

<ul>
    <li><a href="">item</a></li>
    <li><a href="">item</a></li>
    <li><a href="">item</a></li>
</ul>

2.10 元素序号的快速生成

2.10.1 递增 `$`

输入：ul>li*3>a{item$}

输出：

<ul>
    <li><a href="">item1</a></li>
    <li><a href="">item2</a></li>
    <li><a href="">item3</a></li>
</ul>

2.10.2 自定义前导的递增 `$$$`

输入：ul>li*3>a{item$$$}

输出：

<ul>
    <li><a href="">item001</a></li>
    <li><a href="">item002</a></li>
    <li><a href="">item003</a></li>
</ul>

$的个数表示前导位数。

2.10.3 自定义递增序号 `$@n`

输入：ul>li*3>a{item$@3}

输出：

<ul>
    <li><a href="">item3</a></li>
    <li><a href="">item4</a></li>
    <li><a href="">item5</a></li>
</ul>

2.10.4 序号递减 `$@n`

输入：ul>li*3>a{item$@-3}

输出：

<ul>
    <li><a href="">item5</a></li>
    <li><a href="">item4</a></li>
    <li><a href="">item3</a></li>
</ul>

n表示递减至最小的数字

如果出现emmet语法没有智能提示的情况，可删掉上一个字符重新触发智能提示。

VSCode安装及常用emmet语法

第一课作业0917

1 安装vscode,并将推荐插件安装与配置好

1.1 下载

1.2 常用插件安装

2 实例演示emmet语法

2.1 快速生成html5文档

2.2 id属性的快速生成 `#`

2.3 class属性的快速生成 `.`

2.4 id、class属性可以同时快速生成

2.5 文本的快速生成 `{}`

2.6 子元素的快速生成 `>`

2.7 兄弟元素的快速生成 `+`

2.8 父级元素的快速生成 `^`

2.9 重复元素的快速生成 `*n`

2.10 元素序号的快速生成

2.10.1 递增 `$`

2.10.2 自定义前导的递增 `$$$`

2.10.3 自定义递增序号 `$@n`

2.10.4 序号递减 `$@n`

更多相关文章

随机推荐

VSCode安装及常用emmet语法

第一课作业0917

1 安装vscode,并将推荐插件安装与配置好

1.1 下载

1.2 常用插件安装

2 实例演示emmet语法

2.1 快速生成html5文档

2.2 id属性的快速生成 #

2.3 class属性的快速生成 .

2.4 id、class属性可以同时快速生成

2.5 文本的快速生成 {}

2.6 子元素的快速生成 >

2.7 兄弟元素的快速生成 +

2.8 父级元素的快速生成 ^

2.9 重复元素的快速生成 *n

2.10 元素序号的快速生成

2.10.1 递增 $

2.10.2 自定义前导的递增 $$$

2.10.3 自定义递增序号 $@n

2.10.4 序号递减 $@n

更多相关文章

随机推荐

2.2 id属性的快速生成 `#`

2.3 class属性的快速生成 `.`

2.5 文本的快速生成 `{}`

2.6 子元素的快速生成 `>`

2.7 兄弟元素的快速生成 `+`

2.8 父级元素的快速生成 `^`

2.9 重复元素的快速生成 `*n`

2.10.1 递增 `$`

2.10.2 自定义前导的递增 `$$$`

2.10.3 自定义递增序号 `$@n`

2.10.4 序号递减 `$@n`