博主信息
博文 18
粉丝 0
评论 0
访问量 16871
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
开发环境搭建与emmet语法
手机用户1631860753
原创
686人浏览过

开发环境

  • 编辑器: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>
批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学