开发环境搭建与emmet语法
16lz
2021-09-21
开发环境
- 编辑器：vscode
- 浏览器：chrome
一.vscode安装
下载vscode网址：https://code.visualstudio.com/
在网站搜索找到：
点击进入官网：
点击Download下载，下载完成后进入安装：
点击我同意进入下一步，选择安装条件：
选择好后，进入安装进程等待：
等待结束，vscode程序安装完成。
二.浏览器安装
下载chrome网址：https://www.google.cn/chrome/
直接搜索进入官网下载
然后跟着提升操作完成安装就好。
三.vscode扩展安装配置
在vscode中找到扩展栏，并在搜索栏中搜索添加插件进行安装：
四.emmet语法
快速生成html5的文档结构
- 输入：
html5 或者！ - 输出：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" comten="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Document</title></head><body></body></html>
id,class语法
- id 输入：
div#dox #box - 输出：
<div id="box"></div>
- class 输入：
div.active .active - 输出：
<div class="active"></div>
文本标签
- 输入：
p{Hello world} - 输出：
<p>Hello world</p>
上下级标签
- 输入：
div>p>a - 输出：
<div><p><a href=""></a></p></div>
兄弟平级标签
- 输入:
div+p+a - 输出:
<div></div><p></p><a href=""></a>
父级元素的平级元素生成
- 输入：
div>p^a - 输出：
<div><p></p></div><a href= ""></a>
快速生成重复标签
- 输入：
a*5 - 输出：
<a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a>
快速生成重复导航
- 输入:·ul>li*3a{link}·
- 输出：
<ul><li><a href="">link</a></li><li><a href="">link</a></li><li><a href="">link</a></li></ul>
添加属性标签
- 输入：
a[href="https://www.php.cn"]{php.cn} - 输出：
<a href="https://www.php.cn">php.cn</a>
元素序号快速排列 $
- 直接排序
$
- 输入：
ul>li{item$}*5 - 输出：
<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul>
- 添加a标签排序
- 输入：
ul>li*5>a{link$} - 输出：
<ul><li><a href="">link1</a></li><li><a href="">link2</a></li><li><a href="">link3</a></li><li><a href="">link5</a></li></ul>
- 双位序号排序
$$
- 输入：
ul>li*5>a{link$$} - 输出：
<ul><li><a href="">link01</a></li><li><a href="">link02</a></li><li><a href="">link03</a></li><li><a href="">link04</a></li><li><a href="">link05</a></li></ul>
- 指定序号排序
$@5
- 输入：
ul>li*5>a{link$@5} - 输出：
<ul><li><a href="">link5</a></li><li><a href="">link6</a></li><li><a href="">link7</a></li><li><a href="">link8</a></li><li><a href="">link9</a></li></ul>
- 倒序
-$
- 输入：
ul>li*5>a{link$@-5} - 输出：
<ul><li><a href="">link9</a></li><li><a href="">link8</a></li><li><a href="">link7</a></li><li><a href="">link6</a></li><li><a href="">link5</a></li></ul>
更多相关文章
- VSCode安装及常用emmet语法
- 从0开始搭建云服务器，入门使用教程，搭建个人网站（上）
- 变量的数据类型,PHP的打印输出,变量类型的转换以及常量的定义
- php输出数组变成了对象？php数组转化成json的数据格式不是数组套对
- JavaScript 实现：输出斐波那契数列
- 13.）PHPWeb开发框架~Laravel接收用户的输入的类
- 16.【TP6学习笔记】其他通过CMD命令行的方式执行操作
- 魔兽无限金钱秘籍怎么输入
- laravel获取IP地址的真实地理位置