开学第一课

开学第一课

1. 学习方式

1. 直播:PC(推荐),APP
2. 回放/源码: PC 课程页面, Git
3. 作业: Blog(博客)
4. 提问: QQ 群

2. 常用术语

1. http: 超文本/传输/协议
   • 超文本: html
   • 传输: tcp
   • 协议: 合同/规则
   • 特征: 无状态
2. url: 统一资源定位符,表示网上的唯一资源
3. path: 有二种
   • 相对路径: 从当前位置开始, 36->40, 4
     • .: 当前路径,abc
     • ../: 上级路径
   • 绝对路径: 从一个固定位置开始, 1-40, 40
     • 通常是从盘符开始, c:,d:
     • usr/local/bin
4. 页面: html
   • 静态: .html, SEO
   • 动态: .php

3. 环境与工具

1. 浏览器: chrome
2. 编辑器: VSCode
3. 编程字体: 等宽,连写(Fira Code, Cascadia Code)
   • Cascadia Code
4. Git 版本控制: Git

4. vscode 常用插件(部分)

1. 简体中文: Chinese(Simplified)...
2. 编辑窗口主题: One Dark Pro
3. 图标主题: Material Icon Theme
4. 产品主题: Material Product Icons
5. 格式化: Prettier-Code formatter
6. 标签自动闭合: Auto Close Tag
7. 标签自动更名: Auto Rename Tag
8. 代码拼写检查: Code Spell Checker
9. MarkDown 预览:Markdown Preview Enhanced
10. Markdown 语法验证: markdownnlint

markdown 语法

markdown -> html

1. 标题

# 一级标题,<h1>
## 二级标题,<h2>
### 三级标题,<h3>
#### 四级标题
##### 五级标题
###### 六级标题

---

2 分隔符: ---,至少三个-

3. 段落

这是一个段落,对应 html 中的<p>

这是第二段落

4. 字体样式

**Text**
_hello_
_内容_

5. 引用

这是一段引用

6. 列表

(1) 无序列表

• item1
• item2
• item3

(2) 有序列表

1. item1
2. item2
3. item3

7. 代码块

(1) 单行: const num = 100
(2) 多行:

class User
{
    private array $data = [];
}

8. 表格

序号	姓名	性别	工资
1	杨过	男	12345
2	杨康	男	34567
3	王重阳	男	56789

9. 链接

1. 带 title, php 中文网
2. 只有 url, https://php.cn

10. 图片

Git 基本操作

本地仓库

# 初始化, 将目录(项目)->git可管理的项目
git init
# 提交到暂存区/索引区
git add .
# 提交到本地的版本库/仓库中
git commit -m 'first commit'

远程仓库

# 自我介绍
git config --global user.name "zhuyuseng"
git config --global user.email "zhuyuseng@aliyun.com"
# 设置远程仓库的地址
git remote add origin  https://gitee.com/bnkt/22.git
# 仓库的自我介绍: 将本地与远程仓库进行关联
git push --set-upstream origin master
# 以后, 只要用以下指令直接提交
git push

VSCode 插件列表(更新中…)

插件并非安装的越多越好,根据需求定,以满足最小需求为准

1. 主题/图标

1. 简体中文: Chinese(Simplified)...
2. 编辑窗口主题: Night Owl
3. 图标主题: Material Icon Theme
4. 产品主题: Material Product Icons
5. 流行的主题 1: One Dark Pro
6. 流行的主题 2: Dracula Official

2. Markdown

1. MarkDown 预览:Markdown Preview Enhanced
2. Markdown 语法验证: markdownnlint
3. Markdown 全聚合:Markdown All in One
4. Markdown 转 PDF:Markdown PDF

3. HTML/CSS

1. 标签自动闭合: Auto Close Tag
2. 标签自动更名: Auto Rename Tag
3. 智能提示增强: HTML CSS Support
4. 图片预览: Image preview
5. 实时预览:Live Server
6. Sass 语法高亮: Sass
7. 单位自动计算: px to rem & rpx & vw(cssrem)

4. JS/ES/TS/Node

1. 官方 JS/TS 插件: JavaScript and TypeScript Nightly
2. 智能自动导入:Auto Import
3. ES6 代码片断: JavaScript(ES6) code snippets
4. JS 语法校验: ESLint
5. 实时预览工具: Quokka.js
6. Quokka配套插件: Quokka Statusbar button
7. Node 代码片断: node-snippets

5. VUE

1. 针对 TS 的 VUE 插件: TypeScript Vue Plugin(Volar)
2. Vue3 常用片断: Vue 3 Snippets
3. Vue2/3 全功能支持: Vue 2 Support-All In One
4. 实用的 Vue 扩展: Vue Language Features(Volar
5. 实用的 Vue 代码片断: Vue VSCode Snippets

6. PHP

1. PHP 智能格式化: php cs fixer
2. PHP 智能块注释: PHP DocBlocker
3. PHP 智能提示增强: PHP Intelephense
4. PHP 常用代码片断 1: PHP Snippets
5. PHP 常用代码片断 2: PHP Snippets VS Code

7. 格式化

1. 通用格式化: Prettier-Code formatter
2. 格式化 php 中 html:Format Html in PHP
3. SQL 格式化工具: SQL Formatter
4. php 格式化工具: phpfmt-PHP formatter

8. 其它

1. 批量文件更名:Batch Rename
2. 多彩的注释文本: Better Comments
3. 16 进制文件查看: Hex Editor
4. 代码截图神器: CodeSnap
5. 代码拼写检测: Code Spell Checker
6. 智能路径提示: Path Intellisense
7. 项目管理器: Project Manager
8. SVG 查看器: SVG
9. 自动跳过引号括号: Tabout
10. 查看 PDF: vscode-pdf
11. 超智能代码提示器:Tabnine AI Autocomplete for ...