Mac版vsCode安装与配置、md常用功能、Html标签解析 -

Mac版vsCode安装与配置、md常用功能、Html标签解析

一、VsCode安装插件及字体配置：

1、VsCode下载地址：

官网：https://code.visualstudio.com/docs/?dv=osx   （官网限速，可使用网盘下载）
百度网盘：https://pan.baidu.com/s/1GY307Uu5KHzJNcywbEcqjA  (提取码: 4q6p，网盘vscode版本:  1.64）

2、插件安装方式 : ⇧+⌘+x ,搜索下列插件名称并安装

2.1、常用插件

序号	名称	描述
1	`chinese(simplified ...)`	简体中文语言包
2	`live server`	html 实时预览
3	`prettier-code formatter`	最流行的代码格式化插件
`markdown`
1	`markdown preview...`	markdown 实时预览
2	`markdownlint`	markdown 语法检查器
`php`
1	`php intelephense`	php 语法提示/自动补齐
2	`php intellisense`	php 代码跟踪/重构/自动完成
3	`php debug`	php 代码调试器
4	`php docbloker`	php 生成块级注释
5	`vscode-database`	vscode 数据库 SQL 支持插件
`js`
1	`bracket pair ...`	括号高亮配对提示
2	`javascript(es6) code snippets`	常用 js 代码片断
`css`
1	`auto close tag`	标签自动关闭
2	`auto rename tag`	标签自动更名
3	`indent-rainbow`	以不同颜色显示代码缩进
4	`css peek`	查看并跳转到 css 定义位置
5	`html css support`	css 自动智能补齐
6	`intellsense for css ...`	html 中的 css 智能提示
7	`easy less`	less 实时编译
8	`px-to-viewport`	px 自动转 vw
9	`svg preview`	svg 预览器
10	`tailwind css ...`	无需离开 html 就可快速构建出现代网页
11	`tabout`	按 tab 就可快速跳到下一下,或跳出/越过括号等

2.2、字体

为什么必须用等宽字体?
从视觉上快速区分,0 和 o, 1 和 l, 等宽字体可以做到,全部字符采用相同宽度,可有效解决它

字体名称	描述	支持连写
JetBrains Mono	idea 出品,免费	支持

字体下载：

百度网盘下载地址：https://pan.baidu.com/s/1jwgrzHpOHnMAb6YYu4D_KQ 
（提取码: lpem  ，下载后解压缩，进入font/ttf 目录，全选【⌘+a】,打开方式选择字体册安装。）

字体安装成功后,还需要在 vscode 中进行配置: settings.json

# 将JetBrains Mono NL 字体放在第一个
"editor.fontFamily": "JetBrains Mono NL,Menlo, Monaco, 'Courier New', monospace",
# 打开允许连写开关
"editor.fontLigatures": true,

二、Markdown常用语法

1. 标题

# -> html标签的<h1>,一级标题
## -> html标签的<h2>,二级标题
### -> html标签的<h3>,三级标题
#### -> html标签的<h4>,四级标题
##### -> html标签的<h5>,五级标题

2. 列表

2.1 无序列表

item1
item2
item3
- subItem3-1
- subItem3-2
- subItem3-3

2.2 有序列表

item1
item2
item3
1. subItem3-1
2. subItem3-2
3. subItem3-3

3. 代码

3.1. 单行:

例： `代码…`
如: const box = document.querySelector('#box')

3.2.多行：

例：```代码…```
如：

namespace core;
class Demo
{
    for($i = 0; $i < 10; $i++ ){
        var_dump($i);
    }
    //...
}

4. 表格

例：

| id  | name   | email        | salary |
| --- | ------ | ------------ | ------ |
| 1   | 朱老师 | zhu@qq.com   | 123456 |
| 2   | 王老师 | wang@qq.com  | 323556 |
| 3   | 张老师 | zhang@qq.com | 553456 |

如：

id	name	email	salary
1	朱老师	zhu@qq.com	123456
2	王老师	wang@qq.com	323556
3	张老师	zhang@qq.com	553456

5. 图片

语法:

例：
![图片说明](图片URL)

如：

6.链接:

语法:

例：

第 19 期: <url地址>

如：

第 19 期: https://www.php.cn/course/1382.html

三、HTML标签功能

1、html 文档描述

序号	名称	描述
1	结构化	像一根倒置的”树”,从根到叶子,具有明显的层次
2	DOM	html 结构使用”文档对象模型”来描述(`document objet model`)
3	元素	html 文档中的元素,如根节点,头部, 主体等,使用`<标签>`来描述
4	标签	用来描述元素,通常具有一定语义,例如`<head>,<body>`,也有通用无语义的,如`<div><span>`
5	属性	描述元素特征或行为,写在标签/起始标签中, 如`<meta charset="UTF-8">`
6	html	文档大小写不敏感的,`<BODY>`与`<body>`完全没有区别,但推荐全部小写,除约定外(`UTF-8`)

2、html代码展示

<!--文档类型 -->
<!DOCTYPE html>
<!-- 根元素。 lang： 页面语言 -->
<html lang="zh-CN">
<!-- 头元素: 页面描述,供浏览器或搜索引擎解析时参考 -->
<head>
    <!-- 元标签meta。 charset：默认字符集 -->
    <meta charset="UTF-8" />
    <!-- 浏览器兼容配置 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--视口适配控制。 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 页面标题:显示在浏览器标签页-->
    <title>Document</title>
    <!-- 引入外部样式表 -->
    <link rel="stylesheet" href="Hello.css" />
    <!-- 引入外部脚本 -->
    <script type="javascript" src="index.js"></script>
</head>
<!-- 主体元素: 页面实际显示的内容 -->
<body>
    <h1>Hello World</h1>  <!--双标签-->
    <img src="xxx.jpg" alt="" /><!--单标签 -->
    <!-- 单标签: 通常用于引用外部资源，双标签: 内容来自开发者提供 -->
    <!--单双标签的判断并不绝对 -->
</body>
</html>