1 搭建环境
下载地址
浏览器 chrome 下载地址 https://www.google.cn/chrome/
编辑器 vscode 下载地址 https://code.visualstudio.com
VsCode 插件安装
Chinese (Simplified) Language Pack for Visual Studio Code 中文语言包
Live Server 实时预览html文件 注意要放在文件夹中
Helium Icon Theme 文件图标 安装好后要选中它
Auto Close Tag 标签自动关闭
Auto Rename Tag 标签自动更名
HTML CSS Support 使 html,css 语法提示增强
HTML Snippets 常用html代码片断模板
CSS Peek 快速定位/查看id/class的css定义
IntelliSense for CSS class names in HTML 类名 class 自动感应完成
JavaScript (ES6) code snippets 常用es6代码片断模板
TabOut 按tab自动跳过右括号
Bracket Pair Colorizer 使用不同颜色标记括号配对
markdownlint 检查 markdown语法/格式
Markdown Preview Enhanced 增强版 markdown预览器
Path Intellisense 路径智能提示
markdown 常用语法
1.标题
# 一级标题, ## 二级标题, ### 三级标题, #### 四级标题注意：一般在#后跟个 空格 再写文字
2.段落
直接写文本
或者空 二格 直接写文本
3.列表
无序列表
用 - + * 任何一种都可以注意：- + * 跟内容之间都要有一个空格列表嵌套 上一级和下一级之间敲三个空格即可
有序列表
数字加点 如 1. 2. 3.注意：序号跟内容之间要有空格
4.链接
- 只显示地址: https://www.php.cn
- 只显示链接文本： PHP 中文网
5.图片
6.代码
单行代码:
const obj = {};多行代码
const obj = { a: 1, b: 2 };const add = obj => obj.a + obj.b;console.log(add(obj));
$email = 'hello@php.cn';
7.表格
| 学号 | 姓名 | 课程 | 成绩 |
|---|---|---|---|
| 1 | 老猪 | 拳击 | 99 |
| 2 | 灭绝 | 瑜伽 | 100 |
8.引用
这是一个引用
还来
9.字体
- 这是加粗的文字
- 这是倾斜的文字`
- 这是斜体加粗的文字
这是加删除线的文字
10.字体
三个或者三个以上的 - 或者 * 都可以
Emmet语法实例
- emmet文档参考 https://docs.emmet.io/cheat-sheet/
快速写出html5的文档结构
! + Tab键快速写出 一个容器
div带id
div#box + Tab键 或者 Enter键 简写方式：#box + Tab键div带class
div.box + Tab键 或者 Enter键 简写方式：.box + Tab键
P标签带文本
p{hello PHP} + Tab键 或者 Enter键标签层级写法
div > p > a + Tab键 或者 Enter键标签平级写法
div + p + a + Tab键 或者 Enter键重复写法
a*3 + Tab键 或者 Enter键序号写法
标签内容加序号
ul > li{item$}*3 + Tab键两位序号写法
ul > li{item$$}*3 + Tab键指定序号开始写法
ul > li{item$@5}*3 + Tab键指定序号反向开始写法
ul > li*5> a{link$@-5} + Tab键