Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 开发环境搭建与emmet语法
Blogger Information
Blog 18
fans 0
comment 0
visits 10939
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
开发环境搭建与emmet语法
手机用户1631860753
Original
501 people have browsed it

开发环境

  • 编辑器：vscode
  • 浏览器：chrome

一.vscode安装

下载vscode网址：https://code.visualstudio.com/

在网站搜索找到：

点击进入官网：

点击Download下载，下载完成后进入安装：

点击我同意进入下一步，选择安装条件：

选择好后，进入安装进程等待：

等待结束，vscode程序安装完成。

二.浏览器安装

下载chrome网址：https://www.google.cn/chrome/

直接搜索进入官网下载

然后跟着提升操作完成安装就好。

三.vscode扩展安装配置

在vscode中找到扩展栏，并在搜索栏中搜索添加插件进行安装：

四.emmet语法

快速生成html5的文档结构

  • 输入：html5 或者！
  • 输出：
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8"/>
    5. <meta http-equiv="X-UA-Compatible" comten="IE=edge"/>
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    7. <title>Document</title>
    8. </head>
    9. <body></body>
    10. </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
  • 输出：
    1. <div>
    2. <p><a href=""></a></p>
    3. </div>

兄弟平级标签

  • 输入:div+p+a
  • 输出:
    1. <div></div>
    2. <p></p>
    3. <a href=""></a>

父级元素的平级元素生成

  • 输入：div>p^a
  • 输出：
    1. <div>
    2. <p></p>
    3. </div>
    4. <a href= ""></a>

快速生成重复标签

  • 输入：a*5
  • 输出：
    1. <a href=""></a>
    2. <a href=""></a>
    3. <a href=""></a>
    4. <a href=""></a>
    5. <a href=""></a>

快速生成重复导航

  • 输入:·ul>li*3a{link}·
  • 输出：
    1. <ul>
    2. <li><a href="">link</a></li>
    3. <li><a href="">link</a></li>
    4. <li><a href="">link</a></li>
    5. </ul>

添加属性标签

  • 输入：a[href="https://www.php.cn"]{php.cn}
  • 输出：<a href="https://www.php.cn">php.cn</a>

元素序号快速排列 $

  1. 直接排序 $
  • 输入：ul>li{item$}*5
  • 输出：
    1. <ul>
    2. <li>item1</li>
    3. <li>item2</li>
    4. <li>item3</li>
    5. <li>item4</li>
    6. <li>item5</li>
    7. </ul>
  1. 添加a标签排序
  • 输入：ul>li*5>a{link$}
  • 输出：
    1. <ul>
    2. <li><a href="">link1</a></li>
    3. <li><a href="">link2</a></li>
    4. <li><a href="">link3</a></li>
    5. <li><a href="">link5</a></li>
    6. </ul>
  1. 双位序号排序 $$
  • 输入：ul>li*5>a{link$$}
  • 输出：
    1. <ul>
    2. <li><a href="">link01</a></li>
    3. <li><a href="">link02</a></li>
    4. <li><a href="">link03</a></li>
    5. <li><a href="">link04</a></li>
    6. <li><a href="">link05</a></li>
    7. </ul>
  1. 指定序号排序 $@5
  • 输入：ul>li*5>a{link$@5}
  • 输出：
    1. <ul>
    2. <li><a href="">link5</a></li>
    3. <li><a href="">link6</a></li>
    4. <li><a href="">link7</a></li>
    5. <li><a href="">link8</a></li>
    6. <li><a href="">link9</a></li>
    7. </ul>
  1. 倒序-$
  • 输入：ul>li*5>a{link$@-5}
  • 输出：
    1. <ul>
    2. <li><a href="">link9</a></li>
    3. <li><a href="">link8</a></li>
    4. <li><a href="">link7</a></li>
    5. <li><a href="">link6</a></li>
    6. <li><a href="">link5</a></li>
    7. </ul>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post