首页 > 博客列表 > vscode软件与插件安装配置、markdown语法、Emmet插件使用方式

博主信息

博文 5

粉丝 0

访问量 7720

专题推荐

更多>

一、vscode 安装与配置

1、vscode 安装

1.浏览器搜索 vscode,进入官网https://code.visualstudio.com。

2.找到与电脑当前版本对应的 vscode 软件版本并下载。
vscode软件下载

3.运行安装程序，依据步骤进行安装即可。

2、vscode 插件安装

1.安装方法，在 vscode 软件应用商店搜索对应插件名称进行安装。

2.插件安装列表
插件安装列表1
插件安装列表2
插件安装列表3
插件安装列表4

二、markdown 语法及 emmet 插件的使用方式

1、markdown 语法

(1).标题

一级标题

二级标题

三级标题

(2).列表

有序列表

1.
2.
3.

无序列表

1
- 11
2
- 22
3
- 33

(3)引用

abcdefg
hijklmn
opqrst
uvwxyz

(4)代码块

<?php include "header.php" ?>

<!DOCTYPE html>
<html>
  <head> </head>
  <body></body>
</html>

$name = "aaa";

(5)链接

PHP 中文网

PHP 中文网 https://www.php.cn

(6)图片

PHP15期

(7)表格

a	b	c	d	e	f
1	2	3	4	5	6
11	12	13	14	15	16

2、emmet 的插件使用方式

(1) html 初始结构

！=> Tab

可以快速生成基础的结构

(2) id（#）,class（.）

id 指令:# ; class 指令:.

div#test

<div id="test"></div>

div.test

<div class="test"></div>

(3) 子节点（>），兄弟节点（+），上级节点（^）

子节点指令:> ; 兄弟节点指令:+ ; 上级节点:^

div>ul>li>p

<div>
  <ul>
    <li>
      <p></p>
    </li>
  </ul>
</div>

div+ul+p

<div></div>
<ul></ul>
<p></p>

div>ul>li^div (这里的^是接在 li 后面所以在 li 的上一级，与 ul 成了兄弟关系,当然两个^^就是上上级）

<div>
  <ul>
    <li></li>
  </ul>
  <div></div>
</div>

(4) 重复（*）

重复指令：*

div5 （号后面添加数字表示重复的元素个数）

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

(5) 分组（()）

分组指令：()

div>(ul>li>a)+div>p（括号里面的内容为一个代码块，表示与括号内部嵌套和外面的的层级无关）

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

div>ul>li>a+div>p (如果不加括号，a+div 这样 div 就是和 a 是兄弟关系，会包含在 li 里面)

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

(6) 属性（[attr]）——id，class 都有怎么能少了属性呢

属性指令：[]

a[href=’###’ name=‘xiaoA’] （中括号内填写属性键值对的形式，并且空格隔开）

<a href="###" name="xiaoA"></a>

(7) 编号（$）

编号指令：$

ul>li.test\$*3 （$代表一位数，后面更上*数字就代表从 1 递增到填写的数字）

<ul>
  <li class="test1"></li>
  <li class="test2"></li>
  <li class="test3"></li>
</ul>

注意：

一个$ 代表一位数，

就是两位数了,以此类推就可以形成\$(1),\$\$(01),\$\$\$(001)

如果想自定义从几开始递增的话就利用：\$@+数字*数字
例如：ul>li*3.test\$@3

<ul>
  <li class="test3"></li>
  <li class="test4"></li>
  <li class="test5"></li>
</ul>

(8) 文本（{}）

文本指令：{}

ul>li.test$*3{测试$}

（{里面填写内容，可以和$一起组合使用哦}）

<ul>
  <li class="test1">测试1</li>
  <li class="test2">测试2</li>
  <li class="test3">测试3</li>
</ul>

(9) 隐式标签

这个标签没有指令，而是部分标签可以不使用输入标签，直接输入指令，即可识别父类标签。

例如：.test

<div class="test"></div>

例如：ul>.test$*3

<ul>
  <li class="test1"></li>
  <li class="test2"></li>
  <li class="test3"></li>
</ul>

例如：select>.test$*5

<select name="" id="">
  <option class="test1"></option>
  <option class="test2"></option>
  <option class="test3"></option>
  <option class="test4"></option>
  <option class="test5"></option>
</select>

隐私标签有如下几个：

li：用于 ul 和 ol 中
tr：用于 table、tbody、thead 和 tfoot 中
td：用于 tr 中
option：用于 select 和 optgroup 中

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

vscode软件与插件安装配置、markdown语法、Emmet插件使用方式

2021-03-20 14:59:30