![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
官网：https://code.visualstudio.com/docs/?dv=osx （官网限速，可使用网盘下载）百度网盘：https://pan.baidu.com/s/1GY307Uu5KHzJNcywbEcqjA (提取码: 4q6p，网盘vscode版本: 1.64）
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,
# -> html标签的<h1>,一级标题## -> html标签的<h2>,二级标题### -> html标签的<h3>,三级标题#### -> html标签的<h4>,四级标题##### -> html标签的<h5>,五级标题
2.1 无序列表
2.2 有序列表
3.1. 单行:
const box = document.querySelector('#box')3.2.多行：
namespace core;class Demo{for($i = 0; $i < 10; $i++ ){var_dump($i);}//...}
| id | name | email | salary || --- | ------ | ------------ | ------ || 1 | 朱老师 | zhu@qq.com | 123456 || 2 | 王老师 | wang@qq.com | 323556 || 3 | 张老师 | zhang@qq.com | 553456 |
| id | name | salary | |
|---|---|---|---|
| 1 | 朱老师 | zhu@qq.com | 123456 |
| 2 | 王老师 | wang@qq.com | 323556 |
| 3 | 张老师 | zhang@qq.com | 553456 |
语法:
例：
如：
语法:
- 例：
第 19 期: <url地址>
- 如：
第 19 期: https://www.php.cn/course/1382.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) |
<!--文档类型 --><!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>